JavaScript——異步操作以及Promise 的使用

2021-10-18    前端達(dá)人

什么是異步?

異步與同步是相反的

簡(jiǎn)單來理解就是:同步按你的代碼順序執(zhí)行,異步不按照代碼順序執(zhí)行,異步的執(zhí)行效率更高。

什么時(shí)候用異步編程

在前端編程中(甚至后端有時(shí)也是這樣),我們?cè)谔幚硪恍┖?jiǎn)短、快速的操作時(shí),例如計(jì)算 1 + 1 的結(jié)果,往往在主線程中就可以完成。主線程作為一個(gè)線程,不能夠同時(shí)接受多方面的請(qǐng)求。所以,當(dāng)一個(gè)事件沒有結(jié)束時(shí),界面將無法處理其他請(qǐng)求。

現(xiàn)在有一個(gè)按鈕,如果我們?cè)O(shè)置它的 onclick 事件為一個(gè)死循環(huán),那么當(dāng)這個(gè)按鈕按下,整個(gè)網(wǎng)頁(yè)將失去響應(yīng)。

為了解決類似這種問題,JavaScript 中的異步操作函數(shù)往往通過回調(diào)函數(shù)來實(shí)現(xiàn)異步任務(wù)的結(jié)果處理。

回調(diào)函數(shù)

回調(diào)函數(shù)就是一個(gè)函數(shù),它是在我們啟動(dòng)一個(gè)異步任務(wù)的時(shí)候就告訴它:等你完成了這個(gè)任務(wù)之后要干什么。這樣一來主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了,他自己會(huì)善始善終。

例如:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>回調(diào)</title>
  8. </head>
  9. <body>
  10. <button>點(diǎn)擊</button>
  11. <p></p>
  12. <script>
  13. var btn = document.querySelector('button');
  14. function fn1(){
  15. btn.onclick = function(){
  16. document.querySelector('p').innerHTML = '我出現(xiàn)了!'
  17. }
  18. }
  19. setTimeout(fn1,1000)
  20. </script>
  21. </body>
  22. </html>

 

 它的第一個(gè)參數(shù)是個(gè)回調(diào)函數(shù),第二個(gè)參數(shù)是毫秒數(shù),這個(gè)函數(shù)執(zhí)行之后會(huì)產(chǎn)生一個(gè)子線程,子線程會(huì)等待 1 秒,然后執(zhí)行回調(diào)函數(shù) "fn1",在命令行輸出 "我出現(xiàn)了!"。

Promise 的使用

語法格式:


  1. new Promise(function (resolve, reject) {
  2. console.log("Run");
  3. });

resolve和reject是參數(shù) 

再看這個(gè)例子:


  1. new Promise(function (resolve, reject) {
  2. var a = 0;
  3. var b = 1;
  4. if (b == 0) reject("Divide zero");
  5. else resolve(a / b);
  6. }).then(function (value) {
  7. console.log("a / b = " + value);
  8. }).catch(function (err) {
  9. console.log(err);
  10. }).finally(function () {
  11. console.log("End");
  12. });

這段打印結(jié)果為:

.then() .catch() 和 .finally() 三個(gè)方法

這三個(gè)方法的參數(shù)都是一個(gè)函數(shù),

.then() 可以將參數(shù)中的函數(shù)添加到當(dāng)前 Promise 的正常執(zhí)行序列,

.catch() 則是設(shè)定 Promise 的異常處理序列,

.finally() 是在 Promise 執(zhí)行的最后一定會(huì)執(zhí)行的序列。 .then() 傳入的函數(shù)會(huì)按順序依次執(zhí)行,有任何異常都會(huì)直接跳到 catch 序列:


  1. new Promise(function (resolve, reject) {
  2. console.log(1111);
  3. resolve(2222);
  4. }).then(function (value) {
  5. console.log(value);
  6. return 3333;
  7. }).then(function (value) {
  8. console.log(value);
  9. throw "An error";
  10. }).catch(function (err) {
  11. console.log(err);
  12. });

打印結(jié)果為:

1111
2222
3333
An error

resolve() 中可以放置一個(gè)參數(shù)用于向下一個(gè) then 傳遞一個(gè)值,then 中的函數(shù)也可以返回一個(gè)值傳遞給 then。但是,如果 then 中返回的是一個(gè) Promise 對(duì)象,那么下一個(gè) then 將相當(dāng)于對(duì)這個(gè)返回的 Promise 進(jìn)行操作,這一點(diǎn)從剛才的計(jì)時(shí)器的例子中可以看出來。

reject() 參數(shù)中一般會(huì)傳遞一個(gè)異常給之后的 catch 函數(shù)用于處理異常。

但是請(qǐng)注意以下兩點(diǎn):

  • resolve 和 reject 的作用域只有起始函數(shù),不包括 then 以及其他序列;
  • resolve 和 reject 并不能夠使起始函數(shù)停止運(yùn)行,別忘了 return。




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自:csdn
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔