vue3 axios封装,vue中axios的封装
本文主要介绍了vue-cil的axios的二次封装以及代理反向代理的说明，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
Axios和代理反向代理1、Axios特性2、Axios安装3、Axios和代理反向代理使用Axios反向代理代理个人理解使用反向代理代理的原因基本配置
Axios与proxy反向代理
Axios是一个基于promise的HTTP库，可用于浏览器和node.js
1、Axios 的特性
从浏览器创建XMLHttpRequests，从node.js创建http请求，支持Promise API拦截请求和响应，转换请求数据和响应数据，取消请求，自动转换JSON数据，支持XSRF防御。
2、Axios 的安装
npm i axios
#或者
yran添加轴
3、Axios 与proxy反向代理的使用
导入要使用的文件(request.js)
//这是axios的第二次包装。
//导入下载的包
从“axios”改进axios
//创建axios实例
const service=axios.create({
//添加要对接的后端url接口
//bassUrl: url ，
//设置超时。
超时：3000
})
//请求拦截
service . interceptors . request . use(config={
//可以添加一些响应头信息等。
返回配置
})
//响应拦截
service . interceptors . response . use(RES={
Console.log(请求拦截，res)
返回资源
})
//导出
导出默认服务
如果对接了多个后端接口，并且前端应用和后端API服务器不在同一个主机上运行，那么需要将API请求代理给开发环境中的API服务器，只需在vue.config.js中编写以下代码即可
//vue.config.js
模块.导出={
devServer:{
//更改端口号
端口：9550，
//自动打开浏览器？
开：真的，
代理服务器：{
//在这里，当你访问一个以/api开头的url时，它会代理到目标target。
/api: {
目标：“url”，
ws:没错，
changeOrigin:真的，
//再次修改路径
路径重写：{
^/api:
}
}
}
}
}
注：为什么要再次修改路径？因为发送请求后，url中会拼接一个额外的 /api ，但我们并不需要这个来获取数据，所以要重新修改，去掉它；移除之后，您可以获得数据
最后，直接导入服务并调用它。
axios反向代理proxy个人理解
使用反向代理proxy的原因
首先，你需要了解浏览器的同源策略。同源是指，比如你的VUE的项目地址是“http://localhost:8080”，而你的后端项目启动地址是“http://localhost:9999”。两者的协议(http)和域名(localhost)都是一样的，只是端口号(:xxxx)vue是8080，后端是999。(如果满足相同的协议、域名、端口号，不存在跨域问题)。
以我个人的理解，反向代理就是一个外壳，给你vue项目访问后端资源，让浏览器认为这个请求是同源的，浏览器不会拦截，数据可以正常返回(类似vpn原理，对吧)。
proxy基本配置
模块.导出={
devServer: {
代理服务器：{
/proxyurl:{
Target: 3358 localhost: 9999 ，//同源的url就是你要访问的服务器
//ws:真，这是为了打开websocket。
ChangeOrigin: true，//字面意思：改变源点可以被很多说是跨域的人理解。
路径重写：{
/proxyurl: //另一种写法is/^/proxyurl: //自测
}
}
}
}
}
//写出最简单的用法示例
//前端项目地址为http://localhost:8080
//后端项目地址是http://localhost:9999
axios . get(/prox yurl/user/get alluser )。然后(res={
console . log(RES)；
});
解释这个例子：
很明显，我们通过vue项目接入了后端资源。查看没有代理列表的代码，我们用http://localhost:8080/proxy URL/user/get alluser请求资源。
但是有了反向代理，反向代理看到你的url中出现了/proxy url ，反向代理就起作用了，把/proxy URL 前面一段 http://localhost:8080 替换成 3358localhost: 999 。此时，请求的资源的URL变成了 3358localhost: 999/proxy URL/。
但是我们配置了一个pathrewrite: {/proxy url:}，/proxy url 是一个正则表达式，它将匹配你的url中的字符串。该选项的代码含义是将url中的“/代理URL”替换为空字符串。url现在是3358 localhost:9999/user/get alluser。
Ps:通常我们封装axios，可以在创建axios实例时编写。
导出功能请求(配置){
let axio instance=axios . create({
baseurl:“/proxy url”，//调用时只拼接最后一个和最后一个URL
超时：5000
});
返回axioinstance(config)；
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。