文章目录
背景
JQuery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式。
什么?还不知道?还不知道就自己去补课,我默认大家都知道了。算了我是暖男,在贴一下给大家看看,下次可别忘了哈。
什么是Axios?
Axios是基于Promise的Http客户端,可以在浏览器和node.js中使用。
为啥使用Axios?
Axios非常适合前后端数据交互,另一种请求后端数据的方式是vue-resource,vue-resource已经不再更新了,且只支持浏览器端使用,而Axios同时支持浏览器和Node端使用。
Vue开发者推荐使用更好的第三方工具,这就是Axios
安装
你可能会说,概念我知道了,第三方工具怎么在Vue中安装使用呢?
emm = = 安排
npm安装
npm install axios --save
bower install axios --save
直接script标签引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
ES6 import引用
因为axios不是vue的插件,所以不能直接用use方法,需要将其加载到原型上。
import axios from 'axios'
axios.get();
全局配置
如果要全局使用axios就需要在main.js中设置成全局的,然后再组件中通过this调用
Vue.prototype.$axios = axios;
this.$axios.get();
使用
发送一个最简单的GET请求
这里我们发送一个带参数的get请求,params参数放在get方法的第二个参数中,如果没有参数get方法里可以只写路径。如果请求失败捕获一下异常。
axios
.get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
params: {
id: 5
}
})
.then(res => {
console.log('数据是:', res);
})
.catch((e) => {
console.log('获取数据失败');
});
发送一个POST请求
当然,我们也可以发送一个POST请求,post方法的第二个参数为请求参数对象。
this.$axios.post('http://rap2api.taobao.org/app/mock/121145/post',{
name: '小月'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
一次合并发送多个请求
分别写两个请求函数,利用axios的all方法接收一个由每个请求函数组成的数组,可以一次性发送多个请求,如果全部请求成功,在axios.spread方法接收一个回调函数,该函数的参数就是每个请求返回的结果。
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(res1,res2){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
求职必备刷题官网:https://github.com/bennyrhys/interview
【更多互联网公司笔试面试真题请关注“让我遇见相似的灵魂”公众号】
![](https://img-blog.csdnimg.cn/20200501130105916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2OTY4MA==,size_16,color_FFFFFF,t_70)