Axios使用总结

特点

浏览器生成XMLHttpRequests
node使用http发送请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
自动数据对象序列化为multipart/form-data 和 x-www-form-urlencoded body encodings
客户端支持防御 XSRF

使用方法（三种）

注意：这里的三种仅仅是常用的三种，axios配置比较灵活，所以一些简写或者其他写法文章并未涉及到

方法一：通过 axios API直接请求 (两种语法形式)

单独使用axios API，将相关配置（config：参考下面的"请求配置"）传递给axios发出请求

语法1： axios(config);

js 复制代码

import axios from 'axios';

axios({
  url: '/user/test',
  method: 'post',
  data: {
     firstName: 'Fred',
    lastName: 'Flintstone',
  },
});

语法2： axios(url[, config]); 方括号表示括号的内容可选

注意：这里如果config中也设置了url，那么config中的url会被外层的url给覆盖。

js 复制代码

import axios from 'axios';

axios('/user/test', {
  url: '/user/inner', // 会被覆盖，无效设置
  method: 'post',
  data: {
     firstName: 'Fred',
     lastName: 'Flintstone',
  },
});

方法二： 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]]);

注意：当使用方法别名时，url、method、data属性不需要在config中指定。(定义了也会无效)

js 复制代码

import axios from 'axios';

axios.post('/user/test', {
     firstName: 'Fred',
     lastName: 'Flintstone',
});

js 复制代码

import axios from 'axios';

axios.post('/user/test', 
  {
    firstName: 'Fred',
    lastName: 'Flintstone',
  },
  {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
  },
);

方法三：创建axios实例

实例方法

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

instance.getUri(config); 注意: config合并时是类似Object.assign()的覆盖，而不是整个覆盖，见下方代码注释的分析

js 复制代码

import axios from 'axios';


const instance = axios.create({
    headers: { 'X-Custom-Header': 'foobar', 'Content-Type': 'multipart/form-data',},
  });

instance.post(
    'https://httpbin.org/post',
    { bar: 456 },
    {
      headers: {
        'X-Custom-Header': 'test', // 会覆盖instance最初定义时设置的headers
      },
      // 最终的headers:
      // headers: {
      //   'X-Custom-Header': 'test',
      //   'Content-Type': 'multipart/form-data',
      // },
      // 由此可以看出是类似Object.assign的覆盖，而不是直接 = 的覆盖
      // 如果是直接 = 的覆盖那最终headers应该是
      // headers: {
      //   'X-Custom-Header': 'test',
      // },
    },
);

请求配置（config）

以下是发出请求时的可用配置项，仅url是必须的（required），如未指定method，请求方法将默认为get方法。

js 复制代码

{
  // 用于请求的服务端的url
  url: '/user',  


  // 请求时的方法
  method: 'get',


  // 如果设置此属性，'baseURL'将在请求时自动加在每一个'url'前面，除非'url'是一个绝对URL
  // 为 axios 实例设置 'baseRUL' 可以很方便的将相对URLs传递给该实例的方法
  baseURL: 'https://some-domain.com/api/',


  // 'transformRequest' 允许在请求数据发送到服务端之前对请求数据进行修改
  //  仅仅适用于 'PUT' 、'POST'、 'PATCH' 、'DELETE'
  //  数组中最后一个函数必须返回一个 string或 Buffer、ArrayBuffer的实例或者FormData或者数据流
  //  可以在 'transformRequest' 中修改 headers对象
  transformRequest: [function (data, headers) {
    // 转换请求数据的逻辑

    return data;
  }],


  // 'transfromResponse' 支持在响应数据传递给 then/catch 之前对响应数据进行更改
  transfromResponse: [function (data) {
  // 转换响应数据的逻辑

    return data;
  }],


  // 定义请求头
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },


  // 跟随请求一起发送的URL参数
  // 必须是 plain object 或者是 URLSearchParams 对象 
  //（plain object 和 URLSearchParams 对象的相关概念见下方）
  // 
  params: {
    ID: 12345,
  },


  // 'paramsSerializer' 是一个可选配置，支持使用者自定义序列化 'params' 的方法
  paramsSerializer: {
  
    // 自定义编码器函数，以迭代方式发送键/值对
    encode?: (params: string): string => {
      // 自定义操作并返回转换后的字符串
    },
    
    // 整个参数的自定义序列化器函数
    serialize?: (params: Record<string, any>, options?: ParamsSerializerOptions),

    // 在参数中格式化数组索引的配置
    // 三个可用的选项：
    // 1.indexes: null, 无括号
    // 2.indexes: false, 空括号[]
    // 3.indexes: true, 带有索引的括号，如[1]
    indexes: false,
  }

  // 作为请求体的数据
  // 仅适用于请求方法 'PUT' 、'POST'、 'DELETE'、 'PATCH'
  // 当没有设置 'transformRequest' 时，必须是以下类型之一：
  // string、plain object 、 ArrayBufferView 、URLSearchParams
  // 浏览器独有：FormData 、 File Blob
  // Node独有: Stream 、Buffer 、FormData (form-data package)
  data: {
    firstName: 'Fred',
  },

  // 请求超时的毫秒数
  // 超过此时间，请求将被终止
  // 默认是0，无超时
  timeout: 1000,


  // 表示cross-site Access-Control 类型的请求是否应该使用凭据
  withCredentials: false, // default


  // 'auth' 表示应该使用 HTTP 基础验证，并提供凭据
  // 设置了'auth'之后，将自动添加一个'Authorization' header,
  // 它会覆盖自定义headers（使用'headers'字段定义的）中的可能有的'Authorization' 
  auth: {
    username: 'janedoe',
    password: 's00pers3cret',
  },


  // 'responseType' 标识服务端将响应的数据类型
  // 可选项有：'arraybuffer' 、'document' 、'json' 、'text' 、'stream' 
  // 浏览器独有：'blob'
  responseType: 'json', // default

  
  // responseEncoding 指示用于解码响应数据的编码 （仅仅用于 Node.js）
  responseEncoding: 'utf8', // default


  // 'onUploadProgress' 支持对上传过程进行事件处理
  onUploadProgress: function ({loaded, total, progress, bytes, estimated, rate, upload =true}) {
    // 使用Axios进度事件的自定义逻辑
  }

  // 支持对下载过程进行事件处理
  onDownloadProgress: function ({loaded, total, progress, bytes, estimated, rate, download = true}) {
    // 使用Axios下载进度事件的自定义逻辑
  }


  // 'cancelToken' 指定用于取消请求的请求令牌
  cancelToken: new CancelToken(function (cancel) {
    
  })

  // 取消请求的另一种方法，使用 AbortController
  signal: new AbortController().signal,


  // 'validateStatus'定义了通过响应数据给定的 status 码，promise的状态设置为resole还是reject
  //  当validateStatus返回'true'或被设置为'null' 或 'undefined',promise将会resolved,
  //  否则，promise将会rejected.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  }
  
}

参考链接

github.com/axios/axios

以上内容如有问题，望多多指正！

Axios使用总结

Axios使用总结

特点

使用方法 （三种）

方法一：通过 axios API直接请求 (两种语法形式)

方法二： axios方法别名

方法三： 创建axios实例

请求配置 （config）

相关概念

plain object

URLSearchParams

参考链接

使用方法（三种）

方法三：创建axios实例

请求配置（config）