axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
中文官网：www.axios-js.com/zh-cn/docs/
github地址：github.com/axios/axios…

1.安装

npm install axios --save
or
yarn add axios

2.使用

axios提供方法别名，也可以直接使用axios对象+config来确定请求类型和传参，方法别名不过是对axios的一层封装

2.1 axios(config)，axios(url, [config])

可以通过向 axios 传递相关配置来创建请求。其中config详细配置可见3，除了个别属性区分请求类型（get，post，put，delete）

import axios from 'axios';

import qs from 'qs';
// 发送post请求，传参用data
axios({
    method: 'post',
    url: '/add',
    data: {
        name: 'zgm',
        age: 17    
    }
});

// 发送get请求，传参用params
axios({
    method: 'get',
    url: '/getList',
    params: {
        name: 'zgm',
        age: 17    
    },
    // 序列化params参数-【可选】
    paramsSerializer: function(params) {
        return qs.stringify(params, {arrayFormat: 'brackets'})
    },
});

2.2 axios.get，axios.post

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]])

说明：
1.config配置与3中的配置完全一致；
2.post，put，patch请求将data提取到了参数列表里。当然也可以设置config.data来添加请求参数。

import axios from 'axios';

axios.get('/getList',{
    params: {
        name: 'zgm',
        age: 17 
    },
    responseType: 'json',
    timeout: 1000,
})

axios.post('/getList',data, {
    responseType: 'json',
    timeout: 1000,
})

3.全局配置

3.1 全局默认配置

在项目中任何一处进行配置，都是全局生效！

import axios from 'axios';

axios.defaults.baseURL = '/baseurl' // 配置axios请求的地址
axios.defaults.headers.post['Content-Type'] 
                                    = 'application/json; charset=utf-8';
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true;  //设置cross跨域 允许跨域携带cookie信息

3.2 自定义示例默认配置

import axios from 'axios';

const instance = axios.create({
    baseURL: '/baseurl'    
})// 此处配置和4中的config一致

instance.defaults.baseURL = '/baseurl' // 配置请求的base地址

3.3 全局拦截器

可以为请求全局添加请求拦截器和响应拦截器

//axios-init.js
import axios from "axios";

//配置发送请求前的拦截器 可以设置token信息
axios.interceptors.request.use(
  (config) => {
    // 这里配置全局loading
    if (!/\.json/.test(config.url)) {
      $("#screen").show(); // 这个div控制loading动画，项目中有对json的请求，所以这里区分是否是json文件
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 配置响应拦截器
axios.interceptors.response.use(
  (res) => {
    $("#screen").hide(); // loading结束
    return Promise.resolve(res.data); // 这里直接返回data, 即接口返回的所有数据
  },
  (error) => {
    $("#screen").hide();
    tooltip("", "连接错误！", "error");
    // 判断是否登录失效，按照实际项目的接口返回状态来判断
    if (error.toString().includes("776")) {
      window.location.href = window.location.origin + "/#/login";
    }
    return Promise.reject(error);
  }
);

export default axios;

4.完整config配置

详见官网：www.axios-js.com/zh-cn/docs/…

{
  // `url` 是用于请求的服务器 URL
  "url": "/user",

  // `method` 是创建请求时使用的方法
  "method": "get", // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  "baseURL": "https://some-domain.com/api/",

  // `headers` 是即将被发送的自定义请求头
  "headers": { "X-Requested-With": "XMLHttpRequest" },

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  "params": {
    "ID": 12345
  },

  // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  "paramsSerializer": function (params) {
    return Qs.stringify(params, { "arrayFormat": "brackets" });
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  "data": {
    "firstName": "Fred"
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  "timeout": 1000,

  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  "responseType": "json", // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  "responseEncoding": "utf8" // default
  ...
}

axios请求常见配置