【uniapp】request请求函数封装,token、成功、失败等

news/2024/5/28 2:39:13/ 标签: uni-app

1、封装http.ts


//utils--->http.ts/*** 添加拦截器*  拦截request请求*  拦截uploadFile文件上传** TODO*  1、非http开头需要拼接地址*  2、请求超时*  3、添加小程序端请求头标识*  4、添加token请求头标识*/
import { useMemberStore } from '@/stores/index'
const memberStore = useMemberStore()//实际项目种的baseUrl是根据环境变量来获取的
const baseUrl = 'https://xx/xx/xx'const httpInterceptor = {invoke(args: UniApp.RequestOptions) {// 拦截前触发,拼接urlif (!args.url.startsWith('http')) {args.url = baseUrl + args.url}//请求超时时间,默认60sargs.timeout = 10000//添加小程序请求头标志args.header = {...args.header,'source-client': 'miniapp',}//添加tokenconst token = memberStore.profile?.tokenif (token) {args.header.Authorization = token}},
}
// 添加拦截器
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)//定义泛型,接口返回的数据结构
interface Data<T> {code: stringmsg: stringresult: T
}
export const http = <T>(options: UniApp.RequestOptions) => {return new Promise<Data<T>>((resolve, reject) => {uni.request({...options,// 响应成功success(res) {if (res.statusCode >= 200 && res.statusCode < 300) {resolve(res.data as Data<T>)} else if (res.statusCode === 401) {//401错误,清理用户信息,跳转登录页,调用rejectmemberStore.clearProfile()uni.navigateTo({ url: '/pages/login/login' })reject(res)} else {//通用错误,调用rejectuni.showToast({title: (res.data as Data<T>).msg || '请求错误',icon: 'none',})reject(res)}},fail(err) {//响应失败,网络错误,调用rejectuni.showToast({title: '网络错误,换个网络试试',icon: 'none',})reject(err)},})})
}

2、封装api


//api--->my.ts
import { http } from '@/utils/http'export const getBanner = (data: any) => {return http<string[]>({url: '/xx/xx',method: 'GET',data: data,})
}

3、使用封装好的api


<script setup lang="ts">
import { getBanner } from '@/api/my'const getData = async () => {const res = await getBanner({})console.log(1111, res)
}
</script>

http://www.ppmy.cn/news/1424618.html

相关文章

yolov8目标检测 部署瑞芯微rk3588记录

1. 前置条件 本地电脑系统&#xff0c;ubuntu20.04 训练代码&#xff1a; 训练代码下载的ultralytics官方代码 SHA&#xff1a;6a2fddfb46aea45dd26cb060157d22cf14cd8c64 训练代码仅做数据修改&#xff0c;类别修改&#xff0c;代码结构未做任何修改 需要准备的代码&#…

【网站项目】驾校报名小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

华为校园公开课走入上海交大,鸿蒙成为专业核心课程

4月12日&#xff0c;华为校园公开课在中国上海交通大学成功举办&#xff0c;吸引了来自计算机等相关专业的150余名学生参加。据了解&#xff0c;由吴帆、陈贵海、过敏意、吴晨涛、刘生钟等教授在中国上海交通大学面向计算机系本科生开设的《操作系统》课程&#xff0c;是该系学…

Day04 - React 第四天

学习react的第四天&#xff0c;持续更新中 关注不迷路&#xff01;&#xff01;&#xff01; 组件三大核心之——Ref ref多种形式 字符串形式 回调形式 createRef 字符串形式 class Perosn extends React.Component {render() {return (<div><input ref"ipnp…

R语言影像批量镶嵌与裁剪——mosaic

你有中国不同省份的影像&#xff0c;想要拼接镶嵌成完整的中国影像 镶嵌一 library("raster") library("sp") library("rgdal") library("rgeos") library("…

Django中间件路由映射自动加/斜杠问题原因及分析

输入 http://127.0.0.1:8000/main/index/ 输入 http://127.0.0.1:8000/main/index 路由定义情况 urlpatterns [path("index/", views.index) ]可以发现我在输入URL的index路由时&#xff0c;如果没有和Django定义的路由匹配规则一样的话&#xff0c;浏览器自…

【机器学习】数据变换---小波变换特征提取及应用案列介绍

引言 在机器学习领域&#xff0c;数据变换是一种常见且重要的预处理步骤。通过对原始数据进行变换&#xff0c;我们可以提取出更有意义的特征&#xff0c;提高模型的性能。在众多数据变换方法中&#xff0c;小波变换是一种非常有效的方法&#xff0c;尤其适用于处理非平稳信号和…

(十六)call、apply、bind介绍、区别和实现

函数中的this指向&#xff1a; 函数中的this指向是在函数被调用的时候确定的&#xff0c;也就是执行上下文被创建时确定的。在一个执行上下文中&#xff0c;this由调用者提供&#xff0c;由调用函数的方式来决定。 类数组对象arguments&#xff1a; arguments只在函数&#…

Adobe Premiere Pro将加入AI生成式功能,以提高视频编辑的效率;OpenAI宣布在东京设立亚洲首个办事处

&#x1f989; AI新闻 &#x1f680; Adobe Premiere Pro将加入AI生成式功能&#xff0c;以提高视频编辑的效率 摘要&#xff1a;Adobe宣布&#xff0c;将为Premiere Pro引入由生成式AI驱动的新功能&#xff0c;以提高视频编辑的效率。这些功能包括“生成扩展”&#xff0c;能…

ArrayList,Vector,LinkedList内存解析

1.ArrayList (1). 特点 : 实现了List接口&#xff0c;存储有序的&#xff0c;可重复的数据.底层使用Object[]数组存储.线程不安全.(底层方法未用synchronized修饰.) (2). 版本解析 : <i> : JDK7版本 ArrayList<String> list &#xff1d;new ArrayList<&…

OV通配符证书:安全、便捷的网络认证新选择

OV通配符证书&#xff0c;即组织验证型通配符证书&#xff0c;其最大特点在于其通配符功能。这意味着&#xff0c;一个OV通配符证书可以覆盖同一主域名下的多个子域名&#xff0c;大大简化了证书管理和维护的复杂性。无论是大型企业还是个人网站&#xff0c;都可以通过OV通配符…

服务器上部署GPU版的milvus向量数据库

1、安装docker compose 我们可以从 Github 上下载它的二进制包来使用&#xff0c;最新发行的版本地址&#xff1a; https://github.com/docker/compose/releases sudo curl -L "https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-$(uname -s)…

「GO基础」在Windows上安装Go编译器并配置Golang开发环境

文章目录 1、安装Go语言编译程序1.1、下载GoLang编译器1.2、安装GoLang编译器 2、配置Golang IDE运行环境2.1、配置GO编译器2.1.1、GOROOT 概述2.1.2、GOROOT 作用2.1.2、配置 GOROOT 2.2、配置GO依赖管理2.2.1、Module管理依赖2.2.2、GOPATH 管理依赖 2.3、运行GO程序2.3.1、创…

什么是PE 格式

2024年4月19日&#xff0c;周五下午 PE&#xff08;Portable Executable&#xff09;格式是一种 Windows 操作系统中常见的可执行文件和对象文件格式。它是微软公司为 Windows NT 操作系统引入的一种文件格式&#xff0c;用于存储可执行程序、动态链接库&#xff08;DLL&#x…

全栈外包接单/远程工作(TS, React, Vue, Java, 移动端)

个人介绍 我毕业于中国某一本院校计算机专业&#xff0c;曾在北京大型软件公司从事Java开发多年&#xff0c;主要服务于全国各大头部985/211院校。后来为扩宽职业路径&#xff0c;转向了Ts全栈&#xff0c;现专注于远程外包接单工作&#xff0c;致力于打造一个能为客户带来优质…

binary tree Leetcode 二叉树算法题

144.二叉树的前序遍历 前序遍历是&#xff1a;根-左-右 所以记录序列的的时候放在最前面 递归 class Solution {List<Integer> ans new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {if(root null) return ans;ans.add(root…

CSS实现弹性盒子保持水平和垂直居中

弹性盒子 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> &…

C语言 | Leetcode C语言题解之第32题最长有效括号

题目&#xff1a; 题解&#xff1a; int longestValidParentheses(char* s) {int n strlen(s);int left 0, right 0, maxlength 0;for (int i 0; i < n; i) {if (s[i] () {left;} else {right;}if (left right) {maxlength fmax(maxlength, 2 * right);} else if (…

MySQL慢SQL优化方案汇总

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《mysql经验总结》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途 目录 写在前面 优化思路 避免查询不必要的列 分页优化 索引优化 JOIN优化 排序优化 UNION 优化 写在最后 写在前面 本…

【LeetCode热题100】【贪心算法】跳跃游戏

题目链接&#xff1a;55. 跳跃游戏 - 力扣&#xff08;LeetCode&#xff09; 数组的元素表示可以跳的最大长度&#xff0c;要判断能不能跳到最后 不断更新可以跳到的最远距离&#xff0c;如果当前的位置大于可跳最远距离&#xff0c;说明不行 class Solution { public:bool …