2024年最新小程序封装网络请求和拦截器_小程序请求拦截器(3)，2024年最新头条测试开发面经

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

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',


![img](https://img-blog.csdnimg.cn/img_convert/804eab683fae9b5b72b5e2ebe03a5d0c.png)
![img](https://img-blog.csdnimg.cn/img_convert/39032c5172c07cf41d9ecba5f79704f6.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**