vue3 axios封装,vue3.0axios封装
本文主要介绍vue3学习笔记中简单封装axios示例实现，
目录
open api基本配置拦截器API请求数据呈现简介
简介
Axios是一个基于promise的网络请求库，管理后台使用的场景通常是获取后端api数据，然后交给页面进行渲染。
或者按照前面的示例项目安装axios的最新版本0.27.2。
cd HELLO-WORLD
npm安装axios
openapi
网上找一个openapi地址，免费，不用认证就可以用。
方便开发时模拟接口数据，但不能用于生产环境。
openapi返回json数据，更符合我们的需求。这里是直接写入axios配置的。
基本配置
Axios有很多配置项，这里只配置基本功能。
在src目录中创建utils文件夹，然后创建request.js文件。
从“axios”导入axios
//自动添加在url前面
axios . defaults . base URL= https://API . API open . top
//超时时间
axios.defaults.timeout=5000
//跨域凭证
axios . defaults . with credentials=false
//响应并请求拦截器配置
导出默认axios
拦截器
Axios拦截器分为请求拦截和响应拦截。
请求拦截器可以设置令牌、报头等。请求时。
响应拦截器收到数据后可以做出逻辑判断。
请求拦截器配置
axios . interceptors . request . use(config={
console.log(配置)
返回配置
}，错误={
承诺.拒绝(错误)
})
响应拦截器配置
axios . interceptors . response . use(RES={
if (typeof res.data！==object) {
ElMessage.error(返回的数据不是对象！)
退货承诺.拒绝(res)
}
if (res.data.code！==200 ){
ElMessage.error(返回代码不等于200 )
}
返回结果数据
}，错误={
ElMessage.error(“网络异常”)
承诺.拒绝(错误)
})
api请求
在src目录下创建api文件夹，在api目录下创建openapi.js文件。
创建一个getImages方法来获取openapi的图像数据。
此方法指定请求get方法、传入的url和参数。
导入请求自./utils/请求
导出函数getImages(params) {
return request . get(/API/getImages ，{ params })
}
数据渲染
在components目录中创建table.vue的组件。有关路由配置，请参见上一章。
引入了Openapi。因为是js组件，所以不需要在vue页面显示声明，可以直接使用。
创建页面时调用请求数据方法。页面加载后，您可以看到页面上的数据。
模板
差异
差异
p这是imagesdata: {{ imagesData }}/p
/div
/div
/模板
脚本
从“@/api/openapi”导入{ getImages }
导出默认值{
名称：“表”，
data() {
返回{
imagesData: null，
查询数据：{
页面：0，
尺码：10，
}
}
},
已创建(){
this . fetch data()；
},
方法：{
fetchData() {
getImages(this.queryData)。然后((res)={
this.imagesData=res.result
}).最后(()={
console.log(this.imagesData)
})
}
}
}
/脚本
效果如下
结论：完成了axios的简单封装。以上是vue3学习笔记中axios简单包的样例实现的详细内容。更多关于axios的vue3包的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。