/ javaScript

axios -- 2:config 调用 axios 时传递的参数

console.info

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

参数

config 为调用 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: [function (data, header) {
    // 改变请求内容
    return data;
  }],

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

  // 头信息
  headers: {'X-Requested-With': 'XMLHttpRequest'},

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

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

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

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

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

  // 自定义请求发送器,一般不去修改,使用默认的请求发送器
  adapter: function (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: function (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'); // 调用即可取消该请求,需传入取消信息。
    // ... 处理逻辑
  })
}