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

2024/10/26 5:31:12 来源：https://blog.csdn.net/qq_48076747/article/details/142657509 浏览: 次关键词：uniapp中uni.request的统一封装 (ts版)

文章目录

前言
一、我们为什么要去封装？
二、具体实现
- 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. 请求超时, 默认 60soptions.timeout = 10000// 3. 添加小程序端请求头标识options.header = {...options.header,'source-client': 'miniapp',}// 4. 添加 token 请求头标识// pina仓库里面存的token信息const userStore= useUserStore()const token = userStore.userInfo?.token// 统一携带tokenif (token) {options.header.Authorization = token}},
}
// 最后添加到uniapp的拦截器上
uni.addInterceptor('request', httpInterceptor)
type Data<T> = {code: stringmsg: stringresult: 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.dataresolve(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)},})})
}