vue3 axios数据请求封装

server/2024/9/23 3:25:49/

准备工作

vue3+js+vite
首先确认package.json中有axios

如果没有 运行 npm install axios 安装axios
成功后在package.json文件会显示。

第一步 创建app.js、request.js

两个文件在同级目录下即可

api.js

javascript">import instance from "./request";
const api_name = "";export default {getData(url, params) {return instance({url: api_name + url,method: 'get',params})},postData(url, params) {return instance({url: api_name + url,method: 'post',data: params,})}
}

request.js

javascript">import axios from 'axios'const request = axios.create({baseURL: '  ', //请求地址timeout: 60000, // 请求超时时间withCredentials: true, // 异步请求携带cookieheaders: {//设置后端需要的传参类型'Content-Type': 'application/json',},
})
// 添加请求拦截器
request.interceptors.request.use(config => {// 如果你要去localStor获取token,(如果你有)// let token = localStorage.getItem("x-auth-token");// if (token) {//添加请求头//config.headers["Authorization"]="Bearer "+ token// }return config
}, err => {return Promise.reject(err)
});
// 添加响应拦截器
request.interceptors.response.use(response => {return response.data
}, err => {return Promise.reject(err)
});
export default request

使用


http://www.ppmy.cn/server/39215.html

相关文章

linux修改镜像源

1.国内镜像源地址 阿里镜像源:阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 2.Centos7修改镜像源 (1)备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repo cp /etc/yum.repos.d/CentOS-Base.repo /usr/local/src/test (2)进入yum镜像源文件目录 cd /…

高精度乘法C++

1.高精度乘高精度的简单算法 思想&#xff1a;倒置相乘&#xff0c;统一处理进位&#xff0c;还原。 复杂度&#xff1a; o ( n 2 ) o(n^2) o(n2) // By SnowDream #include<bits/stdc.h> using namespace std; typedef long long ll; const int N1e510; string s1,s2…

升级WSL Ubuntu内核从5.10到5.15

【未成功】可以使用$ uname -r察看当前版本,如果不是最新的版本可以简单通过$ sudo apt update 和$ sudo apt upgrade来升级内核。但是,它可能不会立即更新到最新的内核版本。可以手动安装最新内核,通过$ sudo add-apt-repository ppa:cappelikan/ppa 添加Ubuntu内核仓库,然…

应用层协议之 DNS 协议

DNS 就是一个域名解析系统。域名就是网址&#xff0c;类似于 www.baidu.com。网络上的服务器想要访问它&#xff0c;就得需要它对应的 IP 地址&#xff0c;同时&#xff0c;每个域名对对应着一个 / N个 IP 地址&#xff08;即对应多台服务器&#xff09;。 因此&#xff0c;为了…

线程的常见方法

线程的常见方法 休眠&#xff1a; 让当前状态不再参与cpu的竞争&#xff0c;直到休眠结束&#xff1b; 结果&#xff1a;并不是完全交替进行的&#xff0c;因为只是休眠状态&#xff0c;也会存在争抢cpu 放弃&#xff1a; 让当前状态主动放弃时间片&#xff0c;下次再去争抢…

【免费】WordPress LskyPro0.1.0版本兰空图床插件无法启用修改代码方法

注&#xff1a;启用插件报错&#xff0c;按提示打开main.php文件找到215行代码&#xff0c;错误原因是函数里多了一个,号&#xff0c;应该是忘记去掉了&#xff0c;把&#xff0c;号去掉就可以了 目录 项目介绍功能计划功能快速入门相关文章&#xff1a; 项目介绍 此项目为通过…

nacos开启登录开关启动报错“Unable to start embedded Tomcat”

nacos 版本&#xff1a;2.3.2 2.2.2版本之前的Nacos默认控制台&#xff0c;无论服务端是否开启鉴权&#xff0c;都会存在一个登录页&#xff1b;在之后的版本关闭了默认登录页面&#xff0c;无需登录直接进入控制台操作。在这里我们可以在官网可以看到相关介绍 而我现在所用的…

如何使用 iOS系统恢复软件修复 iPhone 问题

苹果公司向世界推出了他们可以拥有的最智能的手机。但即使是 iPhone 也无法避免智能手机常见的损坏和问题。您将熟悉最常见的问题。屏幕黑屏或卡在 Apple 徽标上&#xff1b;冻结或卡在恢复模式的 iPhone。但这样的问题不胜枚举&#xff0c;每天都有 iOS 用户在他们的设备中遇到…