什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。javascript

准备工做

安装axios

npm install axios

引用

ES6 import引用

由于axios不是vue的插件，因此不能直接用use方法，须要将其加载到原型上。vue

import axios from 'axios'

若是要全局使用axios就须要在main.js中设置成全局的，而后再组件中经过this调用java

Vue.prototype.$axios=axios;

使用

发送一个最简单的请求

这里咱们发送一个带参数的get请求，params参数放在get方法的第二个参数中，若是没有参数get方法里能够只写路径。若是请求失败捕获一下异常。node

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方法的第二个参数为请求参数对象。ios

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方法接收一个回调函数，该函数的参数就是每一个请求返回的结果。npm

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，传递一个配置对象来发起请求。axios

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

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);
});

axios的使用