vue使用axios调用后端接口,axios封装统一处理接口
在vue项目中，我们通常使用的是axios库，这是一个基于promise的http库，可以在浏览器端和node.js上运行以下文章主要介绍了Axios在Vue中的封装和接口管理的相关信息，有需要的可以参考一下。
目录
一、Axios Axios的封装安装引入了接口管理，统一公开接口并在组件中使用。补充：封装get方法和post方法概述
一、 Axios 的封装
在Vue项目中，与后台的数据交互频繁，不可或缺。Axios刚开始没有封装的时候，每次对后台数据的请求都是一个完整的路径来写，特别长，尤其是引用地址，每次都要复制添加到前面，冗余度特别大。封装Axios后，调用接口短了很多。如果基址以后改变，只需要在配置中改变一次。
安装 Axios
npm安装axios
引入
让我们首先在src文件夹下创建一个utils文件，然后在这个文件夹下创建一个requery.js文件。
requery.js
从“axios”导入axios
Axios.defaults.baseurl= 3358 . //在这里写接口基址。
导出默认axios
接口管理
让我们在src文件夹下创建一个api文件，它存储了接口。
我们将与模块相关的接口封装在一个. js文件中。例如，我现在创建了一个信息管理模块的接口管理文件，名为messageManege.js
首先要把我们的requery.js文件引入这个文件。
从 @/utils/requery 导入请求
封装方法是post的接口
//获取所有验收数据
导出常量getAllCheck=()=请求({
方法： post ，
URL:“manager/selectAllCheckInfo”
})
获取封装方法的接口
//获取所有延迟的数据
导出常量getAllDelay=()=请求({
url:“经理/选择所有延期信息”
})
封装参数要拼接在链路后面的接口上。
//验收状态处理
export const CheckHandle=(x1，x2)={
退货请求({
方法： post ，
url:`经理/检查？状态=$ { x1 } id=$ { x2 }
})
}
封装请求头为“content-type”的接口：“application/JSON”
导出常数更新阶段=数据={
退货请求({
方法： post ，
url:“暂存/更新”，
标题：{
“内容类型”:“应用程序/json”，
},
数据：数据
})
}
注意，传入的数据应该转换成json格式。
统一暴露接口
在src/api下新建一个index.js文件，统一公开所有接口。
导入{
getAllCheck，CheckHandle，getAllDelay，UpdateStage
}来自。/messageManage
导出常量getAllCheckAPI=getAllCheck
export const CheckHandleAPI=check handle
导出常量getAllDelayAPI=getAllDelay
export const UpdateStageAPI=update stage
在组件中使用
用于安装()
异步装载(){
const RES=await getAllCheckAPI()；
Console.log(res.data) //打印返回的数据
},
常用方法使用
异步StartProcess(s，i) {
//调用后端接口
返回CheckHandleAPI(s，I)。然后((res)={
if (res.status==200) {
这个。$message.success(状态修改成功！);
}否则{
这个。$message.error(状态修改失败！);
}
});
},
所以axios的包装和使用就完成了~
补充：封装get方法和post方法
我们常用的ajax请求方法有get、post、put等。我相信我们的朋友都很熟悉。Axios有很多类似的方法。如果您不清楚，请阅读文档。但是为了简化我们的代码，我们仍然需要一个简单的包。我们主要封装了下面两个方法：get和post。
get方法:我们定义一个get函数。get函数有两个参数。第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，解析服务器在axios请求成功时返回一个值，在请求失败时返回reject错误值。最后，get函数通过export抛出。
/**
* get方法，对应get请求
* @ param { String } url[请求的URL地址]
* @ param { Object } params[请求中携带的参数]
*/
导出函数get(url，params){
返回新承诺((解决，拒绝)={
axios.get(url，{
参数：参数
}).然后(res={
解决(RES . data)；
}).catch(错误={
拒绝(err.data)
})
});}
post方法：的原理和get基本相同，但是需要注意的是post方法必须使用序列化提交的从参数对象的操作，所以这里我们通过node的qs模块来序列化我们的参数。这一点非常重要。如果没有序列化操作，后台无法获取你提交的数据。这是文章的开头。我们从‘QS’进口QS；原因。如果你不知道序列化是什么意思，就去查。答案有很多。
/**
* post方法，对应于post请求
* @ param { String } url[请求的URL地址]
* @ param { Object } params[请求中携带的参数]
*/
导出函数post(url，params) {
返回新承诺((解决，拒绝)={
axios.post(url，QS.stringify(params))。然后(res={
解决(RES . data)；
})。catch(错误={
拒绝(err.data)
})
});
}
这里有一个小细节。axios.get()方法和axios.post()方法在提交数据时写参数还是有区别的。不同的是get的第二个参数是一个{}，然后这个对象的params属性值就是一个parameter对象的属性值。post的第二个参数是一个参数对象。注意两者的细微差别！
总结
这就是这篇关于Axios在Vue中的封装和接口管理的文章。有关VueAxios的封装和接口的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。