axios的config配置以及拦截器

2021-9-18 15:09:09

#axios#http

21

前言

最近在试着封装axios请求，以便更好的管理自己的api接口，因此便去axios的官方文档查看，结果发现文档一大串都是英文。 为了方便自己阅读和理解，在此翻译并注释一下官方文档。 官方文档

正文

Config配置项

这些都是用于创建请求的可用配置选项。 只有url是必填，如果method是空的，那么请求是默认为get。

{
  // `url` 是请求的服务器地址
  url: '/user',

  // `method` 是请求的方法如post，get等
  method: 'get', // 默认

  // 除非 `url` 是绝对路径， 不然`baseURL`会被放在 `url` 前拼接成完整的api路径， 
  // 设置 `baseURL` 为axios实例传递相对url提供了便利
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许你在请求发送前改变request请求数据（data）
  // 仅适用于  'PUT', 'POST' 和 'PATCH' 请求方法
  // 这个函数数组中的最后一个函数必须返回一个String或者Buffer, ArrayBuffer,FormData or Stream的实例
  // 你也可以修改header对象.
  transformRequest: [function (data, headers) {
    // 此处修改data的地方

    return data;
  }],

  // `transformResponse` 允许你在response被传递给then/catch前改变response
  // it is passed to then/catch
  transformResponse: [function (data) {
    // 此处修改data

    return data;
  }],

  // `headers` 配置将被发送的自定义的header
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 与请求一起被发送的url参数
  // 必须是一个普通对象或者是一个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` 作为request body被发送
  // 仅在 'PUT', 'POST', and 'PATCH'方法可用
  // 当 `transformRequest` 没有被设置时, 必须是以下类型:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // `timeout` 定义了多少毫秒请求超时.
  // 如果请求花费的时间大于 `timeout`, 请求会被终止.
  timeout: 1000, // 默认为 `0` (无超时)

  // `withCredentials` 指示是否使用凭证码来进行跨域访问控制请求
  withCredentials: false, // 默认

  // `adapter` 允许自定义请求处理来使测试更加简单.
  // 返回一个promise并提供一个有效请求 (see lib/adapters/README.md).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 指示应该使用HTTP基本身份验证，并提供凭据。
  // 此项会设置一个 `Authorization` 请求头, 覆盖任何现有的你的 `Authorization` 自定义请求头
  // `Authorization` custom headers you have set using `headers`.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 指示了服务器响应的数据类型格式
  // 可选项有 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认

  // `responseEncoding` 指示用于解码响应的编码  
  // Note: 当 `responseType` 是 'stream' 或者 是客户端请求是会被忽略
  responseEncoding: 'utf8', // 默认

  // `xsrfCookieName` 是作为XSRF令牌的值的cookie的名字
  xsrfCookieName: 'XSRF-TOKEN', // 默认

  // `xsrfHeaderName` 是用于携带xsrf token的值的http请求头的名字
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认

  // `onUploadProgress` 允许处理上传的进度事件
  onUploadProgress: function (progressEvent) {
    // 处理进度事件的代码处
  },

  // `onDownloadProgress` 允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
    // 处理进度事件的代码处
  },

  // `maxContentLength` 定义了允许的http响应内容的最大字节数
  maxContentLength: 2000,
  // `validateStatus` 定义了根据响应状态码是否resolve或者reject 该promise，如果返回了true（或者null,undefined），promise会被solve，否则为reject
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  // `maxRedirects` 定义了node.js中要遵循的最大重定向数量。
  // 如果设置为0，不遵循重定向.
  maxRedirects: 5, // 默认

  // `socketPath` 定义了要在node.js中使用的UNIX socket
  // e.g. '/var/run/docker.sock' 发送请求给docker容器.
  // 只能指定 `socketPath` 或者 `proxy` 
  // 如果都被指定了, `socketPath` 会被使用.
  socketPath: null, // 默认

  // `httpAgent` and `httpsAgent` 定义了一个自定义代理分别执行http和https请求
  // `keepAlive` 默认状态是不启用的
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义了 hostname 和代理服务器的端口.
  // 你也可以用传统 `http_proxy`和`https_proxy`环境变量来定义你的代理（proxy)
  // 如果你在使用环境变量定义代理配置，你也可以定义一个`no_proxy`环境变量作为一个用逗号分隔的不应该被代理的域列表
  // 使用`false`来禁用代理，忽略环境变量
  // `auth`表明使用该HTTP基本身份验证连接到代理，并且提供凭证
  // 这将设置一个 `Proxy-Authorization` 头覆盖任何你已经用`headers`设置的`Proxy-Authorization` 自定义头
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定一个可用于取消请求的取消token
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
}

拦截器（Interceptors）

你可以用then或者catch来在请求或者响应被处理前拦截

// 添加一个请求拦截器
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);
  });

可以像如下代码移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

也可以像如下给一个自定义的axios实例增加拦截器

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});