https://github.com/pandaoh/js-xfetch

JavaScript Fetch Class. Fetch 的二次封装，便捷好用。
https://github.com/pandaoh/js-xfetch

fetch js-fetch js-xfetch request x-request xfetch xrequest

Last synced: 2 months ago
JSON representation

JavaScript Fetch Class. Fetch 的二次封装，便捷好用。

• Host: GitHub
• URL: https://github.com/pandaoh/js-xfetch
• Owner: pandaoh
• License: mit
• Created: 2022-04-25T06:38:17.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T02:13:29.000Z (about 1 year ago)
• Last Synced: 2024-04-25T16:41:41.521Z (10 months ago)
• Topics: fetch, js-fetch, js-xfetch, request, x-request, xfetch, xrequest
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/js-xfetch
• Size: 59.6 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```bash

npm install js-xfetch -S

```

## Import

```javascript

// 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

// const {

//   XFetch,

//   XFetchContentType,

//   XFetchHttpMethod,

//   XFetchHeader,

//   XFetchRequestConfig,

//   XFetchOptions,

//   CODE_MSG

// } = xfetch;

```

## Use

```javascript

$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](https://github.com/pandaoh/js-xfetch/blob/main/docs/README.md)

## Others

* [Issue](https://github.com/pandaoh/js-xfetch/issues)

* [Pull Request](https://github.com/pandaoh/js-xfetch/pulls)

* [[email protected]](mailto:[email protected])