uniapp中uni.request请求二次封装

        话不多说，先上环境，本文章环境为 Uniapp - Vue3 - Typescript；

       *前言

        作为前端开发人员，相信大家对请求二次封装已经不陌生了，在我们项目中，前端和后端的交互就是通过ajax请求来完成的，通常我们会使用优秀的第三方库axios来完成工作，对于axios大家都知道它提供了请求、响应拦截器，我们通过二次封装可以大大节省我们的请求编码，那么在uniapp开发中，我们除了使用axios还可以使用一下uniapp官方提供的uni.request请求，今天就来写一下uni.request该如何进行二次封装。

        一、请求拦截器

        请求拦截器通常做的事情就是配置公共请求的响应头、请求默认地址、超时时间等信息，在uniapp官方给我们提供了一个请求的拦截方法：uni.addInterceptor(请求名称，配置对象)

const baseURL = 'https://123.456.4515'

// 添加拦截器
const httpInterceptor = {
  // 拦截前触发
  invoke(options: UniApp.RequestOptions) {
    // 1. 非 http 开头需拼接地址
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2. 请求超时, 默认 60s
    options.timeout = 10000
    // 3. 添加一些项目特有请求头标识
    options.header = {
      ...options.header,
    }
    // 4. 添加 token 请求头标识
    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (token) {
      options.header.Authorization = token
    }
  },
}

uni.addInterceptor('request', httpInterceptor)

        在上述代码中，uni.addInterceptor第一个参数为我们要拦截的请求，我们是request，第二个为定义的配置对象，对象中的inovke为请求前触发的函数，接收一个请求对象信息，

        第一步，拼接公共地址baseURL,在axios中会自动拼接，但是uni.request需要自己手动完成，在此要判断是否为http开头，因为项目中可能会用到远程请求，会有完成的地址出现，所以要区分一下；

        第二步，配置一个请求超时时间，对于超过时间的请求进行中断，通常是服务器异常或者网络问题导致，请求不到就不要一直发送占用内存。

        第三步，就是添加请求头信息了，在此我们可以添加token，或者一些密钥等信息

完成上诉，前置请求就基本完成了，具体可查阅官网地址进行扩展，地址在下面：

uni.addInterceptor(STRING, OBJECT) | uni-app官网

 二、请求/响应

        接下来配置我们的请求函数以及响应处理；

type Data<T> = { 
  code: string
  msg: string
  result: T
}
// 2.2 添加类型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {
  // 1. 返回 Promise 对象
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      // 响应成功
      success(res) {
        // 状态码 2xx， 
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 提取核心数据 res.data
          resolve(res.data as Data<T>)
        } else if (res.statusCode === 401) {
          // 401错误  -> 清理用户信息，跳转到登录页
          const memberStore = useMemberStore()
          memberStore.clearProfile()
          uni.navigateTo({ url: '/pages/login/login' })
          reject(res)
        } else {
          // 其他错误 -> 根据后端错误信息轻提示
          uni.showToast({
            icon: 'none',
            title: (res.data as Data<T>).msg || '请求错误',
          })
          reject(res)
        }
      },
      // 响应失败
      fail(err) {
        uni.showToast({
          icon: 'none',
          title: '网络错误，换个网络试试',
        })
        reject(err)
      },
    })
  })
}

上面代码的主要共工作，配置基础请求信息，添加ts类型配置，处理响应结果

        我们仿造axios的工作流程，返回一个promise对象，便于我们在项目中使用async/await等异步语法。

        第一步，函数的ts类型配置，一般同一个后端给出的接口响应结构都差不多，只有data层面的变化，我们可以定义好公共的响应类型，将data层面定义为泛型

        第二步，调用uni.request函数，展开运算符和并请求体内容

        第三步，succes和fail方法的配置，这两个方法为官方提供的响应成功和失败的钩子，在成功success函数中我们拿到请求返回的精简数据，判断请求状态为成功后resolve(res.data)发出响应最终数据，如果是失败等信息，根据自己后端的定义完成错误提示，并且通过reject返回错误信息，通常401为身份失效；接下来就是响应失败，该函数执行意味着请求都未成功，大部分原因就是网络造成的，做一些轻提示即可，最终也reject(error)返回错误信息；

-------------------------------------------------------------------------------------------------------------------------

        完成上述配置导出http请求函数就可以在组件中进行使用了，包括api的封装和平时都一样了，使用reques可以减少axios模块的安装，也能实现相应功能，快来试试吧~