为异步而生之 Promise

2018-01-24  本文已影响48人  错码匠

从这篇开始,要悉心整理异步相关的知识了,我将把要点以笔记形式记录下来,至于传统的地狱式回调写法就先搁在一边吧。

先从 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 async=(condition)=>{
    loading=true;
    return new Promise(function (resolve, reject){
        condition?
            resolve('Congratulations!'):
            reject(new Error('Sorry!'));
    });
};

async(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……

refs

JavaScript Promise迷你书(中文版)
Using promises

上一篇 下一篇

猜你喜欢

热点阅读