微信小程序的网络请求-猿码集

微信小程序的网络请求

在微信小程序中，我们经常需要与服务器进行通信，获取或提交数据。这就需要用到微信小程序提供的网络请求功能。

1. 发送网络请求

发送网络请求是小程序中常见的操作。在发送网络请求之前，需要先调用API wx.request() 来进行网络请求。该API支持如下参数：

url: 必填项，表示要请求的接口地址。

data: 非必填项，表示要发送的请求参数。

header: 非必填项，表示请求头部信息。

method: 非必填项，表示请求方式，默认为 GET 请求。

dataType: 非必填项，表示响应数据类型，默认为 json。

success: 非必填项，表示请求成功后的回调函数。

fail: 非必填项，表示请求失败后的回调函数。

complete: 非必填项，表示请求结束后的回调函数（无论请求成功或失败都会执行）。

下面是一个发送 GET 请求的示例：


wx.request({
  url: 'https://www.example.com/api/getData',
  success: function (res) {
    console.log(res.data)
  }
})

上述代码表示，向接口地址 https://www.example.com/api/getData 发送 GET 请求，并在请求成功后将响应数据打印到控制台。可以看出，wx.request() 函数的参数是一个对象，使用了对象字面量的语法。

2. 发送带参数的网络请求

如果需要在请求中传递参数，可以使用 data 参数。该参数接受一个 JavaScript 对象或字符串类型的参数：


wx.request({
  url: 'https://www.example.com/api/getData',
  data: {
    key1: value1,
    key2: value2
  },
  success: function(res) {
    console.log(res.data)
  }
})

上面的代码中，我们在请求中传递了两个参数 { key1: value1, key2: value2 }，这些参数将会被序列化为如下字符串：

key1=value1&key2=value2

默认情况下，data 参数将以 application/json 的方式发送到服务器。如果要以 application/x-www-form-urlencoded 的方式发送，可以设置 header 参数如下：


wx.request({
  url: 'https://www.example.com/api/getData',
  data: {
    key1: value1,
    key2: value2
  },
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  success: function(res) {
    console.log(res.data)
  }
})

3. 发送带请求头信息的网络请求

对于一些需要身份验证才能访问的接口，在请求时需要设置请求头信息。设置请求头信息可以使用 header 参数。


wx.request({
  url: 'https://www.example.com/api/getData',
  header: {
     'Authorization': 'Bearer ' + token
  },
  success: function(res) {
    console.log(res.data)
  }
})

上述代码中，我们在请求头信息中加入了 Authorization 字段。在向API发送请求时，将携带该字段信息。

4. 发送POST请求

在小程序中，发送 POST 请求与发送 GET 请求类似。需要在 wx.request() 中设置请求方式为 POST：


wx.request({
  url: 'https://www.example.com/api/submitData',
  method: 'POST',
  data: {
    key1: value1,
    key2: value2
  },
  success: function(res) {
    console.log(res.data)
  }
})

上述代码表示向接口地址 https://www.example.com/api/submitData 发送POST请求，并向服务器传递两个参数 { key1: value1, key2: value2 }。

5. 异步请求

微信小程序的网络请求是异步操作。在请求成功或失败后，将会回调预先设置的 success 和 fail 函数，而不会阻塞主程序。


wx.request({
  url: 'https://www.example.com/api/getData',
  success: function(res) {
    console.log(res.data)
  },
  fail: function(err) {
    console.log(err)
  }
})

如果要在请求结束后不论请求结果都做相应处理，可以使用 complete 回调函数：


wx.request({
  url: 'https://www.example.com/api/getData',
  complete: function(res) {
    console.log('请求完成')
  }
})

6. 网络请求的错误处理

在发送网络请求时可能会出现错误。为了及时发现和处理请求错误，可以利用`wx.request()`函数中的`fail`回调函数。在调用接口错误时，fail函数将会被调用并返回一个错误描述，具体的错误码可以在文档中查找。


wx.request({
  url: 'https://www.example.com/api/getData',
  fail: function(res) {
    console.log(res.errMsg)
  }
})

在上述代码中，调用失败时控制台将会打印出错误信息，以便于我们排查错误。

7. 超时处理

有时在网络请求中，由于网速或者请求耗时比较长，会出现请求超时的情况。针对这种情况，我们可以在`wx.request()` 里面设置一个timeout值，用来设置超时时间，当请求超过设置的时间后，请求将自动断开。


wx.request({
  url: 'https://www.example.com/api/getData',
  timeout: 5000,
  success: function(res) {
    console.log(res.data)
  },
  fail: function(err) {
    console.log(err)
  }
})

在上述代码中，我们设置了超时时间为5秒（5000毫秒），当请求时间超过5秒时，请求将会自动失败并执行fail回调函数。

8. 使用Promise封装网络请求

为了让网络请求更清晰明了，我们可以将网络请求进行封装。下面是一个使用Promise封装wx.request()函数的示例：


function request(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}
// 调用封装的request函数
request('https://www.example.com/api/getData')
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

上面的代码中，我们将wx.request函数进行了封装，并返回了一个Promise。在请求成功时，回调resolve函数，否则回调reject函数。这样，我们就可以在调用request函数时使用Promise.then()和Promise.catch()来处理请求成功和失败的情况了。

总结

本文主要介绍了微信小程序的网络请求，详细讲解了如何发送网络请求，如何发送带参数和请求头信息的网络请求，如何发送POST请求以及如何进行错误处理和超时处理。同时，我们还介绍了如何使用Promise对网络请求进行封装，提高代码的可读性和可维护性。

微信小程序的网络请求