JavaScript異步處理的方式有哪些

這篇“JavaScript異步處理的方式有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript異步處理的方式有哪些”文章吧。

JavaScript中的兩種異步處理方式：1、利用“Promise”來處理異步，它可以幫忙管理異步方式返回的代碼；2、利用“async/await”來處理異步，可以將異步事件用同步語法來處理。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript的異步處理方式

Promise

（1）promise對象是commonJS工作組提出的一種規范，一種模式，目的是為了異步編程提供統一接口。

（2）promise是一種模式，promise可以幫忙管理異步方式返回的代碼。他講代碼進行封裝并添加一個類似于事件處理的管理層。我們可以使用promise來注冊代碼，這些代碼會在在promise成功或者失敗后運行。

（3）promise完成之后，對應的代碼也會執行。我們可以注冊任意數量的函數再成功或者失敗后運行，也可以在任何時候注冊事件處理程序。

（4）promise有兩種狀態：1、等待（pending）；2、完成（settled）。

promise會一直處于等待狀態，直到它所包裝的異步調用返回/超時/結束。

（5）這時候promise狀態變成完成。完成狀態分成兩類：1、解決（resolved）；2、拒絕（rejected）。

（6）promise解決（resolved）：意味著順利結束。promise拒絕（rejected）意味著沒有順利結束。

//promise
var p=new Promise(function(resolved))
//在這里進行處理。也許可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

（1）代碼的 關鍵在于setTimeout()的調用。

（2）重要的是，他調用了函數resolve()和reject()。resolve()函數告訴promise用戶promise已解決；reject()函數告訴promise用戶promise未能順利完成。

（3）另外還有一些使用了promise代碼。注意then和catch用法，可以將他們想象成onsucess和onfailure事件的處理程序。

（4）巧妙地方是，我們將promise處理與狀態分離。也就是說，我們可以調用p.then（或者p.catch）多少次都可以，不管promise是什么狀態。

（5）promise是ECMAscript 6管理異步代碼的標準方式，javascript庫使用promise管理ajax，動畫，和其他典型的異步交互。

簡單的說，它的思想是：每一個異步任務返回一個promise對象，該對象有一個then方法，允許指定回調函數。比如，f1的回調函數f2，可以寫成：

f1.then(f2);

f1要進行如下改寫（使用jquery的實現）：

function f1(){
   var dfd=$.deferred();
   settimeout(function(){
     //f1的任務代碼
     dfd.resolve();
　 },500);
  return dfd.promise;  
}

這樣寫的優點：回調函數寫成了鏈式寫法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以實現很多強大的功能。

比如，指定多個回調函數

f1().then(f2).then(f3);

再比如，指定發生的錯誤時的回調函數：

f1().then(f2).fail(f3);

而且，它有一個前面三種方法都沒有的好處：如果一個任務已經完成，再添加回調函數，該回調函數會立即執行。

所以你不用擔心錯過某一個事件或者信號。

這種方法的缺點：編寫和理解都相對比較難。

async await

從 ES6 Promise 問世之后，異步代碼從回調地獄逐漸變成了優雅的函數式管道處理，但對于不熟悉度的開發者來說，只不過是從回調地獄變成了 Promise 地獄而已。

在 ES8 中規范了新的 async/await，雖然只是 Promise 和 Generator Function組合在一起的語法糖，但通過 async/await 便可以將異步事件用同步語法來處理，就好像是老樹開新花一樣，寫起來的風格與 Promise 完全不同：

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

通過把 setTimeout 包裝成 Promise，再用 await 關鍵字調用，可以看到結果會是同步執行的先出現 bar，再出現 foo，也就是開頭提到的將異步事件寫成同步處理。

再看一個例子：

async function withAsyncAwait() {
  for(let i = 0; i < 5; i++) {
    await wait(i*500, () => console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

代碼中實現了withAsyncAwait 函數，用 for 循環及 await 關鍵字反復執行 wait 函數；此處執行時，循環每次會按順序等待不同的秒數再執行下一次循環。

在使用 async/await 時，由于 await 關鍵字只能在 async function 中執行，使用時務必要記得要同時使用。

另外在用循環處理異步事件時，需要注意在 ES6 之后提供的很多 Array 方法都不支持 async/await 語法，如果這里用 forEach 取代 for，結果會變成同步執行，每隔 0.5 秒就打印出數字：

以上就是關于“JavaScript異步處理的方式有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。