axios https://www.jianshu.com/p/b26ccee660a6

1.安装

npm install axios

2.使用(可以使用json-serve 配合 axios 的使用)

        get ，post，put ，delete,

        axios()与axios.request()的使用方式一样

axios.request({
  method:'get',
  url:'http://localhost:3000'
})
  .then((res) {
    
  });

        参数config 配置对象 等。具体参考：https://www.kancloud.cn/yunye/axios/234845

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

    // `method` 是创建请求时使用的方法
    method: 'get', // 默认是 get

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

    transformRequest: [function (data, headers) {
        return data;
    }],
    transformResponse: [function (data) {
        return data;
    }],

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

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

    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,

    // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: false,
    adapter: function (config) {
    },
    auth: {
        username: 'janedoe',
        password: 's00pers3cret'
    },
    responseType: 'json',
    responseEncoding: 'utf8',
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',

    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0，将不会 follow 任何重定向
    maxRedirects: 5, // 默认的

    // 'proxy' 定义代理服务器的主机名称和端口
    // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 
       `Proxy-Authorization` 头。
    proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
   }，
   cancelToken: new CancelToken(function (cancel) {}) //可以用于取消请求
}

        axios 的默认配置

axios.defaults.baseURL ='https://www.baidu.com/'  设置 请求路径

axios.defaults.method = 'get'

instance.defaults.timeout= 2500  //设置超时时间

Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

axios 拦截器

axios.interceptors.request.use(function (config) {

    return config;
  }, function (error) {

    return Promise.reject(error);
  });


axios.interceptors.response.use(function (response) {
    
    return response;
  }, function (error) {
    
    return Promise.reject(error);
  });

axios 创建实例

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

axios 取消请求

let cancel = null;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function (c) {
        cancel = c
  })
}).catch(function (thrown) {
  
});

并发请求 以及  axios.spread 的使用

sendAjax() {
        // 请求1 get
        // 请求2 post
        this.$axios.defaults.baseUrl = 'http://127.0.0.1:8888';
        var res1 = this.$axios.get('/list');
        var res2 = this.$axios.post('add', 'a=1');
        this.$axios.all([res1, res2]).then(this.$axios.spread((res1, res2) => {
            // 请求成功
            this.res1 = res1.data;
            this.res2 = res2.data;
        })).catch(err => {
            // 请求失败
            console.log(err);
        });
}