背景

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
【更多互联网公司笔试面试真题请关注“让我遇见相似的灵魂”公众号】

因为知道了Axios，使用Vue请求数据的效率暴增！！！

文章目录

背景