vue3.0axios封装,vue-axios详细介绍
爱可信毋庸多说大家在前端开发中常用的一个发送超文本传送协议请求的库，用过的都知道，篇文章主要给大家介绍了关于某视频剪辑软件中如何简单封装爱可信的相关资料，需要的朋友可以参考下
把爱可信注入到某视频剪辑软件中
从" axios "导入axios
Vue.prototype. $ axios=axios
从" axios "导入爱可信
axios。默认值。超时=5000；//响应时间
axios。默认值。标题。post[ Content-Type ]= application/JSON；charset=UTF-8 ；//配置请求头
axios。默认值。with credentials=true//带甜饼干
axios。默认值。基本URL= http://localhost:8080/；//配置接口地址
//发布传参序列化（添加请求拦截器)
axios。截击机。请求。使用((配置)={
//在这里可以添加序列化代码，根据后端而定，我用的地对地导弹(地对地导弹)后端接受数据对象，假如需要序列化可以用全国工业产品生产许可证组件
返回配置；
},(错误)={
console.log(错误的传参)
返回承诺。拒绝(错误);
});
//返回状态判断（添加响应拦截器)
axios。截击机。回应。使用((RES)={
//对响应数据做些事
如果(!res.data.success){
回报承诺。解决(RES)；
}
返回表示留数
},(错误)={
console.log(网络异常)
返回承诺。拒绝(错误);
});
//返回一个承诺（发送邮政请求)
导出函数fetchPost(url，params) {
返回新承诺((解决，拒绝)={
axios.post(url，params)。然后(响应={
解决（响应);
},错误={
拒绝(err)；
})。接住(错误)={
拒绝（错误)
})
})
}
返回一个承诺（发送得到请求)
导出函数fetchGet(url，param) {
返回新承诺((解决，拒绝)={
axios.get(url，{params: param})。然后(响应={
解决（响应)
},错误={
拒绝（错误)
})。接住(错误)={
拒绝（错误)
})
})
}
导出默认值{
fetchPost，
fetchGet，
}
简单测试：
loginPost: function() {
让params={
密码: 123 ,
用户名:管理员
}
http.fetchPost(/login ，params).然后((数据)={
console.log(数据)
}).接住(错误={
console.log(错误)
})
},
你好：函数(){
http.fetchGet(/hello ， ).然后((数据)={
console.log(数据)
}).接住(错误={
console.log(错误)
})
},
邮政请求：
得到请求：
跨域问题，这里是在后端配置的：
在SpringMVC.xml中配置跨域：
！-接口跨域配置-
mvc:cors
！- allowed-methods=* -！-表示所有请求都有效-
mvc:映射路径=/** 允许-原点=*
allowed-methods=POST，GET，OPTIONS，DELETE，PUT
allowed-headers=Content-Type，Access-Control-Allow-Headers，Authorization，X-Requested-With
allow-credentials=true/
/mvc:cors！-接口跨域配置-
接口配置：
在某视频剪辑软件中配置创建一个vue.config.js:
模块。导出={
devServer: {
代理服务器：{
/api: {
目标："http://127.0.0.1:8080",
//在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
更改来源：真的，
ws:没错，
路径重写：{
^/api:
//替换目标中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
}
}
}
}
}
后端也能正常获取饼干。
当然要注意下面这个配置，这个是带甜饼干的原因
axios。默认值。with credentials=true
总结
关于如何在vue中简单地打包axios的这篇文章就到这里了。有关在vue中打包axios的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。