外贸网站,商城网站建设哪家便宜,太平洋手机网,知乎建站平台文章目录 前言一、我们为什么要去封装#xff1f;二、具体实现1.创建一个请求封装文件#xff1a;2.封装 uni.request#xff1a;3.如何去使用#xff1f; 总结 前言
在uniapp中如何去更简洁高效的发送我们的请求#xff0c;下面就介绍了uni.request()二次封装。 一、我们… 文章目录 前言一、我们为什么要去封装二、具体实现1.创建一个请求封装文件2.封装 uni.request3.如何去使用 总结 前言
在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 DataT {code: stringmsg: stringresult: T
}// 2.2 添加类型支持泛型
export const request T(options:UniApp.RequestOptions) {// 1. 返回 Promise 对象return new PromiseDataT((resolve, reject) {uni.request({...options,// 响应成功success(res) {// 状态码 2xx axios 就是这样设计的if (res.statusCode 200 res.statusCode 300) {// 2.1 提取核心数据 res.dataresolve(res.data as DataT)} 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 DataT).msg || 请求错误,})reject(res)}},// 响应失败fail(err) {uni.showToast({icon: none,title: 网络错误换个网络试试,})reject(err)},})})
} 3.如何去使用
在需要请求的地方进行进入操作
总结
以上就是今天要讲的内容本文仅仅简单介绍了uniapp中uni.request()的二次封装uniapp官方文档还有很多介绍以上就是个人的学习分享仅供参考。
