写了个axios适配器, 完美适配fetch请求, 用fetch替代XMLHttpRequest

1,079 阅读1分钟

工具名: axios-adapter-fetch, 具体原理和代码解析后面有空了补上, 先展示其用法, 希望对大家有帮助, 有不好的地方请指正哦.

为什么会写这个

平时工作中一般是用axios, 对其方法属性都比较熟悉了, 而且项目中的相关配置也比较庞大. 现在想使用fetch方法代替XMLHttpRequest, 就想在axios的基础上增加对fetch的支持, 所以写了这个对于fetch的适配器, 无需改动原来的axios接口逻辑, 任何属性方法都是一致且支持的(除了上传进度,这个fetch不支持)

优势

  1. 体积小, 压缩后不足1kb
  2. 使用fetch代替XMLHttpRequest
  3. 完全兼容axios原来方法, 文档见axios官网即可, 无fetch学习负担

安装和使用

安装axios和这个适配器

npm install axios
npm install axios-adapter-fetch

两种方式都可使用(关键在于adapter, 这个即是axios对应fetch的适配器):

  1. 创建Axios的新实例,并在配置中传递此适配器
import adapter from 'axios-adapter-fetch';

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  adapter
  ....
});
  1. 在每个请求中传递此适配器
import adapter from 'axios-adapter-fetch';

axios.request({
  url: '/user',
  method: 'get',
  adapter
  ...
})

注:

  • 这个适配器依赖于fetch API, 所以在nodejs中使用前提需要nodejs支持fetch API