前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >项目axios依赖版本更新

项目axios依赖版本更新

原创
作者头像
般般
发布2022-10-14 10:16:37
发布2022-10-14 10:16:37
2.7K00
代码可运行
举报
文章被收录于专栏:依赖库依赖库
运行总次数:0
代码可运行

一、更新背景

同一个接口,B请求快于A请求返回,页面展示的内容为A请求内容。于是有了取消请求的需求。

v0.22.0开始,Axios 支持以 fetch API 方式——AbortController取消请求:

代码语言:javascript
代码运行次数:0
运行
复制
const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

代码不生效,axios版本为v.0.21.0,最新版本为v1.12.1。

旧版本中断请求的方法已废弃,官方文档不推荐使用。

为更新版本整理了一下重要的迭代更新内容。


二、重要迭代内容

(迭代内容以时间排序)

v0.22.0

  • Fixed cancelToken leakage and added AbortController support (#3305)
代码语言:javascript
代码运行次数:0
运行
复制

    if (config.cancelToken || config.signal) {
      // Handle cancellation
      // eslint-disable-next-line func-names
      
        onCanceled = function(cancel) {
          if (req.aborted) return;
          req.abort();
          reject(!cancel || (cancel && cancel.type) ? new Cancel('canceled') : cancel);
          };
          
        config.cancelToken && config.cancelToken.subscribe(onCanceled);
          
        if (config.signal) {
        config.signal.aborted ? onCanceled() : config.signal.addEventListener('abort', onCanceled);
        }
    }

v0.23.0

  • Added testing to TypeScript portion of project (#4140)

v0.27.0

  • (*) Refactored error handling implementing AxiosError as a constructor, this is a large change to error handling on the whole (#3645)
代码语言:javascript
代码运行次数:0
运行
复制
'use strict';

var utils = require('../utils');

/**
 * Create an Error with the specified message, config, error code, request and response.
 *
 * @param {string} message The error message.
 * @param {string} [code] The error code (for example, 'ECONNABORTED').
 * @param {Object} [config] The config.
 * @param {Object} [request] The request.
 * @param {Object} [response] The response.
 * @returns {Error} The created error.
 */
function AxiosError(message, code, config, request, response) {
  Error.call(this);
  this.message = message;
  this.name = 'AxiosError';
  code && (this.code = code);
  config && (this.config = config);
  request && (this.request = request);
  response && (this.response = response);
}

utils.inherits(AxiosError, Error, {
  toJSON: function toJSON() {
    return {
      // Standard
      message: this.message,
      name: this.name,
      // Microsoft
      description: this.description,
      number: this.number,
      // Mozilla
      fileName: this.fileName,
      lineNumber: this.lineNumber,
      columnNumber: this.columnNumber,
      stack: this.stack,
      // Axios
      config: this.config,
      code: this.code,
      status: this.response && this.response.status ? this.response.status : null
    };
  }
});

var prototype = AxiosError.prototype;
var descriptors = {};

[
  'ERR_BAD_OPTION_VALUE',
  'ERR_BAD_OPTION',
  'ECONNABORTED',
  'ETIMEDOUT',
  'ERR_NETWORK',
  'ERR_FR_TOO_MANY_REDIRECTS',
  'ERR_DEPRECATED',
  'ERR_BAD_RESPONSE',
  'ERR_BAD_REQUEST',
  'ERR_CANCELED'
// eslint-disable-next-line func-names
].forEach(function(code) {
  descriptors[code] = {value: code};
});

Object.defineProperties(AxiosError, descriptors);
Object.defineProperty(prototype, 'isAxiosError', {value: true});

// eslint-disable-next-line func-names
AxiosError.from = function(error, code, config, request, response, customProps) {
  var axiosError = Object.create(prototype);

  utils.toFlatObject(error, axiosError, function filter(obj) {
    return obj !== Error.prototype;
  });

  AxiosError.call(axiosError, error.message, code, config, request, response);

  axiosError.name = error.name;

  customProps && Object.assign(axiosError, customProps);

  return axiosError;
};

module.exports = AxiosError;

  • New toFormData helper function that allows the implementor to pass an object and allow axios to convert it to FormData (#3757)

使用

源码

代码语言:javascript
代码运行次数:0
运行
复制
'use strict';

function combinedKey(parentKey, elKey) {
  return parentKey + '.' + elKey;
}

function buildFormData(formData, data, parentKey) {
  if (Array.isArray(data)) {
    data.forEach(function buildArray(el, i) {
      buildFormData(formData, el, combinedKey(parentKey, i));
    });
  } else if (
    typeof data === 'object' &&
    !(data instanceof File || data === null)
  ) {
    Object.keys(data).forEach(function buildObject(key) {
      buildFormData(
        formData,
        data[key],
        parentKey ? combinedKey(parentKey, key) : key
      );
    });
  } else {
    if (data === undefined) {
      return;
    }

    var value =
      typeof data === 'boolean' || typeof data === 'number'
        ? data.toString()
        : data;
    formData.append(parentKey, value);
  }
}

/**
 * convert a data object to FormData
 *
 * type FormDataPrimitive = string | Blob | number | boolean
 * interface FormDataNest {
 *   [x: string]: FormVal
 * }
 *
 * type FormVal = FormDataNest | FormDataPrimitive
 *
 * @param {FormVal} data
 */

module.exports = function getFormData(data) {
  var formData = new FormData();

  buildFormData(formData, data);

  return formData;
};

  • (*) Improved and fixed multiple issues with FormData support (#4448)

v1.0.0

  • Added automatic payload serialization to application/x-www-form-urlencoded

三、其他更新内容

v1.0.0

  • Refactored Axios to use ES2017 #4787
  • Replaced Rollup as our build runner #4596
  • Added stack trace to AxiosError #4624
  • Added axios-url-template in ECOSYSTEM.md #4238
  • Added a clear() function to the request and response interceptors object so a user can ensure that all interceptors have been removed from an Axios instance #4248
  • Adding HTTP status code for transformResponse #4580
  • Added blob to the list of protocols supported by the browser #4678
  • Bower platform add data protocol #4804
  • Add ENUM containing Http Status Codes to typings #4903
  • Resolving proxy from env on redirect #4436
  • Request ignores false, 0 and empty string as body values #4785

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、更新背景
    • 同一个接口,B请求快于A请求返回,页面展示的内容为A请求内容。于是有了取消请求的需求。
  • 二、重要迭代内容
    • 使用
    • 源码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档