微信小程序wx.request拦截器使用详解

前言

在微信小程序中，我们有时需要对所有的 HTTP 请求进行统一的拦截或者处理，此时就需要使用到 wx.request 拦截器。在本文中，我们将详细介绍如何使用拦截器来实现统一的请求处理需求。

wx.request 拦截器介绍

wx.request 拦截器是在 2.10.0 版本中新增的功能，通过使用该功能，我们可以在微信小程序所有网络请求之前进行一些统一处理，比如添加请求头、添加参数等。

在 wx.request 中，拦截器参数为 interceptors，其为一个数组类型，我们可以通过定义它的属性来实现拦截器的功能。

interceptors 属性包含了一个 request 和一个 response 元素，这两个元素分别代表请求前和请求后的拦截处理。

代码示例：

wx.request.interceptors.request.use(function(config){
  // Do something before request is sent
  // 返回请求头，参数等
  return config;
}, function(error){
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
wx.request.interceptors.response.use(function(response){
  // Do something with response data
  // 返回正确数据
  return response;
}, function(error){
  // Do something with response error
  return Promise.reject(error);
});

实现拦截器功能的方法

在常用的处理方法中，我们可以定义一个 interceptors 对象，通过重写 request 和 response 属性的 use 方法，实现拦截器功能。

代码示例：

const interceptors = {};
interceptors.request = function (config) {
  // 添加请求头、参数等操作
  config.headers = {
    'content-type': 'application/json',
  };
  return config;
};
interceptors.response = function (response) {
  // 对结果集的处理
  if (response.statusCode !== 200) {
    // 做一些错误处理
    console.log('HTTP Error', response.statusCode);
  }
  return response;
};

// 拦截器配置
wx.request.interceptors.request.use(interceptors.request);
wx.request.interceptors.response.use(interceptors.response);

示例1：请求添加 token

有时我们在请求 API 时，需要添加一些认证信息，如 token，可以使用拦截器实现请求添加 token 的操作。

代码示例：

const token = 'your_token_string';
wx.request.interceptors.request.use(function(config){
  // 设置 token
  config.header.Authorization = 'Bearer ' + token;
  return config;
});

示例2：请求失败自动重试

有时候由于网络原因等一些异常情况，发送的请求会返回错误，此时就需要进行重试操作，可以使用拦截器实现请求失败自动重试的操作。

代码示例：

let retryCount = 0; // 重试次数
wx.request.interceptors.response.use(function(response){
  if (response.statusCode != 200 &&  retryCount < 3) { // 请求异常且重试次数小于3次时执行重试
    retryCount++;
    console.log('重试第' + retryCount + '次', response);
    // 发起一次重试
    return wx.request(response.config);
  } else { // 请求正常或者重试次数已达到3次，则返回结果
    retryCount = 0; // 重试次数清0
    return response;
  }
}, function(error){
  return Promise.reject(error);
});

总结

拦截器是一个可以被重复使用的代码片段，通过它，我们可以对特定的功能进行统一处理，而不必在每一个请求中写上重复的代码。

在进行拦截器开发时，我们需要清楚拦截器的功能和应用场景，增强拦截器的可扩展性和灵活性，实现更好的代码复用与维护。

通过本文的讲解，您已经了解了拦截器的使用方法和示例。在实际开发中，可以按照自己的需求进行拦截器的开发和使用。