返回

封装wx.request构建请求拦截器与响应拦截器的请求模块

前端

在微信小程序开发中，经常会遇到需要对网络请求进行拦截和处理的情况，比如添加统一的请求头、参数、鉴权等，或对服务器响应数据进行统一处理，比如解析JSON数据、处理错误信息等。为了方便开发，我们可以使用一个封装好的请求模块来实现这些功能。

封装请求模块可以为我们提供统一的API，方便我们进行请求操作。同时，我们可以根据实际需求，在请求模块中添加需要的拦截器，这样就可以实现请求拦截和响应拦截功能。

下面是一个封装好的请求模块，它包含一个请求拦截器和一个响应拦截器：

const request = (url, options) => {
  // 请求拦截器
  if (options.header) {
    Object.assign(options.header, {
      'content-type': 'application/json', // 默认Content-Type
      'token': wx.getStorageSync('token') // 从本地存储中获取token
    })
  } else {
    options.header = {
      'content-type': 'application/json', // 默认Content-Type
      'token': wx.getStorageSync('token') // 从本地存储中获取token
    }
  }

  // 响应拦截器
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

使用这个封装好的请求模块，我们可以在小程序中进行网络请求，比如：

request('https://example.com/api/v1/users', {
  method: 'GET'
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})

这个请求模块会自动添加统一的请求头，并对服务器响应数据进行解析，如果服务器返回的不是JSON数据，则会自动将其解析为JSON对象。

我们可以根据实际需求，在请求模块中添加更多的拦截器，比如鉴权拦截器、参数校验拦截器等，从而实现更复杂的请求处理逻辑。