1.axios是什么?

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，API。

2.axios的特点

1）从浏览器中创建 XMLHttpRequest
2）支持 Promise API
3）客户端支持防止CSRF
4）提供了一些并发请求的接口（重要，方便了很多的操作）
5）从 node.js 创建 http 请求
6）拦截请求和响应
7）转换请求和响应数据
8）取消请求
9）自动转换JSON数据

3.axios的安装

npm安装:npm i axios

bower安装:bower i axios

cdn安装：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.常用api说明

执行一个GET请求
const axios = require('axios');

// 向具有给定ID的用户发出请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 响应 success
    console.log(response);
  })
  .catch(function (error) {
    // 响应 error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// 上面的请求也可以通过下面params传递参数的方式实现
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

执行一个post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');   //请求1
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');   //请求2
}

axios.all([getUserAccount(), getUserPermissions()])   //两个请求放到数组中传递给all()
  .then(axios.spread(function (acct, perms) {   //多个请求都发送完毕，拿到返回的数据
    // 两个请求现在都执行完成
  }));

axios中的all()方法，传入一个数组，数组元素即为函数调用，函数中即为请求调用。
然后，then()回调方法中调用axios自己的spread()方法。  


通用请求axios(config)，通过向 axios 传递相关配置config对象来创建请求  

 axios({
  methods: 'post',
  url: 'http://jsonplaceholder.typicode.com/users',
  data: {
  name: 'qiurx'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

5.创建实例

可以使用自定义配置新建一个 axios 实例axios.create([config])  

//create创建一个新的实例对象
var instance = axios.create({
   url: 'http://jsonplaceholder.typicode.com/users',
   imeout: 3000,
   method: 'post'
});
//即可调用方法，和axios实例同
instance.get('http://jsonplaceholder.typicode.com/users').then(Response=>{
   console.log(Response);
});

 6.拦截器

在请求或响应被 then 或 catch 处理前拦截它们。  

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

也可以将拦截器添加到axios的自定义实例。 

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});