如何将Node.js中的回调转换为Promise


Posted in Javascript onNovember 10, 2020

前言

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

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

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

什么是回调

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

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

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

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

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

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`模块:

const util = require('util');

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

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 关键字:

const fs = require('fs');
const util = require('util');

const readFile = util.promisify(fs.readFile);

(async () => {
  try {
    const content = await readFile('./sample.txt', 'utf-8');
    console.log(content);
  } catch (err) {
    console.error(err);
  }
})();

你只能在用 async 创建的函数中使用 await 关键字,这也是为什么要使用函数包装器的原因。函数包装器也被称为立即调用的函数表达式。

如果你的回调不遵循这个特定标准也不用担心。 util.promisify() 函数可让你自定义转换是如何发生的。

注意:Promise 在被引入后不久就开始流行了。Node.js 已经将大部分核心函数从回调转换成了基于 Promise 的API。

如果需要用 Promise 处理文件,可以用 Node.js 附带的库(https://nodejs.org/docs/latest-v10.x/api/fs.html#fs_fs_promises_api)。

现在你已经了解了如何将 Node.js 标准样式回调隐含到 Promise 中。从 Node.js 8 开始,这个模块仅在 Node.js 上可用。如果你用的是浏览器或早期版本版本的 Node,则最好创建自己的基于 Promise 的函数版本。

创建你自己的 Promise

让我们讨论一下怎样把回调转为 util.promisify() 函数的 promise。

思路是创建一个新的包含回调函数的 Promise 对象。如果回调函数返回错误,就拒绝带有该错误的Promise。如果回调函数返回非错误输出,就解决并输出 Promise。

先把回调转换为一个接受固定参数的函数的 promise 开始:

const fs = require('fs');

const readFile = (fileName, encoding) => {
  return new Promise((resolve, reject) => {
    fs.readFile(fileName, encoding, (err, data) => {
      if (err) {
        return reject(err);
      }

      resolve(data);
    });
  });
}

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

新函数 readFile() 接受了用来读取 fs.readFile() 文件的两个参数。然后创建一个新的 Promise 对象,该对象包装了该函数,并接受回调,在本例中为 fs.readFile() 。

要 reject Promise 而不是返回错误。所以代码中没有立即把数据输出,而是先 resolve 了Promise。然后像以前一样使用基于 Promise 的 readFile() 函数。

接下来看看接受动态数量参数的函数:

const getMaxCustom = (callback, ...args) => {
  let max = -Infinity;

  for (let i of args) {
    if (i > max) {
      max = i;
    }
  }

  callback(max);
}

getMaxCustom((max) => { console.log('Max is ' + max) }, 10, 2, 23, 1, 111, 20);

第一个参数是 callback 参数,这使它在接受回调的函数中有点与众不同。

转换为 promise 的方式和上一个例子一样。创建一个新的 Promise 对象,这个对象包装使用回调的函数。如果遇到错误,就 reject ,当结果出现时将会 resolve 。

我们的 promise 版本如下:

const getMaxPromise = (...args) => {
  return new Promise((resolve) => {
    getMaxCustom((max) => {
      resolve(max);
    }, ...args);
  });
}

getMaxCustom(10, 2, 23, 1, 111, 20)
  .then(max => console.log(max));

在创建 promise 时,不管函数是以非标准方式还是带有许多参数使用回调都无关紧要。我们可以完全控制它的完成方式,并且原理是一样的。

尽管现在回调已成为 JavaScript 中利用异步代码的默认方法,但 Promise 是一种更现代的方法,它更容易使用。如果遇到了使用回调的代码库,那么现在就可以把它转换为 Promise。

在本文中,我们首先学到了如何 在Node.js 中使用 utils.promisfy() 方法将接受回调的函数转换为 Promise。然后,了解了如何创建自己的 Promise 对象,并在对象中包装了无需使用外部库即可接受回调的函数。这样许多旧 JavaScript 代码可以轻松地与现代的代码库和混合在一起。

总结

到此这篇关于如何将Node.js中的回调转换为Promise的文章就介绍到这了,更多相关Node.js的回调转换为Promise内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
学习ExtJS table布局
Oct 08 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
node后端服务保活的实现
Nov 10 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 #Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
夯基础之手撕javascript继承详解
Nov 09 #Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 #Javascript
es5 类与es6中class的区别小结
Nov 09 #Javascript
vue实现标签云效果的示例
Nov 09 #Javascript
写一个Vue loading 插件
Nov 09 #Javascript
You might like
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP中的Memcache详解
2014/04/05 PHP
PDO::quote讲解
2019/01/29 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
AngularJS快速入门
2015/04/02 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
python中取绝对值简单方法总结
2020/07/24 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
公司清洁工岗位职责
2013/12/14 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
综合实践活动总结
2014/05/05 职场文书
小班上学期评语
2014/05/05 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL