axios是基于Promise的HTTP库，适用于浏览器与node.js

特色

浏览器端发起XMLHttpRequests请求
node端发起http请求
支持Promise API
拦截请求和返回
转化请求和返回（数据）
取消请求
自动转化json数据
客户端支持抵御XSRF（跨站请求伪造）

1.GET请求

axios.get('/user?id=123')
    .then(res=>{
       //请求数据成功并返回
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })
    
//可配置的方式实现上面的代码如下
axios({
    methods:'GET',
    url:'/user',
    params:{
        ID:123
    }
}).then(res=>{
        console.log(res);
  }).catch(err=>{
        console.log(error)
});

注意:使用GET方法传递参数时，使用的是 params，params作为url链接中的参数发送请求。

2.POST请求

axios.post('/user',{
    firstName:'homey',
    lastName:'lisa'
})
.then(res=>{
    console.log(res);
})
.catch(err=>{
    console.log(err);
});

//同等写法
axios(
{   method:'POST',
    url:'/user',
    data:{
        firstName:'homey',
        lastName:'lisa'
    }
})
.then(res=>{
    console.log(res);
})
.catch(err=>{
    console.log(err);
});

注意:使用POST请求时，传递参数用的是data，data作为请求体发送的，使用data的请求方法还有PUT、PATCH。

3.并行请求

function getUserAccount() {
  return axios.get('/user/123');
}

function getUserPermissions() {
  return axios.get('/user/123/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
   //两个请求现在都执行完成了
  }));

4.创建实例

通过自定义设置来创建一个新的实例 axios.create([config])

var instance = axios.create({
  baseURL:'https://something.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

4.1实例方法

以下是可用的实例方法，指定的配置将与实例的配置合并。

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

4.2 请求设置

这些是创建请求时可以使用的配置选项。只有 url 是必需的，如果没有指定的 method，请求将默认使用 get 方法。

{
    url:'/user',      //请求链接
    method：'GET',      //请求方式
    baseURL:'http://something.com/api' 统一的请求路径，如果url为相对路径，则加上该路径为真正请求数据的路径。
    headers:{'X-Requested-with':'XMLHttpRequest'},      //自定义请求头
    params/dtat：{      //请求参数，必须是一个纯对象,(请求参数为get时使用params，其他方式用data)
        ID:123;
    },
    timeout：1000，    //请求超时时间，超过该时间，请求停止。
    responsetype:'json/blob/document/text/stream',      //表明服务器返回的数据类型
    responseEncoding:'utf8'      //解析的编码方式
}

4.3响应参数

{
    data: {},      // 由服务器提供的响应
    status: 200,      // 来自服务器响应的 HTTP 状态码
    statusText: 'OK',      // 来自服务器响应的 HTTP 状态信息
    headers: {},      //服务器响应的头
    config: {}       // 是为请求提供的配置信息
  }

使用then来接收上面的返回结果

axios.get('/user/123')
    .then(function(response){
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
    });

5.默认配置

通过设置默认参数，在每次请求都会生效

5.1全局默认设置

axios.defaults.baseURL = 'https://api.something.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

5.2自定义实例默认设置

  var instance = axios.create({      // 创建实例时设置配置的默认值;
    baseURL: 'https://api.example.com'
  });
  instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;       // 在实例已创建后修改默认值

5.3配置的优先顺序

当次请求的设置>自定义实例设置>默认设置

 var instance = axios.create();      //使用默认的设置 比如默认超时时间为0
 instance.defaults.timeout = 2500;      //自定义超时时间，覆盖了默认的超时时间
 instance.get('/longRequest', {
    timeout: 5000
  });      //为当次请求设置超时时间，优先级高于自定义实例设置的超时时间

6.拦截器

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

6.1 请求拦截器

axios.interceptors.request.use(function (config) {      // 在发送请求之前做些什么
   return config;
    }, function (error) {      // 对请求错误做些什么
   return Promise.reject(error);
    });

6.2 响应拦截器

axios.interceptors.response.use(function (response) {      // 对响应数据做点什么
    return response;
  }, function (error) {      // 对响应错误做点什么
    return Promise.reject(error);
  });

6.3 移除拦截器

var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.request.eject(myInterceptor);

7.错误处理

 axios.get('/user/123')
      .catch(err=> {
        if (err.response) {      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          console.log(err.response.data);
          console.log(err.response.status);
          console.log(err.response.headers);
        } else {      // 在配置请求和触发报错之前做些什么
          console.log('Error', err.message);
        }
        console.log(err.config);
      })

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

 axios.get('/user/123', {
    validateStatus: function (status) {
      return status < 500;       // 状态码在大于或等于 500 时才会 reject
    }
  })

8.取消请求

使用CancelToken.source方法创建cancel Token

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/123', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {      // 处理错误
  }
});

source.cancel('Operation canceled by the user.');      // 取消请求（message 参数是可选的）

注意：可以使用同一个 cancel token 取消多个请求。

axios使用指南

特色