@ckpack/fetch-helper

fetch-helper

中文 | ENGLISH

fetch-helper is a lightweight wrapper for the fetch API, only supported in browsers, if needed For use in node environment, please add fetch-node global dependency.

import fetch from 'node-fetch';
globalThis.fetch = fetch;

If you are using a node version greater than v17.5.0, you can enable the fetch API directly with the --experimental-fetch CLI flag

parameters

Promise fetchHelper(input[, init]);

• input: the requested url or Request object
• init: a configuration item object, including all the settings for the request, except all the configuration items that support native fetch Parameters also added the following parameters
  • interceptors: request interceptors, this parameter contains two attributes
    • request: contains an array of type (init, ctx) => init, triggered before the request is triggered, you can modify the request parameters by returning a new configuration item object
    • response: contains an array of type (response, ctx) => response, triggered after the request is triggered, you can use it to modify the returned response

ctx is the context of the current request instance, through which you can get or modify the current request's input, init and other instance parameters

return value

A Response [Response](https://developer.mozilla.org/ en-US/docs/Web/API/Response) object.

method

create(init])

You can use the create method to create an instance with a default config object

fetchHelper.create({
  method: 'GET',
  mode: 'cors',
  interceptors: {
    response: [(response, config) => {
      return response.json();
    }]
  }
});

fetchInstance(`some url`);

example

Set request header

fetchHelper(`some url`, {
  interceptors: {
    request: [(config) => {
      config.headers = new Headers({
        'Authorization': localStorage.getItem('token')
      });
      return config;
    }],
  }
});

Convert the returned result to json

fetchHelper(`some url`, {
  interceptors: {
    response: [(response) => {
      return response.json();
    }]
  }
});

Custom timeout

const fetchInstance = fetchHelper.create({
    interceptors: {
      request: [(config)=>{
        if(config.timeout){
          const controller = new AbortController();
          config.signal = controller.signal;
          setTimeout(()=> {controller.abort()}, config.timeout)
        }
        return config;
      }],
    }
});

fetchInstance('some url', {
  timeout: 6000,
});

custom baseURL

const fetchInstance = fetchHelper.create({
    baseURL: 'http://some.url',
    interceptors: {
      request: [(config, ctx)=>{
        ctx.input = `${config.baseURL}${ctx.input}`;
        return config;
      }],
    }
});

fetchInstance('/sub-url');

Changelog

0.0.6 (2022-03-04)

Features

• 添加文档 (93536ee)