西安网站建设sd2w,杭州哪些做网站公司好,微信小程序的开发环境,做外贸网站基本流程最近在学Uniapp#xff0c;到封装请求的时候本来还想用axios#xff0c;但是看到一些教学视频有更简单的方法#xff0c;
基于uni的拦截器和Promise封装的请求函数 但是他们是用TS写的#xff0c;还没学到TS#xff0c;我就把JS写了#xff0c;最终也是请求成功 // src/…最近在学Uniapp到封装请求的时候本来还想用axios但是看到一些教学视频有更简单的方法
基于uni的拦截器和Promise封装的请求函数 但是他们是用TS写的还没学到TS我就把JS写了最终也是请求成功 // src/utils/http.jsimport { useUserStore } from ../stores/modules/user// 请求基地址
const baseURL https://pcapi-xiaotuxian-front-devtest.itheima.net// 拦截器配置
const httpInterceptor {// 拦截前触发invoke(options) {// 1. 非 http 开头需拼接地址if (!options.url.startsWith(http)) {options.url baseURL options.url}// 2. 请求超时options.timeout 10000// 3. 添加小程序端请求头标识options.header {source-client: miniapp,...options.header,}// 4. 添加 token 请求头标识const userStore useUserStore()const token userStore.getToken() ? userStore.getToken() : if (token) {options.header.Authorization token}},
}// 拦截 request 请求
uni.addInterceptor(request, httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor(uploadFile, httpInterceptor)export const http (options) {return new Promise((resolve, reject) {uni.request({...options,success(res) {if (res.statusCode 200 res.statusCode 300){resolve(res.data)} else if ( res.statusCode 401){const userStore useUserStore()userStore.removeToken()uni.navigateTo({ url: /pages/login/login })reject(res)} else {uni.showToast({icon: none,title: (res.data).msg || 请求错误,})reject(res)}},fail(err) {uni.showToast({icon: none,title: 请求失败,})reject(err)}})})
}
组件引入http方法进行请求 最后附上TS的写法感觉其实差不多只是用TS语法进行了一下泛型的判断
// src/utils/http.ts// 请求基地址
const baseURL https://pcapi-xiaotuxian-front-devtest.itheima.net// 拦截器配置
const httpInterceptor {// 拦截前触发invoke(options: UniApp.RequestOptions) {// 1. 非 http 开头需拼接地址if (!options.url.startsWith(http)) {options.url baseURL options.url}// 2. 请求超时options.timeout 10000// 3. 添加小程序端请求头标识options.header {source-client: miniapp,...options.header,}// 4. 添加 token 请求头标识const memberStore useMemberStore()const token memberStore.profile?.tokenif (token) {options.header.Authorization token}},
}// 拦截 request 请求
uni.addInterceptor(request, httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor(uploadFile, httpInterceptor)type DataT {code: stringmsg: stringresult: T
}
// 2.2 添加类型支持泛型
export const http 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 memberStore useMemberStore()memberStore.clearProfile()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)},})})
}
