npm 包 @wangcch/async-array 使用教程

简介

@wangcch/async-array 是一个基于 Promise 封装的异步数组处理工具库，可以帮助前端开发者轻松地进行数组的异步操作，例如并发请求、异步过滤、异步排序等。该库支持在 Node.js 和浏览器环境下使用。

安装

通过 npm 安装：

npm install @wangcch/async-array

使用说明

并发请求

使用 asyncMap 可以方便地进行并发请求，支持传入异步的请求处理函数和一个对象数组，用法如下：

const { asyncMap } = require('@wangcch/async-array');

const tasks = [
  { url: 'https://api.github.com/users/wangcch', method: 'GET' },
  { url: 'https://api.github.com/users/ruanyf', method: 'GET' },
  { url: 'https://api.github.com/users/sorrycc', method: 'GET' }
];

asyncMap(tasks, async ({ url, method }) => {
  const res = await fetch(url, { method });
  return res.json();
}).then(data => {
  console.log(data);
}).catch(err => {
  console.error(err);
});

该示例中，asyncMap 调用了三次 fetch 方法，每次传递不同的 url 和 method。asyncMap 返回一个 Promise，当所有请求均完成时，Promise 中包含了所有请求的数据。需要注意的是，请求函数必须是异步函数，且返回值需是 Promise 对象。

异步处理

使用 asyncFilter 和 asyncReduce 可以方便地进行数组的异步处理，用法和普通的 filter 和 reduce 方法类似。

• asyncFilter 传入异步的过滤处理函数和一个数组，只返回结果状态为 true 的元素，例子如下：

const { asyncFilter } = require('@wangcch/async-array');

const arr = [1, 2, 3, 4, 5];

asyncFilter(arr, async item => {
  const res = await fetch(`https://api.github.com/users/${item}`);
  const data = await res.json();
  return data.public_repos > 10;
}).then(res => {
  console.log(res); // [3, 4, 5]
}).catch(err => {
  console.error(err);
});

该示例中，asyncFilter 调用了 5 次 fetch 方法，每次传递不同的参数运行过滤函数。当满足过滤函数中的条件时，该元素会被保留。

• asyncReduce 传入异步的处理函数和一个数组，用于将一个数组的元素转化成一个值，例子如下：

const { asyncReduce } = require('@wangcch/async-array');

const arr = [1, 2, 3, 4, 5];

asyncReduce(arr, async (prev, item) => {
  const res = await fetch(`https://api.github.com/users/${item}`);
  const data = await res.json();
  return prev + data.public_repos;
}, 0).then(res => {
  console.log(res); // 146
}).catch(err => {
  console.error(err);
});

该示例中，asyncReduce 调用了 5 次 fetch 方法，每次传递不同的参数运行处理函数，最终将所有元素处理成一个累加值。

异步排序

使用 asyncSort 可以方便地对数组进行异步排序。调用该函数时，传入异步的处理函数即可，例子如下：

const { asyncSort } = require('@wangcch/async-array');

const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8];

asyncSort(arr, async (a, b) => {
  const resA = await fetch(`https://api.github.com/users/${a}`);
  const resB = await fetch(`https://api.github.com/users/${b}`);
  const dataA = await resA.json();
  const dataB = await resB.json();
  return dataA.public_repos - dataB.public_repos;
}).then(res => {
  console.log(res); // [3, 1, 5, 8, 9, 2, 6, 4, 5, 1, 5, 3]
}).catch(err => {
  console.error(err);
});

该示例中，asyncSort 调用了多次 fetch 方法，运行排序处理函数并按照结果进行异步排序。

总结

@wangcch/async-array 提供了方便且强大的异步数组处理工具库，支持多种场景的异步操作。通过本文的介绍和示例，相信读者可以轻松地和快速的使用该库进行开发。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53dcc