uniapp中uni.request的统一封装 (ts版)

news2024/10/1 13:53:20

文章目录

前言
一、我们为什么要去封装？
二、具体实现
- 1.创建一个请求封装文件：
- 2.封装 uni.request：
- 3.如何去使用？
总结

前言

在uniapp中如何去更简洁高效的发送我们的请求，下面就介绍了uni.request()二次封装。

一、我们为什么要去封装？

在 UniApp 中，uni.request 是用于发起网络请求的方法。为了简化代码、提高可维护性和统一管理请求逻辑，通常会对 uni.request 进行统一封装。以下是一个简单的封装示例：

二、具体实现

1.创建一个请求封装文件：

在src目录下新建一个文件，比如 request.js，用于存放封装后的请求方法。
在这里插入图片描述

2.封装 uni.request：

代码如下（示例）：

/**
 * 添加拦截器:
 *   拦截 request 请求
 *
 * TODO:
 *   1. 非 http 开头需拼接地址
 *   2. 请求超时
 *   3. 添加小程序端请求头标识
 *   4. 添加 token 请求头标识
 */

import { useUserStore} from '@/stores'

// '填写你的网络请求基地址' 以下是我自己开发的服务器接口，你们换成你们自己的服务器地址
const baseURL = 'http://localhost:3000/api'

// 添加拦截器
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,
      'source-client': 'miniapp',
    }
    // 4. 添加 token 请求头标识
    // pina仓库里面存的token信息
    const userStore= useUserStore()
    const token = userStore.userInfo?.token
  	// 统一携带token
    if (token) {
      options.header.Authorization = token
    }
  },
}
// 最后添加到uniapp的拦截器上
uni.addInterceptor('request', httpInterceptor)
type Data<T> = {
  code: string
  msg: string
  result: T
}

// 2.2 添加类型，支持泛型
export const request= <T>(options:UniApp.RequestOptions) => {
  // 1. 返回 Promise 对象
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      // 响应成功
      success(res) {
        // 状态码 2xx， axios 就是这样设计的
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 提取核心数据 res.data
          resolve(res.data as Data<T>)
        } else if (res.statusCode === 401) {
          // 401错误  -> 清理用户信息，跳转到登录页
          const userStore = useUserStore()
          userStore .clearUserInfo()
          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)
      },
    })
  })
}