NPM 包 sequently 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常会遇到需要串行执行一些异步任务的情况，如先请求数据，再渲染页面。在 Node.js 环境下，我们可以使用 async 和 await 关键字来解决这个问题，但在浏览器环境下，这些关键字并不支持，因此我们需要借助工具来实现。这里介绍一款 NPM 包 sequently，它可以帮我们轻松地实现异步任务串行执行。

什么是 sequently

sequently 是一个轻量级的工具，它使得异步任务按指定顺序运行，可以理解为是一个简化的 promise 链工具。它支持传递参数、异步的返回结果也可以作为下一个任务的参数使用。由于 sequentially 极其简单易用，已经成为了实现一些常见任务的首选。

使用说明

sequentlly 通过链式调用的方式来完成异步任务的串行化，这样的语法结构使得代码变得易读和易维护。

基础使用方法

要使用 sequentially，我们首先需要用 NPM 安装它：

npm install sequently

安装完成后，我们只需要引入 sequently：

const sequently = require('sequentially');

需要注意的是 sequentially 是同步的，所以我们需要把每个异步函数并行运行。

接下来，我们就可以开始创建任务链了。这里以两个简单的示例来说明：

// 示例一：延迟 1 秒后输出 'First!'
const taskOne = async () => {
    await delay(1000);
    console.log('First!');
};

// 示例二：延迟 3 秒后输出 'Second!'
const taskTwo = async () => {
    await delay(3000);
    console.log('Second!');
};

function delay(ms) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms);
    });
}

// 使用 sequentially 运行任务链
sequentially([taskOne, taskTwo]);

在这个示例中，我们创建了两个异步任务函数 taskOne 和 taskTwo，它们分别输出 'First!' 和 'Second!' ，并且 taskOne 的延迟时间比 taskTwo 短。最后我们使用 sequentially 将任务串起来，并执行它们。需要注意的是 sequentially 并不会改变原有函数的返回值，所以 taskOne 和 taskTwo 直接输出结果即可。

传递参数

为了在每个任务之间传递数据，我们可以在 tasks 数组对象中的每个函数中传递一些参数。例如：

// 示例三：将第一个任务的输出作为第二个任务的输入
const taskOne = async () => {
    await delay(1000);
    return 'First!';
};

const taskTwo = async (args) => {
    await delay(3000);
    console.log(args);
};

// 使用 sequentially 运行任务链
sequentially([taskOne, taskTwo], {
    data: ['First!']
});

由于我们需要把 taskOne 的输出作为 taskTwo 的输入，这里通过 sequentially 的参数传递机制将数据传递给 taskTwo 。

异步返回值

如果我们希望某个任务中的异步操作的返回值能被下一个任务使用，并按指定顺序运行，我们需要显式地把返回值传递给下一个任务。例如：

// 示例四：使用同一个数组，任务 2 中用任务 1 的输出修改它
const taskOne = async () => {
    const words = ['Hello'];
    await delay(3000);
    return words;
};

const taskTwo = async (args) => {
    await delay(1000);
    args.push('world!');
    console.log(args.join(' '));
    return args;
};

// 使用 sequentially 运行任务链
sequentially([taskOne, taskTwo]);

在这个示例中，我们可以看到在任务一中声明了一个变量 words，这个变量被传递给任务二并作为下一个任务的输入。而在任务二中，我们向数组中添加一个元素，并输出最终结果。同时，taskTwo 返回值也会被下一个任务使用。这使得我们可以在任务链中传递异步任务的结果，实现数据的处理。

总结

sequentially 是一个非常简单易用的异步任务串行器，可以让我们避免开发过程中异步代码的混乱。通过链式调用的方式，它提供了一种清晰易懂的模式来组合各种异步任务。我们可以使用 sequentially 同步同一个数组、将第一个任务的输出传递给下一个任务，或者将异步返回值传递给下一个任务来实现各种功能。

在实际开发中，我们可以把 sequentially 作为核心工具来组合其他前端库和框架，实现复杂的业务逻辑。

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