Promise
Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值。
本质上 Promise 是一个函数返回的对象,我们可以在它上面绑定回调函数,这样我们就不需要在一开始把回调函数作为参数传入这个函数了。
例如:
现在有一个名为 createAudioFileAsync()
的函数,它接收一些配置和两个回调函数,然后异步地生成音频文件。一个回调函数在文件成功创建时被调用,另一个则在出现异常时被调用。
示例:
// 成功的回调函数 function successCallback(result) { console.log("音频文件创建成功: " + result); } // 失败的回调函数 function failureCallback(error) { console.log("音频文件创建失败: " + error); } createAudioFileAsync(audioSettings, successCallback, failureCallback)
更现代的函数会返回一个 Promise 对象,使得你可以将你的回调函数绑定在该 Promise 上。
如果函数 createAudioFileAsync()
被重写为返回 Promise 的形式,那么我们可以像下面这样简单地调用它:
const promise = createAudioFileAsync(audioSettings); promise.then(successCallback, failureCallback);
或者简写为:
createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
该方式被称为 异步函数调用
使用Promise
约定
使用Promise时,会有以下约定
-
在本轮事件循环运行完成之前,回调函数是不会被调用的
-
即使异步操作已经完成(成功或失败),在这之后通过 then()添加的回调函数,也会被调用。
-
通过多次调用then()可以添加多个回调函数,他们会按照插入顺序进行执行。
链式调用
连续执行两个或者多个异步操作是一个常见的需求,在上一个操作执行成功之后,开始下一个的操作,并带着上一步操作所返回的结果。我们可以通过创造一个 Promise 链来实现这种需求。
then()
函数会返回一个和原来不同的新的 Promise:
const promise = doSomething(); const promise2 = promise.then(successCallback, failureCallback);
或者
const promise2 = doSomething().then(successCallback, failureCallback);
promise2
不仅表示 doSomething()
函数的完成,也代表了你传入的 successCallback
或者 failureCallback
的完成,这两个函数也可以返回一个 Promise 对象,从而形成另一个异步操作,这样的话,在 promise2
上新增的回调函数会排在这个 Promise 对象的后面。
基本上,每一个 Promise 都代表了链中另一个异步过程的完成。
现在,我们可以把回调绑定到返回的 Promise 上,形成一个 Promise 链:
doSomething().then(function(result) { return doSomethingElse(result); }) .then(function(newResult) { return doThirdThing(newResult); }) .then(function(finalResult) { console.log('Got the final result: ' + finalResult); }) .catch(failureCallback);
then 里的参数是可选的,catch(failureCallback)
是 then(null, failureCallback)
的缩略形式。如下所示,我们也可以用箭头函数来表示:
doSomething() .then(result => doSomethingElse(result)) .then(newResult => doThirdThing(newResult)) .then(finalResult => { console.log(`Got the final result: ${finalResult}`); }) .catch(failureCallback);
注意:一定要有返回值,否则,callback 将无法获取上一个 Promise 的结果。(如果使用箭头函数,() => x
比 () => { return x; }
更简洁一些,但后一种保留 return
的写法才支持使用多个语句。)。
Catch的后续链式操作
有可能会在一个回调失败之后继续使用链式操作,即,使用一个 catch
,这对于在链式操作中抛出一个失败之后,再次进行新的操作会很有用。请阅读下面的例子:
new Promise((resolve, reject) => { console.log('初始化'); resolve(); }) .then(() => { throw new Error('有哪里不对了'); console.log('执行「这个」”'); }) .catch(() => { console.log('执行「那个」'); }) .then(() => { console.log('执行「这个」,无论前面发生了什么'); });
注意:因为抛出了错误 有哪里不对了,所以前一个 执行「这个」 没有被输出。
错误传递
通常,一遇到异常抛出,浏览器就会顺着 Promise 链寻找下一个 onRejected
失败回调函数或者由 .catch()
指定的回调函数。这和以下同步代码的工作原理(执行过程)非常相似。
try { let result = syncDoSomething(); let newResult = syncDoSomethingElse(result); let finalResult = syncDoThirdThing(newResult); console.log(`Got the final result: ${finalResult}`); } catch(error) { failureCallback(error); }
在 ECMAScript 2017 标准的 async/await
语法糖中,这种异步代码的对称性得到了极致的体现:
async function foo() { try { const result = await doSomething(); const newResult = await doSomethingElse(result); const finalResult = await doThirdThing(newResult); console.log(`Got the final result: ${finalResult}`); } catch(error) { failureCallback(error); } }
Promise 拒绝事件
当 Promise 被拒绝时,会有下文所述的两个事件之一被派发到全局作用域(通常而言,就是window;如果是在 web worker 中使用的话,就是 Worker 或者其他 worker-based 接口)。这两个事件如下所示:
当 Promise 被拒绝、并且在 reject
函数处理该 rejection 之后会派发此事件。
使用rejectionhandled事件在控制台打印出被rejected的Promise,以及被rejected的原因: window.addEventListener("rejectionhandled", event => { console.log("Promise rejected; reason: " + event.reason); }, false);
当 Promise 被拒绝,但没有提供 reject
函数来处理该 rejection 时,会派发此事件。
扩展
async 函数
async函数是使用async
关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await
关键字。async
和await
关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise
。
async函数还可以被作为表达式来定义。
function resolveAfter2Seconds() { return new Promise(resolve => { setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: "resolved" } asyncCall();
async 作为关键字放在一个函数前,表示这个函数为异步函数,也就意味着该函数的执行,不会阻塞后面代码的执行。
语法:
async function name([param[, param[, ... param]]]) { statements }
参数:
name
函数名称。
param
要传递给函数的参数的名称。
statements
包含函数主体的表达式。可以使用await
机制。
返回值:
一个Promise,这个promise要么会通过一个由async函数返回的值被解决,要么会通过一个从async函数中抛出的(或其中没有被捕获到的)异常被拒绝。
描述
async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。
例如:
async function foo() { return 1 } //等价于 function foo() { return Promise.resolve(1) }
async函数的函数体可以被看作是由0个或者多个await表达式分割开来的。从第一行代码直到(并包括)第一个await表达式(如果有的话)都是同步运行的。一个不含await表达式的async函数是会同步运行的。然而,如果函数体内有一个await表达式,async函数就一定会异步执行。
例如:
async function foo() { await 1 } //等价于 function foo() { return Promise.resolve(1).then(() => undefined) }
在await表达式之后的代码可以被认为是存在在链式调用的then回调中,多个await表达式都将加入链式调用的then回调中,返回值将作为最后一个then回调的返回值。
使用async函数重写promise链
返回 Promise的 API 将会产生一个 promise 链,它将函数肢解成许多部分。例如下面的代码:
function getProcessedData(url) { return downloadData(url) // 返回一个 promise 对象 .catch(e => { return downloadFallbackData(url) // 返回一个 promise 对象 }) .then(v => { return processDataInWorker(v); // 返回一个 promise 对象 }); }
await关键字必须卸载async修饰的函数中,但是他会阻塞进程。await的意思是等待。他后面可以放任何表达式,不过更多的是放一个返回promise对象的表达式。
例如:
async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } async function async2(){ console.log('async2') await async3() console.log("async2 end") } async function async3(){ console.log('async3') } async1();
在async1() 执行时,需要等待async2()里面的东西全部执行之后才可以执行async1()中的东西。