Axios

参考官方文档：Axios 中文文档

Axios 和 Fetch 类似，都是基于 Promise ，用来发送网络求请求的

不同的是，Axios 是基于 Ajax 封装的，而 Fetch 是 ES6 中的原生API（这也是Fetch目前来看唯一优于 Axios 的地方，方便测试）

Fetch 请移步 FetchAPI

发送网络请求

 Axios 提供两种方式发送请求：

import axios from "axios"

　　1.配置项

axios(config)

　　2.请求方式别名

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

配置项

可以向 Axios 传递相关配置来创建请求

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

详细配置项参考：请求配置 | Axios 中文文档

别名

Axios 提供了一些请求别名的方法，可以直接发送指定别名的请求：

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

Axios 实例

在实际应用中，我们可以通过创建 Axios 实例来自定义默认请求配置：

const instance = axios.create({
  // baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。 
  // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  // timeout 指定请求超时的毫秒数。 
  // 如果请求时间超过 timeout 的值，则请求会被中断
  timeout: 1000
});

Axios 响应结构

当使用 then 时，将接收如下响应

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

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

默认配置

可以手动指定或修改默认的配置项，用于全局所有的请求或所有使用该实例的请求

全局 axios 默认值

通过 defaults 属性可以修改全局默认配置项

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

自定义实例默认值

同样通过实例的 defaults 属性修改当前默认配置项

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先级

配置将会按优先级进行合并。它的顺序是：显示全局的默认配置项，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。

错误处理

axios 支持使用 catch 捕获错误

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });