[书籍翻译] 《JavaScript并发编程》第三章 使用Promises实现同步
本文是我翻译《javascript concurrency》书籍的第三章 使用promises实现同步,该书主要以promises、generator、web workers等技术来讲解javascript并发编程方面的实践。
完整书籍翻译地址: 。由于能力有限,肯定存在翻译不清楚甚至翻译错误的地方,欢迎朋友们提issue指出,感谢。
promises几年前就在javascript类库中实现了。这一切都始于promises/a+规范。这些类库的实现都有它们自己的形式,直到最近(确切地说是es6),promises规范才被javascript语言纳入。如标题那样 - 它帮助我们实现同步原则。
在本章中,我们将首先简单介绍promises中各种术语,以便更容易理解本章的后面部分内容。然后,通过各种方式,我们将使用promises来解决目前的一些问题,并让并发处理更容易。准备好了吗?
promise相关术语
在我们深入研究代码之前,让我们花一点时间确保我们牢牢掌握promises有关的术语。有promise实例,但是还有各种状态和方法。如果我们能够弄清楚promise这些术语,那么后面的章节会更易理解。这些解释简短易懂,所以如果您已经使用过promises,您可以快速看下这些术语,就当复习下。
promise
顾名思义,promise是一种承诺。将promise视为尚不存在的值的代理。promise让我们更好的编写并发代码,因为我们知道值会在将来某个时刻存在,并且我们不必编写大量的状态检查样板代码。
状态(state)
promises总是处于以下三种状态之一:
• 等待:这是promise创建后的第一个状态。它一直处于等待状态,直到它完成或被拒绝。
• 完成:该promise值已经处理完成,并能为它提供then()回调函数。
• 拒绝:处理promise的值出了问题。现在没有数据。
promise状态的一个有趣特性是它们只转换一次。它们要么从等待状态到完成,要么从等待状态到被拒绝。一旦它们进行了这种状态转换,后面就会锁定在这种状态。
执行器(executor)
执行器函数负责以某种方式解析值并将处于等待状态。创建promise后立即调用此函数。它需要两个参数:resolver函数和rejector函数。
解析器(resolver)
解析器是一个作为参数传递给执行器函数的函数。实际上,这非常方便,因为我们可以将解析器函数传递给另一个函数,依此类推。调用解析器函数的位置并不重要,但是当它被调用时,promise会进入一个完成状态。状态的这种改变将触发then()回调 - 这些我们将在后面看到。
拒绝器(rejector)
拒绝器与解析器相似。它是传递给执行器函数的第二个参数,可以从任何地方调用。当它被调用时,promise从等待状态改变到拒绝状态。这种状态的改变将调用错误回调函数,如果有的话,会传递给then()或catch()。
thenable
如果对象具有接受完成回调和拒绝回调作为参数的then()方法,则该对象就是thenable。换句话说,promise是thenable。但是在某些情况下,我们可能希望实现特定的解析语义。
完成和拒绝promises
如果上一节刚刚介绍的几个术语听起来让你困惑,那别担心。从本节开始,我们将看到所有这些promises术语的应用实践。在这里,我们将展示一些简单的promise解决和拒绝的示例。
完成promises
解析器是一个函数,顾名思义,它完成了我们的promise。这不是完成promise的唯一方法 - 我们将在后面探索更高级的方式。但到目前为止,这种方法是最常见的。它作为第一个参数传递给执行器函数。这意味着执行器可以通过简单地调用解析器直接完成promise。但这并不怎么实用,不是吗?
更常见的情况是promise执行器函数设置即将发生的异步操作 - 例如拨打网络电话。然后,在这些异步操作的回调函数中,我们可以完成这个promise。在我们的代码中传递一个解析函数,刚开始可能感觉有点违反直觉,但是一旦我们开始使用它们就会发现很有意义。
解析器函数是一个相对promise来说比较难懂的函数。它只能完成一次promise。我们可以调用解析器很多次,但只在第一次调用会改变promise的状态。下面是一个图描述了promise的可能状态;它还显示了状态之间是如何变化的:
现在,我们来看一些promise代码。在这里,我们将完成一个promise,它会调用then()完成回调函数:
//我们的promise使用的执行器函数。 //第一个参数是解析器函数,在1秒后调用完成promise。 function executor(resolve) { settimeout(resolve, 1000); } //我们promise的完成回调函数。 //这个简单地在我们的执行程序函数运行后,停止那个定时器。 function fulfilled() { console.timeend('fulfillment'); } //创建promise,并立即运行, //然后启动一个定时器来查看调用完成函数需要多长时间。 var promise = new promise(executor); promise.then(fulfilled); console.time('fulfillment');
我们可以看到,解析器函数被调用时fulfilled()函数会被调用。执行器实际上并不调用解析器。相反,它将解析器函数传递给另一个异步函数 - settimeout()。执行器并不是我们试图去弄清楚的异步代码。可以将执行器视为一种协调程序,它编排异步操作并确定何时执行promise。
前面的示例未解析任何值。当某个操作的调用者需要确认它成功或失败时,这是一个有效的用例。相反,让我们这次尝试解析一个值,如下所示:
//我们的promise使用的执行函数。 //创建promise后,设置延时一秒钟调用"resolve()", //并解析返回一个字符串值 - "done!"。 function executor(resolve) { settimeout(() => { resolve('done!'); }, 1000); } //我们promise的完成回调接受一个值参数。 //这个值将传递到解析器。 function fulfilled(value) { console.log('resolved', value); } //创建我们的promise,提供执行程序和完成回调函数。 var promise = new promise(executor); promise.then(fulfilled);
我们可以看到这段代码与前面的例子非常相似。区别在于我们的解析器函数实际上是在传递给settimeout()的回调函数的闭包内调用的。这是因为我们正在解析一个字符串值。还有一个将被解析的参数值传递给我们的fulfilled()函数。
拒绝promises
promise执行器函数并不总是按期望进行,当出现问题时,我们需要拒绝promise。这是从等待状态转换到另一个可能的状态。这不是进入一个完成状态而是进入一个被拒绝的状态。这会导致执行不同的回调,与完成回调函数是分开的。值得庆幸的是,拒绝promise的机制与完成promise非常相似。我们来看看这是如何实现的:
//此执行器在延时一秒后拒绝promise。 //它使用拒绝回调函数来改变状态, //并传递拒绝的参数值到回调函数。 function executor(resolve, reject) { settimeout(() => { reject('failed'); }, 1000); } //用作拒绝回调的函数。 //它接收提供拒绝的参数值。 function rejected(reason) { console.error(reason); } //创建promise,并运行执行器。 //使用“catch()”方法来接收拒绝回调函数。 var promise = new promise(executor); promise.catch(rejected);
这段代码看起来和在上一节中看到的代码非常相似。我们设置了超时,并且我们拒绝了它而不是完成它。这是使用rejector函数完成的,并作为第二个参数传递给执行器。
我们使用catch()方法而不是then()方法来设置拒绝回调函数。我们将在本章后面看到then()方法如何用于同时处理完成和拒绝回调函数。此示例中的拒绝回调函数仅将失败原因打印出来。通常情况下提供此返回值很重要。当我们完成promise时,返回值也是常见的,尽管不是必需的。另一方面,对于拒绝函数,一般也很少有情况仅仅通过回调函数输出拒绝原因。
让我们看下另一个例子,它捕获执行器中抛出的异常,并为拒绝回调函数提供更有意义的报错原因:
//此promise执行程序抛出错误, //并调用拒绝回调函数输出错误信息。 new promise(() => { throw new error('problem executing promise'); }).catch((reason) => { console.error(reason); }); //此promise执行程序捕获错误, //并调用拒绝回调函数输出更有意义的错误信息。 new promise((resolve, reject) => { try { var size = this.name.length; } catch (error) { reject(error instanceof typeerror ? 'missing "name" property' : error); } }).catch((reason) => { console.error(reason); });
前一个例子中第一个promise的有趣之处在于它确实改变了状态,即使我们没有使用resolve()或reject()明确地改变promise的状态。然而,最终改变promise的状态是很重要的; 我们将在下一节中探讨这个话题。
空promises
尽管事实上执行器函数传递了一个完成回调函数和拒绝回调函数,但并不保证promise将改变状态。有些情况下,promise只是挂起,并没有触发完成回调也没有触发拒绝回调。这可能并没有什么问题,事实上,简单的promises,就很容易发现和修复没有响应的promises。然而,随着我们进入更复杂的场景后,一个promise的完成回调可以作为其他几个promise的回调结果。如果一个promises不能完成或拒绝,然后整个流程将崩溃。这种情况调试起来是非常麻烦的;下面的图可以很清楚的看到这个情况:
在图中,我们可以看到哪个promise导致依赖的promise挂起,但通过调试代码来解决这个问题并不容易。现在让我们看看导致promise挂起的执行函数:
//这个promise能够正常运行执行器函数。 //但“then()”回调函数永远不会被执行。 new promise(() => { console.log('executing promise'); }).then(() => { console.log('never called'); }); //此时,我们并不知道promise出了什么问题 console.log('finished executing, promise hangs');
但是,是否有一种更安全的方式来处理这种不确定性呢?在我们的代码中,我们不需要挂起无需完成或拒绝的执行函数。让我们来实现一个执行器包装函数,像一个安全网那样让过长时间还没完成的promises执行拒绝回调函数。这将揭开解决不好处理的promise场景的神秘面纱:
//promise执行器函数的包装器, //在给定的超时时间后抛出错误。 function executorwrapper(func, timeout) { //这是实际调用的函数。 //它需要解析器函数和拒绝器函数作为参数。 return function executor(resolve, reject) { //设置我们的计时器。 //当时间到达时,我们可以使用超时消息拒绝promise。 var timer = settimeout(() => { reject('promise timed out after $ {timeout} ms'); }, timeout); //调用我们原来的执行器包装函数。 //我们实际上也包装了完成回调函数 //和拒绝回调函数,所以当 //执行者调用它们时,会清除定时器。 func((value) => { cleartimeout(timer); resolve(value); }, (value) => { cleartimeout(timer); reject(value); }); }; } //这个promise执行后超时, //超时错误消息传递给拒绝回调。 new promise(executorwrapper((resolve, reject) => { settimeout(() => { resolve('done'); }, 2000); }, 1000)).catch((reason) => { console.error(reason); }); //这个promise执行后按预期运行, //在定时结束之前调用“resolve()”。 new promise(executorwrapper((resolve, reject) => { settimeout(() => { resolve(true); }, 500); }, 1000)).then((value) => { console.log('resolved', value); });
对promises作出改进
既然我们已经很好地理解了promises的执行机制,本节将详细介绍如何使用promises来解决特定问题。通常,这意味着当promises完成或被拒绝时,我们会达到我们某些目的。
我们将首先查看javascript解释器中的任务队列,以及这些对我们的解析回调函数的意义。然后,我们将考虑使用promise的结果数据,处理错误,创建更好的抽象来响应promises,以及thenables。让我们开始吧。
处理任务队列
javascript任务队列的概念在“第2章,javascript运行模型”中提到过。它的主要职责是初始化新的执行上下文堆栈。这是常见的任务队列。然而,还有另一种队列,这是专用于执行promises回调的。这意味着,如果他们都存在时,算法会从这些队列中选择一个任务执行。
promises具有内置的并发语义,而且有充分的理由。如果一个promise被用来确保某个值最终被解析,那么为对其作出响应的代码赋予高优先级是有意义的。否则,当值到达时,处理它的代码可能还要在其他任务后面等待很长的时间才能执行。让我们编写一些代码来演示下这些并发语义:
//创建5个promise,记录它们的执行时间, //以及当他们对返回值做出响应的时间。 for (let i = 0; i < 5; i++) { new promise((resolve) => { console.log('execting promise'); resolve(i); }).then((value) => { console.log('resolved', i); }); } //在任何promise完成回调之前,这里会先被调用, //因为堆栈任务需要在解释器进入promise解析回调队列之前完成, //当前5个“then()”回调将被置后。 console.log('done executing'); //→ //execting promise //execting promise // ... //done executing //resolved 1 //resolved 2 // ...
拒绝回调也遵循同样的语义。
使用promise的返回数据
到目前为止,我们已经在本章中看到了一些示例,其中解析器函数完成promise后并返回值。传递给此函数的值是最终传递给完成回调函数的值。通过让执行程序设置任何异步操作的方法,例如settimeout(),延时传递该值调用解析程序。但在这些例子中,调用者实际上并没有等待任何值;我们只使用settimeout()作为示例异步操作。让我们看一下我们实际上没有值的情况,异步网络请求需要获取到它:
//用于从服务器获取资源的通用函数, //返回一个promise。 function get(path) { return new promise((resolve, reject) => { var request = new xmlhttprequest(); //promise解析数据加载后的json数据。 request.addeventlistener('load', (e) => { resolve(json.parse(e.target.responsetext)); }); //当请求出错时,promise执行拒绝回调函数。 request.addeventlistener('error', (e) => { reject(e.target.statustext || '未知错误'); }); //如果请求被中止时,我们调用完成回调函数 request.addeventlistener('abort', resolve); request.open('get', path); request.send(); }); } //我们可以直接附加我们的“then()”处理程序 //到“get()”,因为它返回一个promise。 //在解析之前,这里使用的值是一个真正的异步操作, //因为必须发请求远程获取值。 get('api.json').then((value) => { console.log('hello', value.hello); });
使用像get()这样的函数,它们不仅始终返回像promise一样的原生类型,而且还封装了一些让人讨厌的异步细节。在我们的代码中处理xmlhttprequest对象并不令人愉快。我们已经简化了可以返回的各种情况。而不是总是必须为load,error和abort事件创建处理程序,我们只需要关心一个接口 - promise。这就是同步并发原则的全部内容。
错误回调
有两种方法可以对被拒绝的promise做出处理。换句话说,提供错误回调。第一种方法是使用catch()方法,该方法使用单一回调函数。另一种方法是将被拒绝的回调函数作为then()的第二个参数传递。
将then()方法用来处理拒绝回调函数在某些情况下表现的更好,它应该被用来替代catch()函数。第一个场景是编写promises和thenable对象可以互换的代码。catch()方法不是thenable必要的一部分。第二个场景是当我们建立回调链时,我们将在本章后面探讨。
让我们看一些代码,它们比较了两种为promises提供拒绝回调函数的方法:
//这个promise执行器将随机执行完成回调或拒绝回调 function executor(resolve, reject) { cnt++; math.round(math.random()) ? resolve(`fulfilled promise ${cnt}`) : reject(`rejected promise ${cnt}`); } //让“log()”和“error()”函数作为简单回调函数 var log = console.log.bind(console), error = console.error.bind(console), cnt = 0; //创建一个promise,然后通过“catch()”方法传入拒绝回调。 new promise(executor).then(log).catch(error); //创建一个promise,然后通过“then()”方法传入拒绝回调。 new promise(executor).then(log, error);
我们可以看到这两种方法实际上非常相似。在代码美观上,也没有哪个有真正的优势。然而,当涉及到使用thenables时,then()方法有一个优势,我们后面会看到。但是,由于我们实际上并没有以任何方式使用promise实例,除了添加回调之外,实际上没有必要担心catch()和then()用于注册拒绝回调。
始终响应
promises最终总是结束于完成状态或拒绝状态。我们通常为每个状态传入不同的回调函数。但是,我们很可能希望为这两个状态执行一些相同的操作。例如,如果使用promise的组件在promise等待时更改状态,我们要确保在完成或拒绝promise后清除状态。
我们可以用这样的方式编写代码:完成和拒绝状态的每个回调都去执行这些操作,或者他们每个都可以调用执行一些公用的清理函数。下面这种方式的示图:
将清理任务分配给promise是否有意义,而不是将其分配给其它个别结果?这样,在解析promise时运行的回调函数专注于它需要对值执行的操作,而拒绝回调则专注于处理错误。让我们看看是否可以使用always()方法编写一些扩展promises的代码:
//在promise原型上扩展使用“always()”方法。 //不管promise是完成还是拒绝,始终会调用给定的函数。 promise.prototype.always = function(func) { return this.then(func, func); }; //创建promise随机完成或被拒绝。 var promise = new promise((resolve, reject) => { math.round(math.random()) ? resolve('fullfilled') : reject('rejected'); }); //传递promise完成和拒绝回调。 promise.then((value) => { console.log(value); }, (reason) => { console.error(reason); }); //这个回调函数总是会在上面的回调执行之后调用。 promise.always((value) => { console.log('cleaning up...'); });
请注意,在这里顺序很重要。如果我们在then()之前调用always(),那么函数仍然会运行,但它会在
回调提供给then()之前运行。我们实际上可以在then()之前和之后都调用always(),以便在完成或拒绝回调
之前以及之后运行代码。
处理其他promises
到目前为止,我们在本章中看到的大多数promise都是由执行程序函数直接完成的,或者是当值准备完成时从异步操作中调用解析器的结果。像这样传递回调函数实际上非常灵活。例如,执行程序甚至不必执行任何任务,除了将解析器函数存储在某处以便稍后调用它来解析promise。
当我们发现自己处于需要多个值的更复杂的同步场景时,这可能特别有用,这些值已经被传递给调用者。如果我们有处理回调函数,我们就可以处理promise。让我们看看,在存储代码的解析函数的多个promises,使每一个promise都可以在后面处理:
//存储一系列解析器函数的列表。 var resolvers = []; //在执行器中创建5个新的promise, //解析器被推到了“resolvers”数组。 //我们可以给每一个promise执行回调。 for(let i = 0; i < 5; i++) { new promise(() => { resolvers.push(resolve); }).then((value) => { console.log(`resolved ${i + 1}`, value); }); } //设置一个2s之后延时运行函数, //当它运行时,我们遍历“解析器”数组中的每一个解析器函数, //并且传入一个返回值来调用它。 settimeout(() => { for(resolver of resolvers) { resolver(true); } }, 2000);
正如这个例子所表明的那样,我们不必在executor函数内处理它们。事实上,我们甚至不需要在创建和设置执行程序和完成函数之后显式引用promise实例。解析器函数已存储在某处,它包含对promise的引用。
类promise对象
promise类是一种原生的javascript类型。但是,我们并不总是需要创建新的promise实例来实现相同的同步操作。我们可以使用静态promise.resolve()方法来解析这些对象。让我们看看如何使用此方法:
//“promise.resolve()”方法可以处理thenable对象。 //这是一个带有“then()”方法的类似于执行器的对象。 //这个执行器将随机完成或拒绝promise。 promise.resolve({then: (resolve, reject) => { math.round(math.random()) ? resolve('fulfilled') : reject('rejected'); //这个方法返回一个promise,所以我们能够 //设置已完成和被拒绝的回调函数。 }}).then((value) => { console.log('resolved', value); }, (reason) => { console.error('reason', reason); });
我们将在本章的最后一节中再次讨论promise.resolve()方法,以了解更多用例。
建立回调链
我们在本章前面介绍的每种promise方法都会返回promise。这允许我们在返回值上再次调用这些方法,从而产生then().then()调用的链,依此类推。链式promise具有挑战性的一个方面是promise方法返回的是新实例。也就是说,我们将在本节中探讨promise在一定程度上的不变性。
随着我们的应用程序变得越来越大,并发性挑战随之增加。这意味着我们需要考虑更好的方法来利用原生同步语义,例如promises。正如javascript中的任何其他原始值一样,我们可以将它们从函数传递给函数。我们必须以同样的方式处理promises - 传递它们,并建立在回调函数链上。
promises只改变状态一次
promise初始时是等待状态,并且它们结束于已完成或被拒绝的状态。一旦promise转变为其中一种状态,它们就会锁定在这种状态。这有两个有趣的副作用。
首先,多次尝试完成或拒绝promise将被忽略。换句话说,解析器和拒绝器是幂等的 - 只有第一次调用对promise有影响。让我们看看这代码如何执行:
//此执行器函数尝试解析promise两次, //但完成的回调只调用一次。 new promise((resolve, reject) => { resolve('fulfilled'); resolve('fulfilled'); }).then((value) => { console.log('then', value); }); //这个执行器函数尝试拒绝promise两次, //但拒绝的回调只调用一次。 new promise((resolve, reject) => { reject('rejected'); reject('rejected'); }).catch((reason) => { console.error('reason'); });
promises仅改变状态一次的另一个含义是promise可以在添加完成或拒绝回调之前处理。竞争条件,例如这个,是并发编程的残酷现实。通常,回调函数会在创建时添加到promise中。由于javascript是运行到完成的,因此在添加回调之前,不会处理promise解析回调的任务队列。但是,如果promise立即在执行中解析怎么办?如果将回调添加到另一个javascript执行上下文的promise中会怎样?让我们看看是否可以用一些代码来更好地说明这些情况:
//此执行器函数立即解析promise。添加“then()”回调时, //promise已经解析了。但回调函数仍然会使用已解析的值进行调用。 new promise((resolve, reject) => { resolve('done'); console.log('executor', 'resolved'); }).then((value) => { console.log('then', value); }); //创建一个立即解析的新promise执行器函数。 var promise = new promise((resolve, reject) => { resolve('done'); console.log('executor', 'resolved'); }); //这个回调是promise解析后就立即执行了。 promise.then((value) => { console.log('then 1', value); }); //此回调在promise解析后未添加到另一个的promise中, //它仍然被立即调用并获得已解析的值。 settimeout(() => { promise.then((value) => { console.log('then 2', value); }); }, 1000);
此代码说明了promises的一个非常重要的特性。无论何时将执行回调添加到promise中,无论是处于暂时挂起状态还是解析状态,使用promise的代码都不会更改。从表面上看,这似乎不是什么大不了的事。但是这种竞争条件检查的类型需要更多的并发代码来保护自己。相反,promise原生语法为我们处理这个问题,我们可以开始将异步值视为原始类型。
不可改变的promises
promises并非真正不可改变。它们改变状态,then()方法将回调函数添加到promise。但是,有一些不可改变的promises特征值得在这里讨论,因为它们会在某些情况下影响我们的promise代码。
从技术上讲,then()方法实际上并没有改变promise对象。它创建了所谓的promise能力,它是一个引用promise的内部javascript记录,以及我们添加的函数。因此,它不是javascript语言中的真正语法。
这是一张图,说明当我们链接两个或更多then()一起调用时会发生什么:
我们可以看到,then()方法不会返回与上下文一起调用的相同实例。相反,then()创建一个新的promise实例并返回它。让我们看一些代码,来进一步的说明当我们使用then()将promises链接在一起时会发生的事情:
//创建一个立即解析的promise, //并且存储在“promise1”中。 var promise1 = new promise((resolve, reject) => { resolve('fulfilled'); }); //使用“promise1”的“then()”方法创建一个 //新的promise实例,存储在“promise2”中。 var promise2 = promise1.then((value) => { console.log('then 1', value); //→then 1 fulfilled }); //为“promise2”创建一个“then()”回调。这实际上 //创建第三个promise实例,但我们不用它做任何事情。 promise2.then((value) => { console.log('then 2', value); //→then 2 undefined }); //确信“promise1”和“promise2”实际上是不同的对象 console.log('equal', promise1 === promise2); //→equal false
我们可以清楚地看到这两个创建promise的实例在这个例子中是独立的promise对象。值得指出的是第二个promise执行前时,一定是它执行了第一个promise。但是,我们可以看到的是该值不会传递到第二个promise。我们将在下一节中解决此问题。
有多少个then()回调,就有多少个promise对象
正如我们在上一节中看到的那样,使用then()创建的promise将绑定到它们的创建者。也就是说,当第一个promise完成时,绑定它的promise也会完成,依此类推。但是,我们也发现了一个小问题。已解析的值不会使其传递到第一个回调函数。这样做的原因是为响应promise解析而运行的每个回调都是第一个回调的返回值被送入第二个回调,依此类推。我们的第一个回调将值作为参数的原因是因为这在promise机制中显然会发生的。
我们来看看另一个promise链示例。这一次,我们将显式返回回调函数中的值:
//创建一个新promise随机调用解析回调或拒绝回调。 new promise((resolve, reject) => { math.round(math.random()) ? resolve('fulfilled') : reject('rejected'); }).then((value) => { //在完成原始promise时调用返回值, //以防另一个promise链接到这一个。 console.log('then 1', value); return value; }).catch((reason) => { //链接到第二个promise, //当拒绝回调时执行。 console.error('catch 1', reason); }).then((value) => { //链接到第三个promise, //按预期得到值,并返回值给任何下个promise回调使用。 console.log('then 2', value); return value; }).catch((reason) => { //这里永不会被调用, //拒绝回调不会通过promise链传递。 console.error('catch 2', reason); });
这看起来不错。我们可以看到已解析的值通过promise链传递。有一个异常 - 拒绝回调不会向后传递。相反,只有链中的第一个promise拒绝回调会执行。其余的promise回调只是完成,而不是拒绝。这意味着最后一个catch()回调永远不会运行。
当我们以这种方式将promise链接在一起时,我们的执行回调函数需要能够处理错误条件。例如,已解析的值可能具有error属性,可以检查其具体问题。
promises传递
在本节中,我们讲讲promise作为原始值的用法。我们经常用原始值做的事情是将它们作为参数传递给函数,并从函数中返回它们。promise和其他原生语法之间的关键区别在于我们如何使用它们。其他值是始终都存在,而promise的值到未来某个时间点才存在。因此,我们需要通过回调函数定义一些操作过程,当值获得时去执行。
promises的好处是用于提供这些回调函数的接口小巧且一致。当我们将值与将作用于它的代码耦合时,我们不需要再去自主创造同步机制。这些单元可以像任何其他值一样在我们的应用程序中运用,并且并发语义是常见的。这是几个promise函数相互传递的示图:
在这个函数堆栈调用结束时,我们得到一个完成几个promise的解析的promise对象。整个promise链是从第一个promise完成而开始的。比如何遍历promise链的机制更重要的是所有这些函数都可以*使用这个promise传递的值而不影响其他函数。
在这里有两个并发原则。首先,我们通过执行异步操作仅只能处理该值一次; 每个回调函数都可以*使用此解析值。其次,我们在抽象同步机制方面做得很好。换句话说,代码并没有带有很多重复代码。让我们看看传递promise的代码实际的样子:
//简单实用的工具函数, //将多个较小的函数组合成一个函数。 function compose(...funcs) { return function(value) { var result = value; for(let func of funcs) { result = func(value); } return result; }; } //接受一个promise或一个完成值。 //如果这是一个promise,它添加了一个“then()”回调并返回一个新的promise。 //否则,它会执行“update”并返回值。 function updatefirstname(value) { if (value instanceof promise) { return value.then(updatefirstname); } console.log('first name', value.first); return value; } //与上面的函数类似, //只是它执行不同的ui“update”。 function updatelastname(value) { if (value instanceof promise) { return value.then(updatelastname); } console.log('last name', value.last); return value; } //与上面的函数类似,除了它 //只是它执行不同的ui“update”。 function updateage(value) { if (value instanceof promise) { return value.then(updateage); } console.log('age', value.age); return value; } //一个promise对象, //它在延时一秒钟之后, //携带一个数据对象完成promise。 var promise = new promise((resolve, reject) => { settimeout(() => { resolve({ first: 'john', last: 'smith', age: 37 }); }); }, 1000); //我们组装一个“update()”函数来更新各种ui组件。 var update = compose( updatefirstname, updatelastname, updateage ); //使用promise调用我们的更新函数。 update(promise);
这里的关键函数是我们的更新函数 - updatefirstname(),updatelastname()和updateage()。他们非常灵活,接受一个promise或promise返回值。如果这些函数中的任何一个将promise作为参数,它们会通过添加then()回调函数来返回新的promise。请注意,它添加了相同的函数。updatefirstname()将添加updatefirstname()作为回调。当回调触发时,它将与此次用于更新ui的普通对象一起使用。因此,promise如果失败,我们可以继续更新ui。
promise检查每个函数都需要三行,这并不是非常突兀的。最终结果是易读且灵活的代码。顺序无关紧要; 我们可以用不同的顺序包装我们的update()函数,并且ui组件都将以相同的方式更新。我们可以将普通对象直接传递给update(),一切都会同样执行。看起来不像并发代码的并发代码是我们在这里取得的重大成功。
同步多个promises
在本章前面,我们已经探究了单个promise实例,它解析一个值,触发回调,并可能传递给其他promises处理。在本节中,我们将介绍几种静态promise方法,它们可以帮助我们处理需要同步多个promise值的情况。
首先,我们将处理我们开发的组件需要同步访问多个异步资源的情况。然后,我们将看一下不常见的情况,如异步操作在处理之前由于ui中发生的事件而变得没有意义。
等待promises
在我们等待处理多个promise的情况下,也许是将多个数据源转换后提供给一个ui组件使用,我们可以使用promise.all()方法。它将promise实例的集合作为输入,并返回一个新的promise实例。仅当完成了所有输入的promise时,才会返回一个新实例。
then()函数是我们为promise提供的创建新promise的回调。给出一组解析值作为输入。这些值对应于索引输入promise的位置。这是一个非常强大的同步机制,它可以帮助我们实现同步并发原则,因为它隐藏了所有的处理记录。
我们不需要几个回调,让每个回调都协调它们所绑定的promise状态,我们只需一个回调,它具有我们需要的所有解析数据。这个示例展示如何同步多个promise:
//用于发送“get”http请求的工具函数, //并返回带有已解析的数据的promise。 function get(path) { return new promise((resolve, reject) => { var request = new xmlhttprequest(); //当数据加载时,完成解析了json数据的promise request.addeventlistener('load', (e) => { resolve(json.parse(e.target.responsetext)); }); //当请求出错时, //promise被适当的原因拒绝。 request.addeventlistener('error', (e) => { reject(e.target.statustext || 'unknown error'); }); //如果请求被中止,我们继续完成处理请求 request.addeventlistener('abort', resolve); request.open('get', path); request.send(); }); } //保存我们的请求promises。 var requests = []; //发出5个api请求,并将相应的5个 //promise放在“requests”数组中。 for (let i = 0; i < 5; i++) { requests.push(get('api.json')); } //使用“promise.all()”让我们传入一个数组promises, //当所有promise完成时,返回一个已经完成的新promise。 //我们的回调得到一个数组对应于promises的已解析值。 promise.all(requests).then((values) => { console.log('first', values.map(x => x[0])); console.log('second', values.map(x => x[1])); });
取消promises
到目前为止,我们在本书中已看到的xhr请求具有中止请求的处理程序。这是因为我们可以手动中止请求并阻止任何load回调函数运行。需要此功能的典型场景是用户单击取消按钮,或导航到应用程序的其他部分,从而使请求变得毫无意义。
如果我们是要在抽象promise上更上一层楼,在同样的原则也适用。而一些可能发生的并发操作的执行让promise变得毫无意义。promises和xhr请求的过程中之间的区别,是前者没有abort()方法。最后我们要做的一件事是在我们的promise回调中开始引入可能并不必要的取消逻辑。
promise.race()方法在这里可以帮助我们。顾名思义,该方法返回一个新的promise,它由第一个要解析的输入promise决定。这可能你听的不多,但实现promise.race()的逻辑并不容易。它实际上是同步原则,隐藏了应用程序代码中的并发复杂性。我们来看看这个方法是怎么可以帮助我们处理因用户交互而取消的promise:
//用于取消数据请求的解析器函数。 var cancelresolver; //一个简单的“常量”值,用于处理取消promise var canceled = {}; //我们的ui组件 var buttonload = document.queryselector('button.load'), buttoncancel = document.queryselector('button.cancel'); //请求数据,返回一个promise。 function getdatapromise() { //创建取消promise。 //执行器传入“resolve”函数为“cancelresolver”, //所以它稍后可以被调用。 var cancelpromise = new promise((resolve) => { cancelresolver = resolve; }); //我们实际想要的数据 //这通常是一个http请求, //但我们在这里使用settimeout()简单模拟一下。 var datapromise = new promise((resolve) => { settimeout(() => { resolve({hello: 'world'}); }, 3000); }); //“promise.race()”方法返回一个新的promise, //并且无论输入promise是什么,它都可以完成处理 return promise.race([cancelpromise, datapromise]); } //单击取消按钮时,我们使用 //“cancelresolver()”函数来处理取消promise buttoncancel.addeventlistener('click', () => { cancelresolver(cancelled); }); //单击加载按钮时,我们使用 //“getdatapromise()”发出请求获取数据。 buttonload.addeventlistener('click', () => { buttonload.disabled = true; getdatapromise().then((value) => { buttonload.disabled = false; //promise得到了执行,但那是因为 //用户取消了请求。所以我们这里 //通过返回canceled “constant”退出。 //否则,我们有数据可以使用。 if (object.is(value, canceled)) { return value; } console.log('loaded data', value); }); });
作为练习,尝试想象一个更复杂的场景,其中datapromise是由promise.all()创建的promise。我们的
cancelresolver()函数可以一次取消许多复杂的异步操作。
没有执行器的promises
在最后一节中,我们将介绍promise.resolve()和promise.reject()方法。我们已经在本章前面看到promise.resolve()如何处理thenable对象。它还可以直接处理值或其他promises。当我们实现一个可能同步也可能异步的函数时,这些方法会派上用场。这不是我们想要使用具有模糊并发语义函数的情况。
例如,这是一个可能同步也可能异步的函数,让人感到迷惑,几乎肯定会在以后出现错误:
//一个示例函数,它可能从缓存中返回“value”, //也可能通过“fetchs”异步获取值。 function getdata(value) { //如果它存在于缓存中,我们直接返回这个值 var index = getdata.cache.indexof(value); if(index > -1) { return getdata.cache[index]; } //否则,我们必须通过“fetch”异步获取它。 //这个“resolve()”调用通常是会在网络发起请求的回调函数 return new promise((resolve) => { getdata.cache.push(value); resolve(value); }); } //创建缓存。 getdata.cache = []; console.log('getting foo', getdata('foo')); //→getting foo promise console.log('getting bar', getdata('bar')); //→getting bar promise console.log('getting foo', getdata('foo')); //→getting foo foo
我们可以看到最后一次调用返回的是缓存值,而不是一个promise。这很直观,因为我们不需要通过promise获取最终的值,我们已经拥有这个值!问题是我们让使用getdata()函数的任何代码表现出不一致性。也就是说,调用getdata()的代码需要处理并发语义。此代码不是并发的。让我们通过引入promise.resolve()来改变它:
//一个示例函数,它可能从缓存中返回“value”, //也可能通过“fetchs”异步获取值。 function getdata(value) { var cache = getdata.cache; //如果这个函数没有缓存, //那就拒绝promise。 if(!array.isarray(cache)) { return promise.reject('missing cache'); } //如果它存在于缓存中, //我们直接使用缓存的值返回完成的promise var index = getdata.cache.indexof(value); if (index > -1) { return promise.resolve(getdata.cache[index]); } //否则,我们必须通过“fetch”异步获取它。 //这个“resolve()”调用通常是会在网络发起请求的回调函数 return new promise((resolve) => { getdata.cache.push(value); resolve(value); }); } //创建缓存。 getdata.cache = []; //每次调用“getdata()”返回都是一致的。 //甚至当使用同步值时, //它们仍然返回得到解析完成的promise。 getdata('foo').then((value) => { console.log('getting foo', `“${value}”`); }, (reason) => { console.error(reason); }); getdata('bar').then((value) => { console.log('getting bar', `“${value}”`); }, (reason) => { console.error(reason); }); getdata('foo').then((value) => { console.log('getting foo', `“${value}”`); }, (reason) => { console.error(reason); });
这样更好。使用promise.resolve()和promise.reject(),任何使用getdata()的代码默认都是并发的,即使数据获取操作是同步的。
小结
本章介绍了es6中引入的promise对象的大量细节内容,以帮助javascript程序员处理困扰该语言多年的同步问题。大量的使用异步回调,这会产生回调地狱,因而我们要尽量避免它。
promise通过实现一个足以解决任何值的通用接口来帮助我们处理同步问题。promise总是处于三种状态之一 - 等待,完成或拒绝,并且它们只会改变一次状态。当这些状态发生改变时,将触发回调。promise有一个执行器函数,其作用是设置使用promise的异步操作resolver函数或rejector函数来改变promise的状态。
promise带来的大部分价值在于它们如何帮助我们简化复杂的场景。因为,如果我们只需处理一个运行带有解析值回调的异步操作,那么使用promises就不值得。这是不常见的情况。常见的情况是几个异步操作,每个操作都需要解析返回值;并且这些值需要同步处理和转换。promises有方法帮助我们这样做,因此,我们能够更好地将同步并发原则应用于我们的代码。
在下一章中,我们将介绍另一个新引入的语法 - generator。与promises类似,生成器是帮助我们应用另一个并发原则的机制 - 保护。
最后补充下书籍章节目录
- 《javascript并发编程》第一章 javascript并发简介
- 《javascript并发编程》第二章 javascript运行模型
- 《javascript并发编程》第三章 使用promises实现同步
- 《javascript并发编程》第四章 使用generators实现惰性计算
- 《javascript并发编程》第五章 使用web workers
- 《javascript并发编程》第六章 实用的并发
- 《javascript并发编程》第七章 抽取并发逻辑
另外还有讲解两章nodejs后端并发方面的,和一章项目实战方面的,这里就不再贴了,有兴趣可转向查看。