js-xfetch

A Fetch request tool wrapper, convenient global management.

Fetch 被称为下一代 Ajax 技术，浏览器原生支持，采用 Promise 方式来处理数据。是一种简洁明了的 API，比 XMLHttpRequest 更加简单易用。

但是使用不太方便，本插件对 Fetch API 进行了了一次封装，解决了 Fetch API 原生的一些痛点，增加了一些常用功能并使用类初始化方便全局管理，具体功能如下。

• 浏览器原生支持
• 参数优化(参考 Axios)
• 自动转换请求与返回数据
• 增加请求/响应/错误拦截功能
• 增加超时设置
• 增加重试/重连设置
• 主动取消请求、取消重复请求、添加请求白名单(abortController)
• 请求头拦截处理(Headers)
• 日志输出，请求完成时的回调(无论是否成功) Hooks。
• 提供实例默认配置修改方法(timeout/baseUrl...)

Install

npm install js-xfetch -S

Import

// Es or Node
const {
  XFetch,
  XFetchContentType,
  XFetchHttpMethod,
  XFetchHeader,
  XFetchRequestConfig,
  XFetchOptions,
  CODE_MSG
} = require('js-xfetch');
import {
  XFetch,
  XFetchContentType,
  XFetchHttpMethod,
  XFetchHeader,
  XFetchRequestConfig,
  XFetchOptions,
  CODE_MSG
} from 'js-xfetch';
import XFetch from 'js-xfetch';

// Browser
<script src="xfetch.min.js"></script>
// const {
//   XFetch,
//   XFetchContentType,
//   XFetchHttpMethod,
//   XFetchHeader,
//   XFetchRequestConfig,
//   XFetchOptions,
//   CODE_MSG
// } = xfetch;

Use

$fetch = XFetch.create({
  baseUrl: '', // default: ''
  timeout: 5000, // timeout default: 30000
  cancelDuplicatedRequest: true, // Whether to cancel the duplicate request default: true
  // default: undefined
  retryConfig: {
    retry: 3, // count
    delay: 2000 // delay time
  },
  requestHandler: (config) => {
    console.log('requestHandler', config);
  },
  responseHandler: (response) => {
    console.log('responseHandler', response);
  },
  errorHandler: (error) => {
    if (XFetch.isCancel(error)) {
      return;
    }
    console.log('errorHandler', error);
  },
  setRequestHeaders: (config) => {
    console.log('setRequestHeaders', config);
    // return new Headers({});
    return config.headers;
  },
  requestFinally: () => {
    console.log('requestFinally Hooks'); // The callback when the request is completed, regardless of the result.
  }
});

$fetch
  .get('/test', { test: 1, v: 1 }) // params
  .then((data) => console.log(data))
  .catch((e) => console.log(e));

XFetch.post(
  '/test/post',
  { test: 'data' }, // data
  {
    // headers: Headers,
    // 'Content-Type': 'contentType',
    // autoContentType: Boolean,
    // qsStringifyOptions: { hasBrackets, hasIndex, arr2str, urlEncode }
  },
  true // WhiteList default: false
);

XFetch.request(
  XFetchHttpMethod.POST,
  '/test/post',
  {
    // params?: any;
    // data?: any;
    // headers?: XFetchHeader;
    // autoContentType?: boolean;
    // 'Content-Type'?: string;
    // qsStringifyOptions?: {
    //     arr2str?: boolean;
    //     hasIndex?: boolean;
    //     urlEncode?: boolean;
    //     hasBrackets?: boolean;
    // };
  },
  true // WhiteList default: false
);

XFetch.cancelRequest('reason');
XFetch.cancelWhiteListRequest('reason');
XFetch.qsStringify({ start: 0, count: 20, obj: { a: 1 }, arr: [1, 2, 3], str: '1' }, { hasIndex: true }); // 'start=0&count=20&obj[a]=1&arr[0]=1&arr[1]=2&arr[2]=3&str=1'
XFetch.qsParse('start=0&count=20&x=1&x=2&x=3'); // { start: '0', count: '20', x: [1, 2, 3], '/': 'start=0&count=20&x=1&x=2&x=3' };

API Docs

API Docs

Others

• Issue
• Pull Request
• [email protected]