微信小程序怎么封装网络请求和拦截器

这篇文章主要介绍“微信小程序怎么封装网络请求和拦截器”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么封装网络请求和拦截器”文章能帮助大家解决问题。

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.jsfunction 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函数时进行相应的配置。

关于“微信小程序怎么封装网络请求和拦截器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。