微信小程序封装网络请求和拦截器实战步骤

下面我将详细讲解“微信小程序封装网络请求和拦截器实战步骤”的完整攻略。

步骤一：安装依赖

为了封装网络请求和拦截器，我们需要使用 wx.request API 进行网络请求，使用 Promise 进行异步编程，所以我们需要安装 Promise 的依赖 npm i bluebird --save，同时也需要安装 lodash 工具类库来简化代码 npm i lodash --save。

步骤二：封装 request 方法

我们可以新建一个 api 文件夹，并在其中新建一个 request.js 文件用来封装 wx.request。其中，我们要使用 Promise 将 wx.request 方法进行封装，以便于后续进行异步编程。

const Promise = require('../lib/bluebird.min.js')
const { isEmpty } = require('../lib/lodash.min.js')

/**
 * 发送http请求
 * @param {Object} options 微信请求的配置项
 * @return {Promise} Promise对象
 */
const request = (options) => {
  // 设置默认配置项
  const defaultOptions = {
    method: 'GET',
    header: {
      'Content-Type': 'application/json' // 默认值
    }
  }

  // 合并配置项
  const requestOptions = Object.assign(defaultOptions, options)

  return new Promise((resolve, reject) => {
    wx.request({
      ...requestOptions,
      success: ({ statusCode, data }) => {
        // 自定义业务状态码
        if (statusCode >= 200 && statusCode < 300) {
          resolve(data)
        } else {
          reject(data)
        }
      },
      fail: reject
    })
  })
}

module.exports = {
  request
}

在上述代码中，我们使用了默认配置项、合并配置项、Promise 异步编程等技巧，将 request 方法进行封装。这一封装的过程，可以使我们后续的代码维护以及添加拦截器等功能更加方便。

同时，我们在 success 回调中自定义了业务状态码，以便于后续的错误处理。

步骤三：添加请求拦截器

拦截器是对请求/响应进行预处理的中间件机制，它能够在请求发出时、响应返回时或中间某个时刻对请求/响应进行截获并处理。为了在拦截器中负责对请求进行鉴权等处理，我们可以在封装 request 方法时添加拦截器中间件。

const Promise = require('../lib/bluebird.min.js')
const { isEmpty } = require('../lib/lodash.min.js')

/**
 * 发送http请求
 * @param {Object} options 微信请求的配置项
 * @return {Promise} Promise对象
 */

 // 定义请求拦截器，其中 interceptors 定义为一个数组
const interceptors = []

const request = (options) => {
  // 设置默认配置项
  const defaultOptions = {
    method: 'GET',
    header: {
      'Content-Type': 'application/json' // 默认值
    }
  }

  // 合并配置项
  const requestOptions = Object.assign(defaultOptions, options)

  // 将请求拦截器拼接到配置项中
  requestOptions.interceptors = interceptors

  return new Promise((resolve, reject) => {
    wx.request({
      ...requestOptions,
      success: ({ statusCode, data }) => {
        // 自定义业务状态码
        if (statusCode >= 200 && statusCode < 300) {
          resolve(data)
        } else {
          reject(data)
        }
      },
      fail: reject
    })
  })
}

/**
 * 添加请求拦截器
 * @param {Function} fn 拦截器函数
 */
request.addInterceptor = (fn) => {
  interceptors.push(fn)
}

module.exports = {
  request
}

在上述代码中，我们定义了 interceptors 数组用于保存拦截器函数，并将它拼接到请求配置项中。

我们同时为 request 方法添加了一个静态方法 addInterceptor，用于添加拦截器。

步骤四：编写 token 鉴权拦截器

在实际业务中，我们通常需要对每个请求都进行 token 鉴权，以保证接口的安全性。因此，下面我们将编写一个 token 鉴权的拦截器。

const wxApi = require('../utils/wxApi')
const { tokenKey, apiPrefix } = require('../config')

/**
 * token 鉴权拦截器
 * @param {Object} options 请求配置项 
 * @return {Object} 请求配置项
 */
const tokenInterceptor = async (options) => {
  if (!options.noAuth) { // noAuth参数用于指定某个请求不需要鉴权
    const token = wx.getStorageSync(tokenKey)
    if (!token) {
      try {
        const loginResult = await wxApi.login()
        const response = await wxApi.request({
          url: `${apiPrefix}/token`,
          data: {
            code: loginResult.code
          }
        })
        wx.setStorageSync(tokenKey, response.token)
      } catch (e) {
        console.error(e)
        wx.redirectTo({
          url: '/pages/login/login'
        })
        return
      }
    }
    options.header.Authorization = `Bearer ${wx.getStorageSync(tokenKey)}`
  }

  return options
}

module.exports = tokenInterceptor

在上述的代码中，我们首先导入了一些常量和工具，然后定义了一个 tokenInterceptor 函数，该函数被设计成中间件形式，主要用于实现对 token 进行鉴权等操作。

在 tokenInterceptor 函数中，我们首先判断了是否存在 noAuth 属性，以完美支持某些请求不需要鉴权的需求。然后，我们通过 wxApi.login() 获取用户的 code，并将其发送给后端进行验证。如果鉴权成功，后端将会返回一个包含 token 的响应。我们将 token 存储到 StorageSync 中，以便于在后续的请求中使用。同时，我们在请求的 header 中添加了 Authorization，该头部用于携带鉴权信息。

步骤五：添加拦截器

为了让编写的拦截器生效，我们需要在调用 request 方法之前添加该拦截器。下面是一个示例：

const { request } = require('./request')
const tokenInterceptor = require('./tokenInterceptor')

// 添加拦截器，拦截器会依次在请求发出前按照添加的顺序被调用
request.addInterceptor(tokenInterceptor)

// 发送 HTTP 请求
request({
  url: 'http://www.baidu.com'
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.error(err)
})

在上述的示例代码中，我们首先导入了 request 和 tokenInterceptor 模块，然后使用 request.addInterceptor() 方法添加了拦截器。最后，我们调用 request 方法发送了 HTTP 请求。

步骤六：完善拦截器

对于 HTTP 请求，我们可以添加各种各样的拦截器实现不同的处理。例如，我们可以添加错误处理拦截器、日志输出拦截器、请求计时拦截器等。对于这些拦截器，我们可以依次添加到 request 中，实现功能的扩展。

每个拦截器一般都需要实现一个中间件，以便于在每个请求发出前、返回前或者错误发生时进行处理。在实现每个中间件时，我们都可以依据实际业务需求进行适当的修改和扩展。例如，在错误处理的中间件中，我们可以根据错误码进行不同级别的日志输出以及错误提示等功能。

至此，我们已经实现了微信小程序封装网络请求和拦截器的完整攻略。在实际开发中，你可以根据需要进行适当的拓展和优化。