axios - 2 - 参数字段

console.info

该系类文章旨在研究 axios 的实现 。在研究源码的基础上，去理解 axios 是如何实现 ajax 请求并更好的去使用这个库。

参数

说说在调用 axios 时，需要传入的参数。

// eg: axios(config)

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

以下是 axios github 上关于 config 可传入参数的具体描述

{
  // 请求地址
  url: '/user',

  // 请求方式
  method: 'get', // default

  // 请求地址的默认前缀
  baseURL: 'https://some-domain.com/api/',

  // 用于改变请求的函数数组
  transformRequest: [(data, header) => {
    // 改变请求内容
    // 仅仅需要 return data 即可
    return data;
  }],

  // 用于改变响应内容的函数数组
  transformResponse: [(data) => {
    // 改变响应内容
    return data;
  }],

  // 公共头信息添加
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // 添加 queryString
  params: {
    ID: 12345
  },

  // 修改 queryString 的编写方式
  paramsSerializer(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // 需要传递的数据，比如 post / json
  data: {
    firstName: 'Fred'
  },

  // 设置请求超时时间
  timeout: 1000,

  // 是否需要认证
  withCredentials: false, // default: false

  // 自定义请求发送器，一般不去修改
  // 默认使用封装了 XMLHttpRequest 的发送器
  adapter (config) {
    /* ... */
  },

  // 需要认证时使用的用户名和密码
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // 响应返回类型
  responseType: 'json', // default

  // 跨域攻击问题
  xsrfCookieName: 'XSRF-TOKEN', // default

  // 跨域攻击问题
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

  // 上传时的钩子
  onUploadProgress: function (progressEvent) {
    // 处理数据
  },

  // 下载时的钩子
  onDownloadProgress: function (progressEvent) {
    // 处理数据
  },

  // 响应的最大数据量
  maxContentLength: 2000,

  // 用于判断响应是否为有效响应
  validateStatus (status) {
    return status >= 200 && status < 300; // default
  },

  // 定义最多被重定向几次
  maxRedirects: 5, // default

  // 自定义发出 http 或是 https 的客户端
  // 用于 node.js
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 如果需要代理的话，添加代理信息
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // 取消请求的钩子
  cancelToken: new CancelToken(function (cancel) {
    // ... 处理逻辑
    cancle('cancle message'); // 调用即可取消该请求，需传入取消信息。
    // ... 处理逻辑
  })
}