在几年前,回调是 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。
在 ECMAScript 2015(ES6)中引入了 Promise,用来改善在异步编程方面的体验。顾名思义,JavaScript 对象最终将返回的“值”或“错误”应该是一个 Promise。
一个 Promise 有 3 个状态:
大多数 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 的几种方法。
大多数在 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/lates...)。
现在你已经了解了如何将 Node.js 标准样式回调隐含到 Promise 中。从 Node.js 8 开始,这个模块仅在 Node.js 上可用。如果你用的是浏览器或早期版本版本的 Node,则最好创建自己的基于 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 代码可以轻松地与现代的代码库和混合在一起。
本文首发微信公众号:前端先锋
Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.
Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。
Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数
这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。
在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖,文中会直接使用async/await替换Promise;map可以说是对Promise最友好的一个函数了,
最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因
想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行
你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve
Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!