本篇文章为大家展示了如何在Vue项目中使用axios,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
Axios 是一个用于实现网络数据请求的JavaScript库,可以用在网页和 node.js 中,用于创建 XMLHttpRequests,vue官方支持使用axios代替vue--resourse来实现网络数据请求。
使用前需要在你的项目中安装axios,例如通过npm安装库:
npm install --save axios
接着在项目中引入axios:
import axios from 'axios'
直接使用axios的全局变量来调用get方法,get中第一个参数传递url,第二个参数是相关配置,在其中可以传递params参数(参数以?形式加在url末尾),进行header的设置等。使用.then接收返回值,可以采用函数来处理返回结果res,其中res.data或者res.body是返回的数据。使用.catch捕获异常,并可以打印错误信息参数error。
axios.get('data/zodiac.json',{
params:{
id:"101"
},
header:{
token:"axios"
}
}).then(res =>{
this.msg=res.data;
}).catch(error =>{
console.log(error);
})
post方法调用、回掉、异常捕获的使用与get类似。不同的是其参数分为三个,第一个是url地址,第二个是要传递的数据,第三个是传输选项配置。与get方法不同,post专门使用第二个参数进行数据传递,而不像get中将数据设置在配置选项params中。
axPost(){
axios.post('./data/test.php', //url
{ //发送的数据
userId:'105'
},
{ //option选项
headers:{
token:"axPost"
}
}
).then(res =>{ //接收结果
this.msg=res.data;
}).catch(err=>{ //处理错误
this.msg=err;
})
}
也可以直接使用http进行数据请求,直接进行url、method、data、headers、params等的设置,例如使用http发送post请求:
axios({
url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json",
method:"post",
data:{
userId:"106"
},
headers:{
token:"axHttp"
}
}).then(res=>{
this.msg=res.data;
})
axios也提供了在网络请求发送前与数据返回时进行拦截的函数interceptors,以便进行相关处理。例如在发送前使用request.use拦截,进行你想要的执行的操作后再将config返回出去,在请求返回时使用response.use进行拦截,操作后再将结果返回:
axios.interceptors.request.use(config =>{
console.log("axois请求");
return config;
});
axios.interceptors.response.use(res =>{
console.log("axois回调");
return res;
})
上述内容就是如何在Vue项目中使用axios,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。