Table of Contents

• Features
• Browser Support
• Installing
  • Package manager
• Example
  • Creating
  • Use Promise
  • Use Async/Await
• FetchDriver API
• Drive options
• Middleware
• Abort fetch
• Promises
• License

Roadmap

• [x] Make fetch from the browser
• [x] Supports the Promise API
• [x] Intercept request and response
• [x] Transform request and response data
• [x] Automatic transforms for JSON data

Browser Support

| | | | | --- | --- | --- | --- | --- | >= 66 ✔ | >= 57 ✔ | >= 12.1 ✔ | >= 53 ✔ | >= 16 ✔ |

Why onion model

The basic principle of the Onion Model is to process HTTP requests through a series of middleware. Each middleware can perform specific operations before or after the request reaches the target handler. When a request is sent to the server, it passes through each middleware in sequence before being returned to the client.

By adding, removing, or modifying middleware, the request processing flow can be easily adjusted. This allows developers to customize request handling based on specific requirements.

The design of middleware allows them to be reused in different applications or projects. This saves development time and resources, and promotes code maintainability and scalability.

The structure of the Onion Model makes it easier to test each middleware individually. This enables quick identification and resolution of issues, improving code quality and reliability.

By adding logging and monitoring capabilities in appropriate middleware, it becomes possible to track, analyze, and monitor requests and responses. This helps diagnose issues, provide performance optimization, and enhance user experience.

In summary, the Onion Model offers a structured and customizable approach to handling HTTP requests. Its benefits include flexibility, scalability, and code reusability, allowing developers to better organize and manage the request processing flow.

Installing

Package manager

Using npm:

$ npm install @busymango/fetch-driver

Using yarn:

$ yarn add @busymango/fetch-driver

Using pnpm:

$ pnpm add @busymango/fetch-driver

Once the package is installed, you can import the library using import approach:

import FetchDriver from '@busymango/fetch-driver';

Example

Creating

You need create a instance of driver with a custom config.

import FetchDriver from '@busymango/fetch-driver';

const driver = new FetchDriver();

const { drive } = driver;

export { drive };

Use Promise

drive('/user?ID=12345').then(function (response) {
  // handle success
  console.log(response);
}).catch(function (error) {
  // handle error
  console.log(error);
}).finally(function () {
  // always executed
});

// Optionally the request above could also be done as
drive('/user', new URLSearchParams({
  ID: 12345
})).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
}).finally(function () {
  // always executed
});

Use Async/Await

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await driver('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Performing a POST request

drive.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

FetchDriver API

Requests can be made by passing the relevant config to fetch-driver.

drive(options)

drive({
  method: 'post',
  api: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

drive(api[, data, init])

// Will send a POST request
drive('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
});

Drive options

These are the available config options for making requests. Only the api is required.

export type DriveOptions = RequestInit & {
  // `api` is the server URL that will be used for the request
  api: string;
  // `data` is the data to be sent as the request body
  data?: object;
}

Middleware

Define general middleware

import { DriveMiddleware, FetchError } from '@busymango/fetch-driver'
import { catchMsg } from '@utils';

export const general: DriveMiddleware = async (context, next) => {
  try {
    await next();
  } catch (error) {
    if (error instanceof DOMException) {
      if (error.name === 'AbortError') {
        const params = { code: -1, context };
        throw new FetchError('Fetch timeout', params)
      }
    }
  }

  const { response, body } = context;

  if (!response) {
    throw new FetchError(
      'NetWork Error',
      { context, code: 500 },
    )
  }

  const { status, ok } = response;
  const res: unknown = body ?? await response.text();
  
  if (ok !== true) {
    throw new FetchError(
      catchMsg(res),
      { context },
    );
  }
}

Use general middleware

import FetchDriver from '@busymango/fetch-driver';

import { general } from './middlewares';

const { drive } = new FetchDriver([general]);

export { drive };

Abort fetch

await drive({
  api: '/user/12345',
  method: 'GET',
  timeout: 8000,
});

Promises

fetch-driver depends on a native ES6 Promise implementation to be supported. If your environment doesn't support ES6 Promises, you can polyfill.

License

MIT

是 fetch 的一个小包装器，旨在简化执行网络请求和处理响应的方式。 🪶 Small - core is less than 2KB g-zipped

💡 Intuitive - lean API, handles errors, headers and (de)serialization

🧊 Immutable - every call creates a cloned instance that can then be reused safely

🔌 Modular - plug middlewares to intercept requests

🦺 Type safe - strongly typed, written in TypeScript