1. 前言

    今天和合作伙伴对接代码的时候 
  
  
  
  
 ，打开压缩包 
  
  
  
  
  ，发现项目有很大的问题

 


 


 


 


 

，项目里根本没有登录验证请求封装拦截器这些东西 
 
 
 
 
，在开发小程序时 
   
   
   
   
   ，无疑想要维护还是比较麻烦的
 

 

 

 

 
，实际上我们通常需要封装网络请求和拦截器
 

 

 

 

 

，以实现统一处理状态码和存储用户登录信息等功能           。这样可以提高开发效率          ，减少代码重复 

 
 

 
 

 
 

 
 

 
 ，同时也可以提高代码的可维护性和可读性
 
  
 
  
 
  
 
  
 
  
。

2. 思路

封装网络请求

首先










，需要封装网络请求               ，负责发送请求和处理响应









。该类应该包含以下方法：

·request(url, method, data, header)：发送网络请求 
 
 
 
 
 
 
 
 
 
 ，并返回响应结果  
  
  
  
  
 。

·get(url, data, header)：发送 GET 请求 
  
  
  
  
 。

·post(url, data, header)：发送 POST 请求


 


 


 


 


 
。

等不同请求方式

可以使用小程序提供的 wx.request 方法来实现网络请求















，该方法的参数与上述方法的参数一一对应 
 
 
 
 
。在处理响应时          ，可以使用Promise对象来处理异步操作  
   
   
   
   
  。 统一处理状态码

可以创建一个checkStatus函数 
  
 
  
 
  
 
  
 
  
 ，用于统一处理状态码

 

 

 

 

 
。该函数接受一个response参数










，用于判断请求是否成功
 

 

 

 

 
。如果请求成功 
  
  
  
  
 ，则返回一个Promise对象 
  
  
  
  
  ，以便于我们进行后续的操作           。如果请求失败

 


 


 


 


 

，则抛出一个错误
 

 
 

 
 

 
 

 
 

 
。

创建 拦截器类

具体处理逻辑见下文









。

2.1 封装网络请求

    封装一个request函数 
 
 
 
 
，用于发送请求                。该函数接受一个参数options 
   
   
   
   
   ，用于配置请求
 
 
 
 
 
 
 
 
 
 
。我们可以在该函数中使用小程序提供的wx.request接口发送请求
 

 

 

 

 
，并在请求完成后返回一个Promise对象
 

 

 

 

 

，以便于我们进行后续的操作














。

function request(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: options.method || GET, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) }

2.2 统一处理状态码

    我们可以封装一个checkStatus函数          ，用于统一处理状态码           。该函数接受一个response参数 

 
 

 
 

 
 

 
 

 
 ，用于判断请求是否成功
 
  
 
  
 
  
 
  
 
  
。如果请求成功










，则返回一个Promise对象               ，以便于我们进行后续的操作









。如果请求失败 
 
 
 
 
 
 
 
 
 
 ，则抛出一个错误  
  
  
  
  
 。

function checkStatus(response) { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { return Promise.resolve(data) } else { const error = new Error(`请求失败















，状态码：${statusCode}`) error.response = response throw error } }

2.3 封装拦截器

    我们可以封装一个interceptor函数          ，用于封装拦截器 
  
  
  
  
 。该函数接受一个chain参数 
  
 
  
 
  
 
  
 
  
 ，用于执行拦截器链


 


 


 


 


 
。我们可以在该函数中定义一个requestInterceptor和一个responseInterceptor










，用于分别处理请求和响应的拦截器 
 
 
 
 
。我们可以在requestInterceptor中设置请求头 
  
  
  
  
 ，以便于在后续的请求中进行身份验证  
   
   
   
   
  。我们可以在responseInterceptor中统一处理状态码 
  
  
  
  
  ，并在请求成功时更新用户登录信息

 

 

 

 

 
。

function interceptor(chain) { const requestInterceptor = (options) => { // 设置请求头 options.header.Authorization = Bearer + getApp().globalData.token return chain.request(options) } const responseInterceptor = (response) => { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { // 更新用户登录信息 getApp().globalData.userInfo = data.userInfo } else { const error = new Error(`请求失败

 


 


 


 


 

，状态码：${statusCode}`) error.response = response throw error } return response } return { request: requestInterceptor, response: responseInterceptor } }

2.4不同请求方式兼容

//封装put请求方式的代码如下： function put(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: PUT, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } //封装delete请求方式的代码如下： function del(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: DELETE, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } //封装post请求方式的代码如下： function post(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: POST, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) }

2.5 全局存储用户登录信息

我们可以在小程序的app.js中定义一个全局变量globalData 
 
 
 
 
，用于存储用户登录信息
 

 

 

 

 
。我们可以在登录成功后将用户信息保存到该变量中 
   
   
   
   
   ，并在后续的请求中使用该变量进行身份验证           。

App({ globalData: { userInfo: null, token: null } })

2.6 完整代码

// request.js function request(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: options.method || GET, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function put(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: PUT, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function del(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: DELETE, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function post(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: POST, data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function checkStatus(response) { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { return Promise.resolve(data) } else { const error = new Error(`请求失败
 

 

 

 

 
，状态码：${statusCode}`) error.response = response throw error } } function interceptor(chain) { const requestInterceptor = (options) => { options.header.Authorization = Bearer + getApp().globalData.token return chain.request(options) } const responseInterceptor = (response) => { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { getApp().globalData.userInfo = data.userInfo } else { const error = new Error(`请求失败
 

 

 

 

 

，状态码：${statusCode}`) error.response = response throw error } return response } return { request: requestInterceptor, response: responseInterceptor } } export { request, put, del, post, checkStatus, interceptor }

3. 使用示例

import { request, interceptor, checkStatus } from ./request const chain = interceptor({ request: (options) => { console.log(请求拦截器) return options }, response: (response) => { console.log(响应拦截器) return response } }) request({ url: https://xxx.com/api/users, method: GET }) .then(checkStatus) .then(data => { console.log(data) }) .catch(error => { console.log(error) })

4. 注意事项

① 在使用拦截器时          ，需要注意拦截器的执行顺序
 

 
 

 
 

 
 

 
 

 
。在上述示例中 

 
 

 
 

 
 

 
 

 
 ，拦截器的执行顺序是先执行请求拦截器










，再执行响应拦截器









。

② 在小程序中               ，我们可以使用getApp()函数来获取小程序实例 
 
 
 
 
 
 
 
 
 
 ，从而访问全局变量                。

③ 在发送请求时















，需要注意请求的参数配置
 
 
 
 
 
 
 
 
 
 
。在上述示例中          ，默认使用的是GET请求方法和空对象作为请求参数 
  
 
  
 
  
 
  
 
  
 ，并且配置了常用请求方式










，如果需要使用其他请求方法或者自定义请求参数 
  
  
  
  
 ，请在调用request函数时进行相应的配置














。

5. 结语

实际上请求的url地址也可以单独封装的 
  
  
  
  
  ，需要单独新建一个js文件里面导出域名或者url地址

 


 


 


 


 

，再调用request封装的地方 
 
 
 
 
，import引入一下就可以了 
   
   
   
   
   ，以上便是关于小程序封装网络请求和拦截器的全部内容
 

 

 

 

 
，希望可以帮到有需要的小伙伴           。欢迎大家多多交流
 

 

 

 

 

，共同进步~