You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@busymango/fetch-driver

Package Overview
Dependencies
Maintainers
0
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@busymango/fetch-driver

fetch with middlewares for the browser


Version published
Maintainers
0
Created

Readme

Source

Fetch Driver

fetch with middleware for the browser

npm version install size npm package minimized gzipped size npm downloads

Table of Contents

Roadmap

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

Browser Support

ChromeFirefoxSafariOperaEdge
>= 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

Keywords

FAQs

Package last updated on 11 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc