如何将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 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
PHP入门
2006/10/09 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
js onload事件不起作用示例分析
2013/10/09 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
Python urllib2运行过程原理解析
2020/06/04 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
.net工程师笔试题
2012/06/09 面试题
公司户外活动总结
2014/07/04 职场文书
离婚协议书范本
2015/01/26 职场文书
医德医风自我评价2015
2015/03/03 职场文书
护士自荐信怎么写
2015/03/06 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL