UniApp搭建项目模板（二）—— 无感刷新 token 封装

简介

基于 UView 内置的请求框架luch-request (opens new window)做二次封装

功能

1. 基础请求类型封装: get、post、put、delete [✅]
2. 集成请求代理功能 [✅]
3. 无感刷新 token 封装 [✅]
4. 自定义后端请求 code 报错信息 [x]

回顾

在上一篇中，我们实现了小程序、App 平台上的请求代理功能，我们站在用户的角度想一下，后端接口有鉴权，但是鉴权时效过了,就会提示用户登录，用户体感就很不好，所以我们需要实现客户无感知的刷新 token 操作，让客户 token 续期。

预定义部分参数

// 刷新token相关变量
let isRefreshing = false
let cacheQueue = []

响应拦截器中 实现 token 刷新

// 响应拦截
http.interceptors.response.use(
  response => {
    return response
  },
  async response => {
    if (response.statusCode === 401) {
      const config = response.config
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken().then(res => {
          const { token } = res.data
          uni.setStorageSync('token', token)
          cacheQueue.map(cb => cb(token))
          cacheQueue = []
          return service({
            ...config,
            url: config.custom.url
          })
            .catch(e => {
              console.error('refreshToken Error: ==>', e)
            })
            .finally(() => {
              isRefreshing = false
            })
        })
      } else {
        return new Promise(resolve => {
          cacheQueue.push(token => {
            resolve(
              service({
                ...config,
                url: config.custom.url
              })
            )
          })
        })
      }
    }
    return Promise.reject(response)
  }
)