Axios-介绍

起步

适用于nodejs和浏览器的基于promise的http客户端

特征

• 在浏览器发起XMLHttpRequest请求
• 在nodejs中发起http请求
• 支持promise api
• 拦截请求和响应
• 转化请求和响应数据
• 取消请求
• JSON数据自动转化
• 客户端支持保护XSRF跨站请求伪造

发起请求

axios(fn)

    export const getBooks = async () =>
      axios({
        method: 'post',
        url: '/user/12345',
        data: {
          firstName: 'Fred',
          lastName: 'Flintstone',
        },
      })

请求别名

• 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 instance 实例

实例可执行上述请求别名方法，instance执行方法传入的config与创建实例传入的参数将合并成最终request参数

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

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

Request config

下面是request config配置，只有url必传的，默认使用get方法

export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method;
  baseURL?: string;
  transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
  transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
  headers?: AxiosRequestHeaders;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: D;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapter;
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  responseEncoding?: responseEncoding | string;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: ((status: number) => boolean) | null;
  maxBodyLength?: number;
  maxRedirects?: number;
  socketPath?: string | null;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
  decompress?: boolean;
  transitional?: TransitionalOptions;
  signal?: AbortSignal;
  insecureHTTPParser?: boolean;
}

Response 概要

    export interface AxiosResponse<T = any, D = any>  {
      data: T;
      status: number;
      statusText: string;
      headers: AxiosResponseHeaders;
      config: AxiosRequestConfig<D>;
      request?: any;
    }

Config Defaults

Global 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';

Custom intance default

    const instance = axios.create({
      baseURL: 'https://api.example.com'
    });

    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

config排序

优先级从低到高依次为： lib/defaults中configs、实例默认defaults属性、每个请求中配置的config

    // 读取lib/defaults中的config timeout:0
    const instance = axios.create();

    // 实例defaults属性配置configs, 设置timeout: 2500ms
    instance.defaults.timeout = 2500;

    // request传入timeout，复写实例defaults中的timeout属性
    instance.get('/longRequest', {
      timeout: 5000
    });

Interceptors

拦截器可以在then、catch处理请求或者响应之前拦截他们

// Add a request interceptor
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  return response;
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error);
});

CancelLation

取消请求

AbortController

构造函数传入signal

import Axios from 'axios';
const controller = new AbortController();

export const fetch = Axios({
  method:'post',
  url: 'xxx',
  signal: controller.signal
})

// 取消请求
controller.abort();

CancelToken

构造函数传入cancelToken

• axios CancelToken api是基于已撤回的cancelable promises proposal提案
• 从v0.22.0视为废弃，不建议在新项目使用
• 在过度期间，CancelToken和 AbortController都可以取消请求

    // 第一种 利用CancelToken，生成source对象
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    axios.get('/user/12345', {
      cancelToken: source.token
    }).catch(function (thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // handle error
      }
    });

    axios.post('/user/12345', {
      name: 'new name'
    }, {
      cancelToken: source.token
    })

    // 取消请求
    source.cancel('Operation canceled by the user.');
    
    
    // CancelToken实例化传入函数作为参数，这个函数接受cancel参数作为最终取消方法
    const CancelToken = axios.CancelToken;
    let cancel;

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

    // 取消请求
    cancel();