vue中axios的封装,vue使用axios调用后端接口
在某视频剪辑软件项目中，和后台交互获取数据这块，我们通常使用的是爱可信库，它是基于承诺的超文本传送协议(超文本传输协议的缩写)库，下面这篇文章主要给大家介绍了关于Vue3引入爱可信封装接口的两种方法，需要的朋友可以参考下
目录
第一种1.安装2.新建一个http。JSP文件3.使用第二种1.安装2.新建3.http.js4.request.js总结
第一种
1.安装
新公共管理安装axios -S
2.新建一个http.js文件
从" axios "导入axios
从" qs "导入QS；
导入{
对话，
烤
}来自vant ；
//axios。默认值。base URL=http://hplqy.suoluomei.cn/index.php？s=/hfs/Api/ //正式
axios。默认值。基本URL= http://活动测试。HPL 001。cn/CRM _ API/app/自订///测试
//发布请求头
axios。默认值。标题。发布[内容类型]=
application/x-www-form-urlencoded；charset=UTF-8 ；
//设置超时
axios。默认值。超时=10000；
axios.interceptors.request.use(
配置={
Toast.loading({
持续时间：0,
消息： 加载中.,
禁止点击：真，
});
返回配置；
},
错误={
返回承诺。拒绝(错误);
}
);
axios。截击机。回应。使用(
响应={
吐司。clear()；
返回响应；
},
错误={
吐司。clear()；
Dialog.alert({
标题： 提示，
消息： 网络请求失败，反馈给客服
});
}
);
导出默认函数axiosApi(类型，参数，方法){
让符号=过程。环境。vue _ APP _ SIGN
如果(过程。环境。node _ ENV===生产){
符号=本地存储。getitem( wx _ sign )
}否则{
sign= CRM:user:sign:f 0 c8 CBE 468 f 6a 34463d 198268290903 f
}
定义变量值={
标志：标志
}
var data=method==post ？QS。stringify(对象。assign(值，参数)):Object.assign(值，参数)
返回新承诺((解决，拒绝)={
axios({
方法：方法，
网址：类型，
数据：数据
})。然后(res={
if (res.data.errcode==0) {
解析（结果数据)
}否则{
//接口错误提示
吐司。失败(参考数据。味精)；
}
})。接住(错误={
拒绝（错误)
});
})
};
3.使用
从导入axiosApi./utils/http ；
tabsHttp() {
阿希奥SAPI( getProductClassFromCrm ，{}， post ).然后((res)={
对于(设I=0；我保留数据长度；i ) {
研究数据[i].type=0；
}
这个。sebar list=RES . data
});
},
第二种
1.安装
新公共管理安装axios -S
2.新建
3.http.js
从" axios "导入axios
从" qs "导入QS；
导入{
对话
}来自vant ；
//axios。默认值。基本URL= http://HP。索洛梅。cn/index。PHP //正式
axios。默认值。基本URL= http://HP。索洛梅。cn/index。PHP //测试
//发布请求头
axios。默认值。标题。发布[内容类型]=
application/x-www-form-urlencoded；charset=UTF-8 ；
//设置超时
axios。默认值。超时=10000；
axios.interceptors.request.use(
配置={
返回配置；
},
错误={
返回承诺。拒绝(错误);
}
);
axios。截击机。回应。使用(
响应={
if (response.status==200) {
返回承诺。解决(响应);
}否则{
返回承诺。拒绝(响应);
}
},
错误={
Dialog.alert({
标题： 提示，
消息： 网络请求失败，请刷新重试
});
}
);
导出默认值{
帖子(网址，数据){
返回新承诺((解决，拒绝)={
axios({
方法： post ，
url，
数据：qs.stringify(数据),
})。然后(res={
解析（结果数据)
})。接住(错误={
拒绝（错误)
});
})
},
获取(网址，数据){
返回新承诺((解决，拒绝)={
axios({
方法：“得到”，
url，
参数：数据，
})。然后(res={
解析（结果数据)
})。接住(错误={
拒绝（错误)
})
})
}
};
4.request.js
从导入http ./http
const API _ key= 233 D4 CAD 34c 34d 343785s 34 dw 3 er 3ds 3234 ESD 4
让符号=过程。环境。vue _ APP _ SIGN
如果(过程。环境。node _ ENV===生产){
符号=本地存储。getitem(符号)
}否则{
sign= 17a 1920年FDC 3c 3 c 25 D1 BF 7 c 6 DD 724 F5 cf
}
const post=(url，data={})=
http.post(
url，
Object.assign({
api_key: api_key，
签名，
},
//{
//data: Object.assign({
//role_id: role_id //如果需要再包层数据就这样写
//},
//数据
//)
//}
数据
)
)
const get=(url，params={})=
http.get(
url，
Object.assign({
api_key: api_key，
符号
},
参数
)
)
//接口说明
const getFissionCourseList=data=post( getFissionCourseList ，data)
const getGetrequs=params=get( getFissionCourseList ，params)
//接口导出
导出{
getFissionCourseList，
getGetrequs
}
5.页面引入使用
模板
div class=box
"延津"
差异
class=演示
ref=seder
欢迎来到VUE3/div
差异
class=演示
@click=testClick
欢迎来到VUE3/div
/div
div @click=go 跳转页面/div
div @ click= getRquset
点我调接口
/div
meHome :text=132/meHome
/div
/模板
脚本
从导入{ getFissionCourseList，getGetrequs }././utils/request ；
从“vue”导入{ reactive，toRefs，onMounted，on activated }。
从以下位置导入我的主页./我/我。vue ；
从"问"导入{ async }；
导出默认值{
组件：{
梅霍姆，
},
setup() {
//数据
恒定状态=反应({
testMsg:原始值，
});
//onLand生命周期
onMounted(async ()={
//进入页面调用接口
init()；
控制台。日志(状态。testmsg)；
});
//onshow生命周期
on activated(async()={ })；
//方法事件
常量方法={
go() {
这个. router.push({
路径："/main "，
查询：{
课程_id: 123，
},
});
},
testClick() {
这个. nextTick(()={
这个 refs.seder.innerHTML=更改了内容；
});
},
异步getrqueset(){
等待getGetrequs({ t35: get }).然后((res)={
控制台。日志(分辨率)；
});
},
};
const init=async ()={
等待getFissionCourseList({ t35: post }).然后((res)={
//控制台。日志(分辨率)；
});
等待getGetrequs({ t35: get }).然后((res)={
//控制台。日志(分辨率)；
});
};
返回{
.toRefs(州),
.方法，
};
},
};
/脚本
style src= ./index.less lang=less 范围
/风格
总结
到此这篇关于Vue3引入爱可信封装接口的两种方法的文章就介绍到这了，更多相关Vue3引入爱可信封装接口内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。