vue3+vite+js axios引用

先交代下基础版本:
“node”:“V16.14.1” “vue”: “^3.4.21” “vite”: “^5.2.0”

  1. 安装:npm install axios --save
  2. 在src目录下的utils文件夹创建一个request.js文件(示例代码,仅供参考):
//引入axios请求
import axios from 'axios'
// store
import useUserStore from '@/store/modules/userStore.js'
const store = useUserStore()
const BASE_API=import.meta.env.VITE_APP_BASE_API
// 创建axios实例
const service = axios.create({baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)timeout: 15000 // 请求超时时间,这里15秒//withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带//请求头里面设置通用传参类型/*headers: {//设置后端需要的传参类型'Content-Type': 'application/json','token': 'x-auth-token',//一开始就要token'X-Requested-With': 'XMLHttpRequest',}*/
})// request拦截器
service.interceptors.request.use(config => {const value = JSON.parse(localStorage.getItem('token'));console.log(111, value.token)if (store.token) {config.headers['token'] = store.token // 让每个请求携带自定义token 请根据实际情况自行修改}return config
}, error => {console.log(error)return Promise.reject(error)
})// response拦截器
service.interceptors.response.use(response => {//对数据返回做什么const res = response.dataconst config = response.config// custom 表示自定义if (res.status_code !== 200 && !config.custom) {//   if (res.status_code === 1002) {//     loginOut()//   } else if (loginVerify(res, config)) { // 登录功能验证//     return res//   } else {// Message({//   message: res.status || 'Error',//   type: 'error',//   duration: 5 * 1000// })//   }return Promise.reject(new Error(res.status || 'Error'))} else {if (response.headers['authorization'] || response.headers['Authorization']) {const _token = response.headers['authorization'] || response.headers['Authorization']store.dispatch('user/setToken', _token.split('Bearer ')[1])}return res}},error => {console.log('err' + error) // for debug// Message({//   message: error.message,//   type: 'error',//   duration: 5 * 1000// })return Promise.reject(error)}
)
export default service
  1. src目录下创建一个api斜体样式文件夹,用来存放每个模块的接口请求,类如login.js
import request from '@/utils/request'//示例以application/json格式传参
export function login(data) {return request({url: '/admin/login',method: 'post',data: data})
}//示例在url后面拼接参数传参
export function test(params) {return request({url: '/admin/login',method: 'post',params: params})
}
  1. 使用,类如HelloWorld.vue:
<script setup>
import { login } from '@/api/login.js'
onMounted(() => {login({ phone: 18888888888 }).then(res => {console.log(res)}).catch(res => {console.log(res)})
})
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文笔记ColdDTA:利用数据增强和基于注意力的特征融合进行药物靶标结合亲和力预测

ColdDTA发表在Computers in Biology and Medicine 的一篇一区文章 突出 • 数据增强和基于注意力的特征融合用于药物靶点结合亲和力预测。 • 与其他方法相比&#xff0c;它在 Davis、KIBA 和 BindingDB 数据集上显示出竞争性能。 • 可视化模型权重可以获得可解释的见解。 …

三种滤波(EKF、UKF、CKF)的对比,含MATLAB源代码

使用MATLAB模拟三维的滤波,包含扩展卡尔曼滤波EKF、无迹卡尔曼滤波UKF、容积卡尔曼滤波CKF。 状态更新和观测更新均为非线性的,模拟一定强度的机动性,可用于卡尔曼滤波方法的对比学习,自己修改成需要的运动模型后,可以用于组合导航(GPS+DVL形式)。 运行结果 真值的三轴…

Unity UGUI Image 点击事件忽略空白像素区域

我们会遇到图片不是方形的不规则图片。这个时候我们希望只有点击到图像内容本身才算点击&#xff0c;点击空白区域则不算点击。而UGUI对图片的处理是整个图片都会算作点击区域&#xff0c;这样不能满足于我们的使用需求了。 首先我们需要把图片本身的Read/Write 选项打开 然后…

HCIP第三节

一.OSPF接口类型&#xff08;ospf在不同网络类型接口上的不同工作方式&#xff09; 查看ospf协议在接口具体的工作方式名称&#xff1a; display ospf interface g0/0/1 1.LoopBack接口类型 : OSPF的工作方式&#xff1a;华为显示p2p&#xff0c;实为环回专用工作方式 &…

面试题分享之Java并发篇

注意&#xff1a;文章若有错误的地方&#xff0c;欢迎评论区里面指正 &#x1f36d; 系列文章目录 面试题分享之Java集合篇&#xff08;三&#xff09; 面试题分享之Java集合篇&#xff08;二&#xff09; 面试题分享之Java基础篇&#xff08;三&#xff09; 前言 今天给小…

Meta Llama 3 使用 Hugging Face 和 PyTorch 优化 CPU 推理

原文地址&#xff1a;meta-llama-3-optimized-cpu-inference-with-hugging-face-and-pytorch 了解在 CPU 上部署 Meta* Llama 3 时如何减少模型延迟 2024 年 4 月 19 日 万众期待的 Meta 第三代 Llama 发布了&#xff0c;我想确保你知道如何以最佳方式部署这个最先进的&…

时间日志格式的统一和定制

返回当前格式的时间没有错误&#xff0c;但是不符合中国人的阅读习惯 解决&#xff1a; 方案一&#xff1a;JsonFormat 解决后端 传到 前端格式问题 依赖&#xff1a; <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jack…

STM32:GPIO输出

文章目录 1、GPIO介绍1.1 GPIO的基本结构1.1 GPIO的位结构 2、 GPIO工作模式3、GPIO标准外设库接口函数3.1 RCC接口函数3.2 GPIO接口函数3.2.1 GPIO的读取函数3.2.1 GPIO的写入函数 4、GPIO的初始化 1、GPIO介绍 GPIO&#xff08;General Purpose Input Output&#xff09;通用…

Python设计模式 - 单例模式

定义 单例模式是一种创建型设计模式&#xff0c; 其主要目的是确保一个类只有一个实例&#xff0c; 并提供一个全局访问点来访问该实例。 结构 应用场景 资源管理&#xff1a;当需要共享某个资源时&#xff0c;例如数据库连接、线程池、日志对象等&#xff0c;可以使用单例模…

铜川市各区县高新技术企业奖励补贴政策文件,铜川高企申报条件

铜川市高新技术企业奖励补贴政策文件解读&#xff1a;《铜川市科技型企业创新发展倍增计划》 【高企申请 找 小编 见 个 人 简 介 】一、指导思想 按照市委、市政府部署要求&#xff0c;以强化科技型企业创新主体地位为牵引&#xff0c;以培育壮大主体规模、提升…

【UnityRPG游戏制作】Unity_RPG项目_玩法相关

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

【算法与数据结构】哈希表

文章目录 引入哈希函数介绍便利店的例子Python3 中的哈希表C 中的哈希表 应用将散列表用于查找防止重复将散列表用作缓存 哈希冲突与解决链地址法开放寻址 总结参考资料写在最后 引入 假设你在一家便利店上班&#xff0c;你不熟悉每种商品的价格&#xff0c;在顾客需要买单是时…

详述DM9161芯片的特性和用法

目录 概述 1. 认识DM9161 2 DM9161的特性 2.1 特性总结 2.2 结构框图 3 功能描述 4 RMII接口 4.1 100Base-TX Operation 4.2 10Base-T Operation 4.3 Auto-Negotiation 4.4 HP Auto-MDIX功能描述 6 DM9161的寄存器 6.1 寄存器列表 6.2 寄存器功能介绍 6.2.1 基本…

ubuntu20中ros与anaconda的python版本冲突问题

系统环境 原本系统是ubuntu20 noetic&#xff0c;python都在/usr/bin中&#xff0c;一共是两个版本的python&#xff0c;一个是python3.8&#xff0c;另一个是python2.7。 问题发现 当安装anaconda后&#xff0c;并且将anaconda的bin目录加入到系统环境中时候&#xff0c;…

Stable Diffusion webUI 配置指南

Stable Diffusion webUI 配置指南 本博客主要介绍部署Stable Diffusion到本地&#xff0c;生成想要的风格图片。 文章目录 Stable Diffusion webUI 配置指南1、配置环境&#xff08;1&#xff09;pip环境[可选]&#xff08;2&#xff09;conda环境[可选] 2、配置Stable Diffu…

Monorepo(单体仓库)与MultiRepo(多仓库): Monorepo 单体仓库开发策略与实践指南

&#x1f31f; 引言 在软件开发的浩瀚宇宙里&#xff0c;选择合适的代码管理方式是构建高效开发环境的关键一步。今天&#xff0c;我们将深入探讨两大策略——Monorepo&#xff08;单体仓库&#xff09;与MultiRepo&#xff08;多仓库&#xff09;&#xff0c;并通过使用现代化…

CMakeLists.txt语法规则:部分常用命令说明一

一. 简介 前一篇文章简单介绍了CMakeLists.txt 简单的语法。文章如下&#xff1a; CMakeLists.txt 简单的语法介绍-CSDN博客 接下来对 CMakeLists.txt语法规则进行具体的学习。本文具体学习 CMakeLists.txt语法规则中常用的命令。 二. CMakeLists.txt语法规则&#xff1a;…

【Qt问题】VS2019 Qt win32项目如何添加x64编译方式

解决办法&#xff1a; 注意改为x64版本以后&#xff0c;要记得在项目属性里&#xff0c;修改Qt Settings、对应的链接include、lib等 参考文章 VS2019 Qt win32项目如何添加x64编译方式_vs2019没有x64-CSDN博客 有用的知识又增加了~

Spring事件

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Spring⛺️稳中求进&#xff0c;晒太阳 Spring事件 简洁 Spring Event&#xff08;Application Event&#xff09;就是一个观察者模式&#xff0c;一个bean处理完任务后希望通知其他Bean的…

OpenCV人脸识别C++代码实现Demo

OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉库&#xff0c;它提供了很多函数&#xff0c;这些函数非常高效地实现了计算机视觉算法。 官网&#xff1a;https://opencv.org/ Github: https://github.com/opencv/opencv Gitcode…