v3+ts/request封装axios

 1.创建一个新的axios实例

2.请求拦截器,如果有token进行头部携带

3.响应拦截器a.剥离无效数据b.处理token失效

4.导出一个函数,调用当前的axios实例发请求,返回值promise

import axios, { AxiosError, type Method } from 'axios'
import { useUserStore } from '@/stores/user' //pinia存储
import router from '@/router'
import { showToast } from 'vant'
//导出基准地址,原因:其他地方不是通过axios发请求的地方用上基准地址
const baseURL = 'https://consult-api.itheima.net/'
const instance = axios.create({
//axios的一些配置,baseUrl timeout
  baseURL,
  // 基础地址。超时时间
  timeout: 10000
})
// 请求拦截器,携带toekn
instance.interceptors.request.use(
//config是请求配置
  (config) => {
    const store = useUserStore()
    if (store.user?.token && config.headers) {
//请求头设置token
      config.headers['Authorization'] = `Bearer ${store.user?.token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)
// 响应拦截器 ,剥离无效数据,401拦截
instance.interceptors.response.use(
  (res) => {
    // 后台约定,响应成功,但是code不是10000,是业务逻辑失败
    if (res.data?.code !== 10000) {
      showToast(res.data?.message || '业务失败')
      return Promise.reject(res.data)
    }
    // 业务逻辑成功,返回成功数据,作为axios成功的结果
    return res.data
  },
  (err) => {
    if (err.response.status === 401) {
      // 删除用户信息
      const store = useUserStore()
      store.delUser()
      //   跳转登录,带上接口失效所在页面的地址,登录完成后回跳使用
      router.push({
        path: 'login',
        // 将当前页面的完整路径作为值存储在"returnUrl"键下
        query: { returnUrl: router.currentRoute.value.fullPath }
      })
    }
    return Promise.reject(err)
  }
)

type Data<T> = {
  code: number
  message: string
  data: T
}

// 4. 请求工具函数
const request = <T>(
  url: string,
  method: Method = 'get',
  submitData?: object
) => {
  // request<数据类型,数据类型>() 这样才指定了 res.data 的类型
  return instance.request<T, Data<T>>({
    url,
    method,
//1.如果是get请求,需要使用params来传递submitData     ?a=10&c=10
//2.如果不是get请求,需要使用data传递submitData      请求体传参
//[]设置一个动态的key,写js表达式,js表达式的执行结果来当key
//methods参数:get,Get,GET转换成消息再来判断
    [method.toLocaleLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}
export { instance, baseURL, request }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/714689.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

仅凭一图,即刻定位,AI图像定位技术

AI图像定位技术&#xff0c;解锁空间密码&#xff01;仅凭一图&#xff0c;即刻定位&#xff0c;精准至经纬度坐标&#xff0c;让世界无处不晓。 试试看能否猜中这张自拍照的背景所在&#xff1f;可别低估了A的眼力&#xff0c;答案说不定会让你大吃一惊呢。 近期&#xff0c;…

tokenization(二)子词切分方法

文章目录 概述BPE构建词表词元化代码实现 WordPieceUnigram估算概率&#xff08;E&#xff09;删除词元&#xff08;M&#xff09; 参考资料 概述 接上回&#xff0c;子词词元化&#xff08;Subwords tokenization&#xff09;是平衡字符级别和词级别的一种方法&#xff0c;也…

通义千问调用笔记

如何使用通义千问API_模型服务灵积(DashScope)-阿里云帮助中心 package com.ruoyi.webapp.utils;import com.alibaba.dashscope.aigc.generation.Generation; import com.alibaba.dashscope.aigc.generation.GenerationOutput; import com.alibaba.dashscope.aigc.generation.G…

Element-UI - 解决el-table中图片悬浮被遮挡问题

在开发中&#xff0c;发现element-ui在el-table中添加图片悬浮显示时&#xff0c;会被单元格遮挡的问题。通过查询得到的解决办法&#xff0c;大多是修改.el-table类中相关样式属性&#xff0c;但经过验证发现会影响到其他正常功能的使用。对于此问题解决其实也并不难&#xff…

HTTP协议 快速入门

http概述 无状态性&#xff1a;HTTP是一个无状态协议&#xff0c;这意味着服务器不会在请求之间保存任何会话信息。每个请求都是独立的&#xff0c;服务器不会记住之前的请求。 请求-响应模型&#xff1a;HTTP通信是基于客户端发送请求和服务器返回响应的模型。客户端&#xf…

面向对象初级的内存分布图

1.一个对象的内存图 2.二个对象的内存图 3.二个引用指向同一个对象 4.this的内存布局图 创建了一个Student类的对象s1,因为有new,所有在堆区开辟了一些内存空间,比如把这些内存空间的地址值叫001 形参name是竹小玲, 也就是对象s调用method方法的地址值, this表示方法调用者的地…

MicroPython 环境下使用 ESP32 连接百度 AI 大模型

前言 在物联网领域&#xff0c;ESP32 由于其丰富的功能和低功耗性能成为了一种流行的选择。结合 MicroPython&#xff0c;它为开发者提供了一个高效的开发环量&#xff0c;让 Python 程序员也能轻松介入到嵌入式系统和 IoT 应用的开发之中。本文将介绍如何利用这些技术&#x…

内存-VSS、RSS、PSS、USS

一、 VSS 虚拟耗用内存大小&#xff0c;是进程可以访问的所有虚拟内存的总量&#xff0c;包括进程独自占用的物理内存、和其他进程共享的内存、分配但未使用的内存。 RSS 驻留内存大小&#xff0c;是进程当前实际占用的物理内存大小&#xff0c;包括进程独自占用的物理内存、…

【ROS里程计】中部分代码解释

bool OdomNodePub::Odom_Reset(ubt_odom::odomreset::Request& req, ubt_odom::odomreset::Response& res) {if(req.cmd "reset"){OdomResetFlag true;}else{OdomResetFlag false;}res.state "success";return true; } 该函数是一个ROS节点中…

如何判断一个js对象是否存在循环引用

一、背景 在前端JSON.stringfy是我们常用的一个方法&#xff0c;可以将一个对象序列化。 例如将如下对象序列化 const person { name: kalory, age:18}JSON.stringfy(person) // 结果 {"name":"kalory","age":18}将一个数组序列化const arr …

Modbus转Profibus网关接变频器:实现工业自动化无缝连接

一、背景 在工业自动化领域&#xff0c;Modbus和Profibus是两种常见的通讯协议&#xff0c;而变频器作为控制电机转速的重要设备。为了实现不同设备之间的无缝连接和数据传输&#xff0c;现场大多数采用Modbus转Profibus网关&#xff08;XD-MDPB100&#xff09;来解决Modbus设…

常见场景的业务逻辑漏洞以及安全设计

前言 目前常规漏洞的挖掘越来越困难&#xff0c;在这种情况下&#xff0c;我们可以多去看看业务逻辑方面的漏洞&#xff0c;也是复杂的系统&#xff0c;越有可能出现这方面的问题。本篇文章就来看看常见的一些场景下都有哪些业务漏洞。 由于本人水平有限&#xff0c;文章中可…

论文笔记:ATime-Aware Trajectory Embedding Model for Next-Location Recommendation

Knowledge and Information Systems, 2018 1 intro 1.1 背景 随着基于位置的社交网络&#xff08;LBSNs&#xff09;&#xff0c;如Foursquare和Facebook Places的日益流行&#xff0c;大量用户签到数据变得可用 这些大量签到数据的可用性带来了许多有用的应用&#xff0c;以…

【AI实践】Dify开发应用和对接微信

自定义应用 创建应用有2种&#xff0c; 从应用模板创建 空白应用&#xff0c;也就是自定义应用 选择翻译助手 Translation assistant模板创建一个应用 自定义应用&#xff0c;创建一个child_accompany_bot自定的应用&#xff0c;用来支持家长&#xff0c;如何解决低龄儿童的…

LLVM后端 td文件 tablegen 模式匹配 寄存器 指令集 calling convention

目录 一、寄存器 1.1 寄存器定义 1.2 寄存器分类 二、指令集 2.1 指令集定义 2.2 模式匹配 2.2.1 PatFrags与PatFrag 2.2.2 OutPatFrag 2.2.3 PatLeaf 2.2.4 ImmLeaf 2.2.5 IntImmLeaf和FPImmLeaf 2.2.6 Pat 2.2.7 ComplexPattern 2.3 指令合法化 2.3.1 Promote…

异常向量表的设置

1、Linux Kernel中对异常向量表的填充 linux/arch/arm64/kernel/entry.S kernel_ventry 是一个定义异常向量的宏&#xff1b; 在该宏中&#xff0c;程序跳转到了b el\el\ht()\regsize()\label; 以为异常向量的第6行为例&#xff0c;其实就是跳转到了bl el1h_64_irq; 然后你去搜…

YOLOv10涨点改进SPPF创新结构,重新设计全局平均池化层和全局最大池化层,增强全局视角信息和不同尺度大小的特征

本文改进:SPPF_improve利用全局平均池化层和全局最大池化层,加入一些全局背景信息和边缘信息,从而获取全局视角信息并减轻不同尺度大小所带来的影响,强烈推荐,适合直接使用,paper创新级。 目录 1,YOLOv10介绍 1.1 C2fUIB介绍 1.2 PSA介绍 1.3 SCDown 2.SPP &SP…

哇塞,超好吃的麻辣片,一口就爱上

最近&#xff0c;我发现了一款让人欲罢不能的美食——食家巷麻辣片&#xff01;&#x1f60d; 一打开包装&#xff0c;那浓郁的麻辣香气就扑鼻而来&#xff0c;瞬间刺激着我的嗅觉神经。&#x1f603;食家巷麻辣片的外观色泽鲜艳&#xff0c;红通通的一片&#xff0c;看着就特…

计算机组成原理之定点除法

文章目录 定点除法运算原码恢复余数法原码不恢复余数法&#xff08;加减交替法&#xff09;运算规则 习题 定点除法运算 注意 &#xff08;1&#xff09;被除数小于除数的时候&#xff0c;商0 &#xff08;2&#xff09;接下来&#xff0c;有一个除数再原来的基础上&#xff0c…

Linux2-系统自有服务防火墙与计划任务

一、什么是防火墙 防火墙主要用于防范网络攻击&#xff0c;防火墙一般分为软件防火墙、硬件防火墙 1、Windows中的防护墙设置 2、防火墙的作用 3、Linux中的防火墙分类 Centos6、Centos6>防火墙>iptables防火墙 防火墙系统管理工具 Centos7>防火墙>firewalld防火…