如何将 JavaScript 回调转换为 Promise？方法介绍-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。

在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可读性。

即使有了新的方法，但是仍然有许多使用回调的原生模块和库。在本文中，我们将讨论如何将 JavaScript 回调转换为 Promise。 ES6 的知识将会派上用场，因为我们将会使用展开操作符之类的功能来简化要做的事情。

什么是回调

回调是一个函数参数，恰好是一个函数本身。虽然我们可以创建任何函数来接受另一个函数，但回调主要用于异步操作。

JavaScript 是一种解释性语言，一次只能处理一行代码。有些任务可能需要很长时间才能完成，例如下载或读取大文件等。 JavaScript 将这些运行时间很长的任务转移到浏览器或 Node.js 环境中的其他进程中。这样它就不会阻止其他代码的执行。

通常异步函数会接受回调函数，所以完成之后可以处理其数据。

举个例子，我们将编写一个回调函数，这个函数会在程序成功从硬盘读取文件之后执行。

所以需要准备一个名为 sample.txt 的文本文件，其中包含以下内容：

1	`Hello world from sample.txt`

然后写一个简单的 Node.js 脚本来读取文件：

const fs = require('fs');
 
fs.readFile('./sample.txt', 'utf-8', (err, data) => {
    if (err) {
        // 处理错误
        console.error(err);
          return;
    }
    console.log(data);
});
 
for (let i = 0; i < 10; i++) {
    console.log(i);
}

运行代码后将会输出：

0
...
8
9
Hello world from sample.txt

如果这段代码，应该在执行回调之前看到 0..9 被输出到控制台。这是因为 JavaScript 的异步管理机制。在读取文件完毕之后，输出文件内容的回调才被调用。

顺便说明一下，回调也可以在同步方法中使用。例如 Array.sort() 会接受一个回调函数，这个函数允许你自定义元素的排序方式。

接受回调的函数被称为“高阶函数”。

现在我们有了一个更好的回调方法。那么们继续看看什么是 Promise。

什么是 Promise

在 ECMAScript 2015（ES6）中引入了 Promise，用来改善在异步编程方面的体验。顾名思义，JavaScript 对象最终将返回的“值”或“错误”应该是一个 Promise。

一个 Promise 有 3 个状态：

Pending（待处理）：用来指示异步操作尚未完成的初始状态。
Fulfilled（已完成）：表示异步操作已成功完成。
Rejected（拒绝）：表示异步操作失败。

大多数 Promise 最终看起来像这样：

someAsynchronousFunction()
    .then(data => {
        // promise 被完成
        console.log(data);
    })
    .catch(err => {
        // promise 被拒绝
        console.error(err);
    });

Promise 在现代 JavaScript 中非常重要，因为它们与 ECMAScript 2016 中引入的 async/await 关键字一起使用。使用 async / await 就不需要再用回调或 then() 和 catch() 来编写异步代码。

如果要改写前面的例子，应该是这样：

try {
    const data = await someAsynchronousFunction();
} catch(err) {
    // promise 被拒绝
    console.error(err);
}

这看起来很像“一般的”同步 JavaScript。大多数流行的JavaScript库和新项目都把 Promises 与 async/await 关键字放在一起用。

但是，如果你要更新现有的库或遇到旧的代码，则可能会对将基于回调的 API 迁移到基于 Promise 的 API 感兴趣，这样可以改善你的开发体验。

来看一下将回调转换为 Promise 的几种方法。

将回调转换为 Promise

Node.js Promise

大多数在 Node.js 中接受回调的异步函数（例如 fs 模块）有标准的实现方式：把回调作为最后一个参数传递。

例如这是在不指定文本编码的情况下用 fs.readFile() 读取文件的方法：

fs.readFile('./sample.txt', (err, data) => {
    if (err) {
        console.error(err);
          return;
    }
    console.log(data);
});

注意：如果你指定 utf-8 作为编码，那么得到的输出是一个字符串。如果不指定得到的输出是 Buffer。

另外传给这个函数的回调应接受 Error，因为它是第一个参数。之后可以有任意数量的输出。

如果你需要转换为 Promise 的函数遵循这些规则，那么可以用 util.promisify ，这是一个原生 Node.js 模块，其中包含对 Promise 的回调。

首先导入?util`模块：

1	`const` `util =` `require('util');`

然后用 promisify 方法将其转换为 Promise：

1 2	`const` `fs =` `require('fs');` `const` `readFile = util.promisify(fs.readFile);`

现在，把新创建的函数用作 promise：

readFile('./sample.txt', 'utf-8')
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.log(err);
    });

另外也可以用下面这个示例中给出的 async/await 关键字：

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 如何将 JavaScript 回调转换为 Promise？方法介绍

如何将 JavaScript 回调转换为 Promise？方法介绍

什么是回调

什么是 Promise

将回调转换为 Promise

Node.js Promise

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论