async-chaining

The async-chaining library provides a toolkit for creating asynchronous chains of method and property calls. With its help, you can effectively manage asynchronous operations, increasing the efficiency and convenience of development.

Live demo

Table of Contents

• Why?
• Getting started
• API
• Examples
  • await
  • .then .catch .finally
  • axios
• Pros
• Limitations

Why?

During the development process, we often encounter cases when we need to use a chain of asynchronous calls. For convenience, JavaScript provides us with additional tools in the form of promises and async/await constructs. About promise chaining

fetch('/article/promise-chaining/user.json')
  .then(response => response.json())
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  .then(response => response.json())
  .then(githubUser => console.log(githubUser.avatar_url));

The main disadvantage is that we have to write a lot of additional code. The library async-chaining offers a more convenient way to work with a chain of asynchronous calls.

async()
  .fetch('/article/promise-chaining/user.json')
  .json()
  .chain(user => fetch(`https://api.github.com/users/${user.name}`))
  .json()
  .avatar_url
  .then(console.log);

Getting Started

To install, run:

npm i async-chaining -S

Import async function and call it. You can also add asynchronous result properties and methods, prototypes, and array accessors to the chain. If there is an undefined property at any point in the chain or an error occurs, the entire result will return null.

import { async } from 'async-chaining';

async()
  .fetch('https://api.github.com/repositories')
  .json()
  .find(repo => repo.name === 'ambition')
  .id;

API

async(data, options): Proxy

The arguments are optional, but you can send a promise or some other data with the first argument, and options with the second argument

async(fetch('https://api.github.com/repositories'), { 
  debug: true, // default false - see more details .debug()
  strict: true // default false - throws an error if the method or property does not exist
})
  .fetch('https://api.github.com/repositories')
  .json()

.chain(fun): Promise<fun.apply(Transfered data)>

You can also use a special .chain method to combine chains by passing a function to the method. The function will take as arguments the result of the execution of the previous promise.

async()
  .fetch('https://api.github.com/repositories')
  .json()
  .find(repo => repo.name === 'ambition')
  .id
  .chain((id) => fetch('https://api.github.com/repositories/' + id))
  .json()
  .watchers;

.progress(fun): Transfered data

The .progress method accepts a function to which the data from the previous step is passed, but the .progress method does not return the data, unlike the .chain method. Can be used to update the progress of the execution of the chain.

async()
  .progress(() => console.log('start'))
  .fetch('https://api.github.com/repositories')
  .progress(() => console.log('in progress'))
  .json()
  .progress(() => console.log('end'));

.debug(): Transfered data

The .debug method can help you to debug the chain. Its call activates debugging mode and each step of the chain will be logged into the console.

async()
  .debug()
  .fetch('https://api.github.com/repositories/26')
  .json()
  .watchers;

// trap get: add microtask, target: [object Window], property: fetch
// trap apply: add microtask, data: [object Window],function fetch() { [native code] }
// trap get: add microtask, target: [object Response], property: json
// trap apply: add microtask, data: [object Response],function json() { [native code] }
// trap get: add microtask, target: [object Object], property: watchers

Examples

await

(async () => {
  const repoId = await async(fetch('https://api.github.com/repositories'))
    .json()
    .find(repo => repo.name === 'ambition')
    .id;
    
  console.log(repoId);
})();

.then .catch .finally

async()
  .fetch('https://api.github.com/repositories')
  .json()
  .then(console.log)
  .catch((e) => console.err(e))
  .finally(() => console.log('finally'))

axios

import axios from 'axios';

const a = async(axios.get('https://api.github.com/repositories'))
  .data
  .find(repo => repo.name === 'ambition')
  .id
  .then(console.log);

Pros

There are some other packages for a similar use case, but this one is:

• Tiny: ~20KB minified.
• Well tested: 100% test coverage.
• Safe: No known vulnerabilities according to npm audit.
• Self contained: No external dependencies (only devDependencies).

Limitations

The library supports use in the browser and is implemented using a built-in Proxy object that allows you to intercept calls in the chain. Browser Compatibility