微信小程序网络请求超详细解析，wx.request 封装揭秘

wx.request 网络请求详解：轻松玩转小程序开发

在小程序开发中，网络请求是必备技能。本文将详细介绍 wx.request 方法，帮助你轻松掌握网络请求，实现小程序的各种功能。

一、什么是 wx.request

wx.request 是微信小程序提供的网络请求方法，基于 HTTP 协议，可向服务器发送请求并接收响应数据。

二、wx.request 的基本用法

发送 GET 请求：

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

发送 POST 请求：

wx.request({
  url: 'https://example.com/api/users',
  method: 'POST',
  data: {
    name: '张三',
    age: 20
  },
  success(res) {
    console.log(res.data)
  }
})

三、高级用法

请求头设置：

设置请求头，可以传递额外信息，比如 Content-Type、Authorization 等。

wx.request({
  url: 'https://example.com/api/users',
  header: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer 123456'
  },
  success(res) {
    console.log(res.data)
  }
})

响应数据处理：

请求成功后，通过 res.data 获取服务器返回的 JSON 数据。

wx.request({
  url: 'https://example.com/api/users',
  success(res) {
    const data = res.data
    console.log(data.name)
    console.log(data.age)
  }
})

状态码处理：

服务器返回的状态码表示请求状态，200 表示成功，404 表示资源不存在等。

wx.request({
  url: 'https://example.com/api/users',
  success(res) {
    const statusCode = res.statusCode
    if (statusCode === 200) {
      // 请求成功
    } else {
      // 请求失败
    }
  }
})

错误处理：

请求失败时，会收到错误对象，其中包含错误信息和错误代码。

wx.request({
  url: 'https://example.com/api/users',
  fail(err) {
    console.log(err.errMsg)
    console.log(err.errCode)
  }
})

四、wx.request 的封装

为了简化代码，可以封装 wx.request 方法。

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

使用封装后的 request：

request({
  url: 'https://example.com/api/users'
}).then(data => {
  console.log(data)
})

五、微信文档疑点释义

疑点一：Content-Type 字段取值

微信文档提到 Content-Type 可取 application/json 和 application/x-www-form-urlencoded，但实际可取更多值，如 text/plain。

常见问题解答

1. 为什么请求失败？

可能是网络问题、服务器故障或代码错误导致。

2. 如何处理请求超时？

在 wx.request 配置中设置 timeout 选项，如果请求在指定时间内未完成，则触发超时处理。

3. 如何获取原始响应数据？

使用 responseType 选项，将其设置为 'arraybuffer' 可获得二进制数据。

4. 如何取消请求？

使用 abort 方法取消当前请求。

5. 如何进行文件上传？

使用 uploadFile 方法，传入文件路径和服务器接口，即可上传文件。

结论

wx.request 方法是小程序网络请求的基础，掌握其用法可以让你轻松实现各种小程序功能。通过合理的封装和处理，可以进一步提升代码的可维护性和健壮性。