axios的使用

axios是JavaScript中一个基于Promise的异步网络请求库，可以在浏览器和node.js中使用，它本质上是对原生XMLHttpRequest的封装。
axios的功能主要有：

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

axios的使用

引入

import axios from 'axios';

全局配置

可以给所有的请求设置公共的配置，例如：

// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个 绝对 URL。它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递 相对 URL
axios.defaults.baseURL = 'https://localhost:8080';

创建axios实例并做配置

通过创建的axios实例发起请求。可以对一组请求做公共配置，例如：

const httpService = axios.create({
    // 请求超时时间
    timeout: 300000 
});

发起请求

axios实例根据传入的配置对象发起请求

httpService({
    // `url` 是用于请求的服务器 URL，可以配合全局或者实例配置中的baseURL
    url: '',
    // `method` 是请求的方式
    method: 'get',
    // `params` 是与请求一起发送的 URL 参数
    params: {
        a:1
    },
    // `data` 是作为请求体被发送的数据
    // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
    data:{
        b:1
    }
})

axios封装了不同方式的请求方法：

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#getUri([config])

---

不同配置间的优先级：

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。

---

接收响应

httpService({配置对象}).then(response => {
    console.log(response);
})

在发出请求后使用then来处理响应，注意这个处理是是异步的。响应数据的结构如下：

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

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

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

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

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

  // `request` 是生成此响应的请求
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

错误处理

httpService({配置对象}).catch(error => {
    console.log(error);
});

在发出请求后使用catch来处理错误，错误主要分为三类：

• 请求发送成功并且收到服务器的响应但状态码超出了 2xx 的范围
• 请求发送成功但没收到响应
• 请求发送失败

可以通过判断error对象中的response与request对象是否存在来区分

拦截器配置

可以全局配置拦截器或者为某一实例配置
可以在请求发起前、收到响应后、请求错误、收到响应错误（状态码不是2xx）添加自定义操作

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });