axios 是一个在前端开发中是使用频率极高的库。它既能运行在浏览器中，又可在 Node.js 后端项目中使用。本文主要结合自己的开发项目，谈一下 axios 在浏览器中的一些使用方法。
 

准备工作

安装axios

npm install axios 

引用

ES6 import引用

因为axios不是vue的插件，所以不能直接用use方法，需要将其加载到原型上。

import axios from 'axios'

如果要全局使用axios就需要在main.js中设置成全局的，然后再组件中通过this调用

Vue.prototype.$axios=axios;

使用

发送一个最简单的请求

这里我们发送一个带参数的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方法的第二个参数为请求参数对象。

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){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))

axios的API

以上通过axios直接调用发放来发起对应的请求其实是axios为了方便起见给不同的请求提供的别名方法。我们完全可以通过调用axios的API，传递一个配置对象来发起请求。

发送post请求，参数写在data属性中

axios({
  url: 'http://rap2api.taobao.org/app/mock/121145',
  method: 'post',
  data: {
    name: '小月'
  }
}).then(res => {
  console.log('请求结果：', res);
});

发送get请求，默认就是get请求，直接第一个参数写路径，第二个参数写配置对象，参数通过params属性设置。

axios('http://rap2api.taobao.org/app/mock/121145', {
  params: {
    name: '小月'
  }
}).then(res => {
  console.log('请求结果：', res);
});