0


小程序封装网络请求和拦截器

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对象,以便于我们进行后续的操作。

functionrequest(options){returnnewPromise((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

对象,以便于我们进行后续的操作。如果请求失败,则抛出一个错误。

functioncheckStatus(response){const{ statusCode, data }= response
  if(statusCode >=200&& statusCode <300){return Promise.resolve(data)}else{const error =newError(`请求失败,状态码:${statusCode}`)
    error.response = response
    throw error
  }}

2.3 封装拦截器

我们可以封装一个
interceptor

函数,用于封装拦截器。该函数接受一个chain参数,用于执行拦截器链。我们可以在该函数中定义一个

requestInterceptor

和一个

responseInterceptor

,用于分别处理请求和响应的拦截器。我们可以在

requestInterceptor

中设置请求头,以便于在后续的请求中进行身份验证。我们可以在

responseInterceptor

中统一处理状态码,并在请求成功时更新用户登录信息。

functioninterceptor(chain){constrequestInterceptor=(options)=>{// 设置请求头
    options.header.Authorization ='Bearer '+getApp().globalData.token
    return chain.request(options)}constresponseInterceptor=(response)=>{const{ statusCode, data }= response
    if(statusCode >=200&& statusCode <300){// 更新用户登录信息getApp().globalData.userInfo = data.userInfo
    }else{const error =newError(`请求失败,状态码:${statusCode}`)
      error.response = response
      throw error
    }return response
  }return{request: requestInterceptor,response: responseInterceptor
  }}

2.4不同请求方式兼容

//封装put请求方式的代码如下:functionput(options){returnnewPromise((resolve, reject)=>{
    wx.request({url: options.url,method:'PUT',data: options.data ||{},header: options.header ||{},success: resolve,fail: reject
    })})}//封装delete请求方式的代码如下:functiondel(options){returnnewPromise((resolve, reject)=>{
    wx.request({url: options.url,method:'DELETE',data: options.data ||{},header: options.header ||{},success: resolve,fail: reject
    })})}//封装post请求方式的代码如下:functionpost(options){returnnewPromise((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.jsfunctionrequest(options){returnnewPromise((resolve, reject)=>{
    wx.request({url: options.url,method: options.method ||'GET',data: options.data ||{},header: options.header ||{},success: resolve,fail: reject
    })})}functionput(options){returnnewPromise((resolve, reject)=>{
    wx.request({url: options.url,method:'PUT',data: options.data ||{},header: options.header ||{},success: resolve,fail: reject
    })})}functiondel(options){returnnewPromise((resolve, reject)=>{
    wx.request({url: options.url,method:'DELETE',data: options.data ||{},header: options.header ||{},success: resolve,fail: reject
    })})}functionpost(options){returnnewPromise((resolve, reject)=>{
    wx.request({url: options.url,method:'POST',data: options.data ||{},header: options.header ||{},success: resolve,fail: reject
    })})}functioncheckStatus(response){const{ statusCode, data }= response
  if(statusCode >=200&& statusCode <300){return Promise.resolve(data)}else{const error =newError(`请求失败,状态码:${statusCode}`)
    error.response = response
    throw error
  }}functioninterceptor(chain){constrequestInterceptor=(options)=>{
    options.header.Authorization ='Bearer '+getApp().globalData.token
    return chain.request(options)}constresponseInterceptor=(response)=>{const{ statusCode, data }= response
    if(statusCode >=200&& statusCode <300){getApp().globalData.userInfo = data.userInfo
    }else{const error =newError(`请求失败,状态码:${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引入一下就可以了,以上便是关于小程序封装网络请求和拦截器的全部内容,希望可以帮到有需要的小伙伴。欢迎大家多多交流,共同进步~


本文转载自: https://blog.csdn.net/2303_76218115/article/details/129815502
版权归原作者 迪迦 所有, 如有侵权,请联系我们删除。

“小程序封装网络请求和拦截器”的评论:

还没有评论