關注公眾號,一起交流,微信搜一搜: LiOnTalKING
JavaScript Promise
Promise 是一個 ECMAScript 6 提供的類,目的是更加優雅地書寫複雜的非同步任務。
如何建立一個 Promise 物件?
new Promise(function (resolve, reject) { // 要做的事情... });
Promise 的使用:
new Promise(function (resolve, reject) { console.log(1111); resolve(2222); }).then(function (value) { console.log(value); return 3333; }).then(function (value) { console.log(value); throw "An error"; }).catch(function (err) { console.log(err); });
執行結果:
1111
2222
3333
An error
JavaScript async/await非同步方法
- async 是“非同步”的簡寫,async 用於申明一個 function 是非同步的,而 await 用於等待一個非同步方法執行完成,await 只能出現在 async 函式中。
- async 表示這是一個async函式, await只能用在async函式里面,不能單獨使用
- async 返回的是一個Promise物件,await就是等待這個promise的返回結果後,再繼續執行
- await 等待的是一個Promise物件,後面必須跟一個Promise物件,但是不必寫then(),直接就可以得到返回值
今天要實現的求職面試的程式,總共包含3次面試,上一次面試透過才能進入到下一次面試,3次面試都透過了就算是求職成功了,分別用Promise和async/await兩種方式實現對比。
面試方法如下:
//面試 function interview(round) { return new Promise((resole, reject) => { setTimeout(() => { var score = Math.random(); if (score > 0.6) { resole(score); } else { var err = new Error(`分數:${score}`); err.round = round; reject(err) } }, 1000); }); };
該方法的引數round為第幾輪面試,方法返回一個promise,獲取一個隨機數,隨機數就是面試的得分,超過0.6即為透過面試,否則為不透過。
透過非同步方法來實現求職過程:
//非同步方法求職 async function seekJobs() { console.log('seekJobs => start'); console.time('seekJobs'); try { console.log('第 1 輪面試得分:', await interview(1)); console.log('第 2 輪面試得分:', await interview(2)); console.log('第 3 輪面試得分:', await interview(3)); console.log('yeah!'); } catch (error) { console.error('第 ' + error.round + ' 輪面試沒透過:', error); } console.log('seekJobs => end.'); console.timeEnd('seekJobs'); return '求職已經結束。'; };
透過async宣告該方法為非同步方法,每一輪面試用await等待返回面試結果,透過可進入下一輪面試,不透過則記錄是第幾輪面試和得分,最後方法返回資訊“求職已經結束。”
透過Promise方式來實現求職過程:
//promise的方式求職 function seekJobs_P() { console.log('seekJobs => start'); console.time('seekJobs'); interview(1) .then((score) => { console.log('第 1 輪面試得分:', score); return interview(2); }) .then((score) => { console.log('第 2 輪面試得分:', score); return interview(3); }) .then((score) => { console.log('第 3 輪面試得分:', score); console.log('yeah!'); }) .catch((error) => { console.error('第 ' + error.round + ' 輪面試沒透過:', error); }); console.log('seekJobs => end.'); console.timeEnd('seekJobs'); return '求職已經結束。'; };
每一輪面試的透過都會進入到then,列印分數並呼叫下一輪面試,直到所有面試都透過,中間過程中有一輪面試沒透過則進入到catch,最後同樣返回資訊“求職已經結束“
最後寫主程式main方法
/** * 主執行緒 */ (function main() { console.log('main.start======================================'); console.time('main'); //呼叫求職的非同步方法,遇到await不等待,直接返回到mian方法繼續執行,main執行完才輸出求職返回結果 // seekJobs().then((res) => { // console.log('求職返回:', res); // }); //呼叫promise的方式求職,遇到then繼續執行並返回"求職已經結束。",回到main方法輸出求職返回結果,最後再輸出每一次面試的分數 var res = seekJobs_P(); console.log('求職返回:', res); console.log('main.end======================================'); console.timeEnd('main'); })();
主程式這裡可以分別呼叫seekJobs和seekJobs_P兩種方式的求職。
1、非同步方法在遇到await就直接 返回到main方法,main方法繼續往下執行,非同步方法由另外的執行緒取執行,執行結束再回撥。
2、promise方法則是在遇到then繼續執行並返回"求職已經結束。",回到main方法輸出求職返回結果,最後再輸出每一次面試的分數。