从这篇开始,要悉心整理异步相关的知识了,我将把要点以笔记形式记录下来,至于传统的地狱式回调写法就先搁在一边吧。
先从 Promise 开始。
很好理解:无论结果成败,许下诺言,然后去做。
三种状态
在 promise 对象执行过程中存在三种状态:pending(事务处理的悬停状态)、fulfilled(resolve)和 rejected(reject)。
fulfilled 和 rejected 都是 settled(最终状态),只触发一次,且最终只会有一种状态返回(要么成功,要么失败)。
创建 Promise
new Promise(function (resolve, reject){
//...
});
状态触发方式
resolve('fulfilled things')
和 reject('rejected things')
,在创建 Promise 的过程中被适时地调取以抛出 Promise 对象的执行状态与结果(不会自行终止书写在其后的代码的执行)。并在被 Promise 对象后续方法捕捉到后执行相应的回调。
throw
可以抛出错误,并被 .catch()
捕捉到异常,与 reject() 不同,throw
会终止 其后代码的执行。
捕捉状态的方法
.then(onFulfilled,onRejected)
,可以捕捉到 resolve 或 reject 触发的两种状态 fulfilled 和 rejected,并通过配置回调函数来处理这两种状态抛出的内容或执行后续流程,通常该方法用来处理 fulfilled,而 rejected 交给 .catch()
;
.catch(onRejected)
,只处理 rejected 状态。
另外,.then()
不单是做捕捉状态这件事,它还会把回调函数内(onFulfilled、onRejected)return
的结果用 Promise.resolve()
包装成新的 Promise 对象,以便下一个链式触发。
例子
这里有个要点,在 Promise 出现之前我们要让一段同步代码以异步方式调取可能需要借助 setTimeout 之类的“邪术”,而 Promise 规范保证了通过它执行的回调都是以异步方式进行的。
let loading=false;
let asyncHandle=(condition)=>{
loading=true;
return new Promise(function (resolve, reject){
condition?
resolve('Congratulations!'):
reject(new Error('Sorry!'));
});
};
asyncHandle(true).then((resolve)=>{
console.log(resolve);
}).catch((reject)=>{
console.error(reject);
});
console.log('Starting'); //Promise 规范保证了每次调用都是以异步方式进行的,所以“Starting”会在程序执行时先于async()输出。
执行结果是先输出 Starting
,再输出“Congratulations!”。当然,你仍然可以在创建 Promise 对象的时候使用 setTimeout 之类的方法设置延时效果以控制 resolve 或 reject 的触发时机。
创建 Promise 的快捷方式
Promise.resolve('fulfilled things')
相当于如下代码的语法糖:
new Promise(function (resolve, reject){
resolve('fulfilled things');
});
同样还有Promise.reject('rejected things')
方法,他们都会直接返回 Promise 对象,所以可以结合链式的写法:
Promise.reject('Rejected!').then(null,(reject)=>{alert(reject)});
console.log('Starting!'); //仍然会被前置输出
初看起来,这个语法糖只是快速地创建了一个异步的、带有最终状态的 Promise 对象。然而要用好它就不得不提到一个概念——thenable
扩展
//todo
嵌套、批量(all、race)、finally、done……