Promise
new Promise((resolve, reject) => {
var param = 'Promise 執(zhí)行完后返回的數(shù)據(jù)';
var error = 'Promise 異步執(zhí)行異常';
if( error ) {
reject(new Error('Promise 異步執(zhí)行異常'));
} else {
resolve(param);
}
}).then((res) => {
// 這里res就是Promise中的param參數(shù)
console.log(res); // Promise 執(zhí)行完后返回的數(shù)據(jù)
var param = '第一個then 執(zhí)行完后返回的數(shù)據(jù)';
return param;
}).then((res) => {
// 這里的res就不是Promise中resolve的param參數(shù)了,而是上一個then中的返回值
console.log(res); // 第一個then 執(zhí)行完后返回的數(shù)據(jù)
}).catch((error) => {
// 這里是Promise執(zhí)行reject方法中的參數(shù)
console.log(error); // Promise 異步執(zhí)行異常
});
第一個then()
觸發(fā)條件:是 Promise()
實例化時resolve()
觸發(fā)甲脏,resolve(param)
第二個及以后的then()
觸發(fā)條件是第一個then()
執(zhí)行完成狰右,并且將return
值作為下一個then
的參數(shù)两波。
catch()
觸發(fā)條件是執(zhí)行了reject()
需要注意的是resolve
與reject
只能執(zhí)行一個埃唯。也就是說如果不加入判斷的話免糕,某一個先執(zhí)行了善镰,后面的就自動忽略了。
async & await
由于剛開始接觸這方面的內(nèi)容谤饭,僅做最簡單的描述标捺,可能存在很多誤區(qū),以后慢慢更正揉抵。
前端經(jīng)常要和異步打交道亡容,過去都是通過回調(diào)函數(shù)來處理異步數(shù)據(jù)。
var res = 0;
setTimeout(function () {
res = 10;
}, 1000);
console.log(res);
上面是一個很典型的異步方法冤今,其實這段代碼我們想要的結(jié)果是 10闺兢;
但是由于異步的原因,導(dǎo)致結(jié)果還沒有變更戏罢,我們已經(jīng)把原始數(shù)據(jù)打印出來了屋谭。
那么,我們過去可能會通過回調(diào)的辦法來解決這個問題龟糕。
把執(zhí)行打印的代碼放到回調(diào)函數(shù)中桐磁,在回調(diào)中處理數(shù)據(jù)。
var res = 0;
setTimeout(function () {
res = 10;
console.log(res);
}, 1000);
雖然這樣不失為解決問題的辦法讲岁,但是實際業(yè)務(wù)中各個異步返回的數(shù)據(jù)中可能互相之間有利用關(guān)系我擂,那么各種嵌套回調(diào)的問題也就隨之而來了。
var res1 = 0, res2 = 0, res3 = 0;
setTimeout(function () {
res1 = 10;
setTimeout(function () {
res2 = 20;
setTimeout(function () {
res3 = 30;
console.log(res1 + res2 + res3);
}, 1000);
}, 1000);
}, 1000);
像上面這樣的情況在實際業(yè)務(wù)中很常見缓艳。
我們有3個數(shù)據(jù)接口校摩,最終我們要將3個接口返回的數(shù)據(jù)合并,就只能一層一層的嵌套下去郎任。
那么如果有5個秧耗、10個這樣的接口呢备籽?我想從代碼的閱讀方面就是個災(zāi)難吧舶治。
當然我們可以把請求改為同步的,但是车猬!同步就意味著阻塞霉猛。這里不做討論。
終于到async
和 await
上場了......
;(async ()=> {
var res1 = await new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(10);
}, 1000);
});
var res2 = await new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(20);
}, 1000);
});
var res3 = await new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(30);
}, 1000);
});
console.log(res1 + res2 + res3);
})();
同樣的結(jié)果珠闰,但是我們的代碼仿佛變成的同步模式一樣惜浅。再也沒有無限嵌套了!