vue使用axios 发送post请求的四种方法,vue axios封装以及数据交互
本文主要介绍Vue使用axios发送请求并实现简单封装，主要包括axios的安装以及简单的使用和配置方法。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
:
目录
1.安装axios 2。简单使用1。配置2。发送请求3。封装使用1。创建js封装类2。配置3。发送请求
一、安装axios
npm安装axios -保存
二、简单使用
1.配置
将以下内容添加到main.js中
//介绍Axios -。
从“axios”导入axios
Vue.prototype.$axios=axios
vue . prototype . $ axios . defaults . base URL= http://127 . 0 . 0 . 1:8000//请求根路径
//-
2.发送请求
1获取
这个。$axios.get(index )。然后(res={
//返回的数据在res.data中
})
2post
这个。$axios.post(login ，{user:admin ，pwd:123})。然后(res={
//返回的数据在res.data中
})
3并发性
var res1=this。$axios.get(index )
var res2=this。$axios.post(login ，{user:admin ，pwd:123})
这个。$axios.all([res1，res2])。然后(这个。$axios.spread(res1，res2)={
//两个请求的返回结果在res1和res2中
})
三、封装使用
1.创建js封装类
src/request/索引. js
//简介
从“axios”导入Axios
从 element-ui/导入{ message }/需要安装element-ui，错误提示界面友好。
//前端存在localStorage中的令牌
const token=local storage . getitem( token )
//实例化
const request=Axios.create({
基本URL:“http://127 . 0 . 0 . 1:8000/”，//服务根路径
超时：200000，//请求到期时间
标题：{
授权：token //token将请求头插入后端进行验证。
}
})
//拦截后端返回的请求
request . interceptors . response . use(RES={
if (res.status！==200) {
Message.error(某些错误.)//返回错误信息。
}
Return res.data //只取res中的数据，后续值不需要再写一层数据。
})
//导出
导出默认请求
2.配置
Main.js更改为以下内容
//介绍Axios -。
从导入请求。/请求
Vue.prototype.$http=request
//-
3.发送请求
1获取
这个。$http.get(index )。然后(res={
//返回的数据在res.data中
})
2post
这个。$http.post(login ，{user:admin ，pwd:123})。然后(res={
//返回的数据在res.data中
})
3并发性
var res1=this。$http.get(index )
var res2=this。$http.post(login ，{user:admin ，pwd:123})
这个。$http.all([res1，res2])。然后(这个。$http.spread(res1，res2)={
//两个请求的返回结果在res1和res2中
})
关于Vue使用axios发送请求并实现简单封装的这篇文章到此结束。关于Vueaxios发送请求封装的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。