vue3.0使用axios,vue中使用axios
Dao axios是一个库，不是vue中的第三方插件。下面这篇文章主要介绍在Vue3中使用axios的配置教程，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
目录
一、安装axios II。配置axios并添加拦截器III。使用axios发送请求附件：在Vue3中全球介绍axios摘要axios中文网站：axios-http.com/zh/
一、安装axios
npm安装axios -保存
二、配置axios，添加拦截器
在src目录中创建新的请求文件夹，并创建新的index.ts(或。js)文件。编辑代码如下：
从“axios”导入axios
//创建axios实例
const service=axios.create({
BaseURL:“/API”，//请求地址的所有前缀部分
超时：60000，//请求超时时间为毫秒
WithCredentials: true，//异步请求携带cookie。
标题：{
//设置后端需要的参数类型。
“内容类型”:“应用程序/json”，
令牌:您的令牌，
x-Requested-With : XMLHttpRequest ，
},
})
//添加请求拦截器
service . interceptors . request . use(
功能(配置){
//在发送请求之前做一些事情
返回配置
},
功能(错误){
//对请求错误做些什么
console.log(错误)
退货承诺.拒绝(错误)
}
)
//添加响应拦截器
服务.拦截器.响应.使用(
功能(响应){
console.log(响应)
2xx范围内的状态码会触发此功能。
//对响应数据做些什么
//dataaxios是axios返回的数据中的数据。
const dataAxios=response.data
//此状态码与后端一致。
常量代码=dataAxios.reset
返回dataAxios
},
功能(错误){
//超出2xx范围的状态代码将触发此功能。
//对响应错误采取措施
console.log(错误)
退货承诺.拒绝(错误)
}
)
导出默认服务
三、使用axios发送请求
在src目录下创建一个新的apis文件夹，所有以后的请求文件都将放在这里，比如创建一个新的接口user.ts用于请求用户信息，代码如下：
//导入axios实例
从 @/request/index 导入httpRequest
//定义接口的参数
接口UserInfoParam {
userID:字符串，
用户名：字符串
}
//获取用户信息
导出函数API get userinfo(param:userinfo param){
返回httpRequest({
url:“您的api url”，
方法： post ，
数据：参数，
})
}
然后在特定的业务页面中使用此请求，例如：
脚本安装语言=ts
从“vue”导入{ onMounted }
从“@/API/user”导入{ apiGetUserInfo }
函数getUserInfo() {
常量参数={
用户id:“10001”，
用户名：“迈克”，
}
apiGetUserInfo(param)。然后((res)={
console.log(res)
})
}
onMounted(()={
getUserInfo()
})
/脚本
附：Vue3 中全局引入 axios
在main.js中
从“axios”导入axios
Const app=createApp(App) //将默认值改写为
app . provide($ axios，axios)
Axios(compositionAPI)用于组件。
脚本设置
从“vue”导入{ inject }
const $axios=inject($axios )
$ axios . get( https://API . github . com/users )。然后((resp)={
console.log(resp.data)
}).catch((err)={
console.log(错误)
})
/脚本
总结
关于使用axios配置Vue3的这篇文章到此为止。有关使用axios配置Vue3的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。