這篇文章主要為大家展示了“javascript異步編程有哪些方式”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“javascript異步編程有哪些方式”這篇文章吧。

創新互聯是一家專業提供新邵企業網站建設,專注與網站設計制作、做網站、H5網站設計、小程序制作等業務。10年已為新邵眾多企業、政府機構等服務。創新互聯專業網站建設公司優惠進行中。

異步編程

眾所周知 JavaScript 是單線程工作，也就是只有一個腳本執行完成后才能執行下一個腳本，兩個腳本不能同時執行，如果某個腳本耗時很長，后面的腳本都必須排隊等著，會拖延整個程序的執行。那么如何讓程序像人類一樣可以多線程工作呢？以下為幾種異步編程方式的總結，希望與君共勉。

1. 回調函數

2. 事件監聽

3. 發布訂閱模式

4. Promise

5. Generator (ES6)

6. async (ES7)

異步編程傳統的解決方案：回調函數和事件監聽

初始示例：假設有兩個函數, f1 和 f2，f1 是一個需要一定時間的函數。

function f1() {
  setTimeout(function(){
    console.log('先執行 f1')
  },1000)
}
function f2() {
  console.log('再執行 f2')
}

回調函數

因為 f1 是一個需要一定時間的函數，所以可以將 f2 寫成 f1 的回調函數，將同步操作變成異步操作，f1 不會阻塞程序的運行，f2 也無需空空等待，例如 JQuery 的 ajax。

回調函數的demo：

function f1(f2){
  setTimeout(function(){
    console.log('先執行 f1')
  },1000)
  f2()
}
function f2() {
  console.log('再執行 f2')
}

效果如下：

 

總結：回調函數易于實現、便于理解，但是多次回調會導致代碼高度耦合

事件監聽

腳本的執行不取決代碼的順序，而取決于某一個事件是否發生。

事件監聽的demo

$(document).ready(function(){
   console.log('DOM 已經 ready')
});

發布訂閱模式

發布/訂閱模式是利用一個消息中心，發布者發布一個消息給消息中心，訂閱者從消息中心訂閱該消息，。類似于 vue 的父子組件之間的傳值。

發布訂閱模式的 demo

//訂閱done事件
$('#app').on('done',function(data){
  console.log(data)
})
//發布事件
$('#app').trigger('done,'haha')

Promise

Promise 實際就是一個對象， 從它可以獲得異步操作的消息，Promise 對象有三種狀態，pending(進行中)、fulfilled（已成功）和rejected（已失敗）。Promise 的狀態一旦改變之后，就不會在發生任何變化,將回調函數變成了鏈式調用。

Promise 封裝異步請求demo

export default function getMethods (url){
  return new Promise(function(resolve, reject){
    axios.get(url).then(res => {
      resolve(res)
    }).catch(err =>{
      reject(err)
    })
  })
}

getMethods('/api/xxx').then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

Generator

Generator 函數是一個狀態機，封裝了多個內部狀態。執行 Generator 函數會返回一個遍歷器對象，使用該對象的 next() 方法，可以遍歷 Generator 函數內部的每一個狀態，直到 return 語句。

形式上，Generator 函數是一個普通函數，但是有兩個特征。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式， yield是暫停執行的標記。

next() 方法遇到yield表達式，就暫停執行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。

Generator 的 demo

function *generatorDemo() {
 yield 'hello';
 yield 1 + 2;
 return 'ok';
}

var demo = generatorDemo()

demo.next()  // { value: 'hello', done: false } 
demo.next()  // { value: 3, done: false } 
demo.next()  // { value: 'ok', done: ture } 
demo.next()  // { value: undefined, done: ture }

async

async函數返回的是一個 Promise 對象，可以使用 then 方法添加回調函數，async 函數內部 return 語句返回的值，會成為 then 方法回調函數的參數。當函數執行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執行函數體內后面的語句。

1.await命令后面返回的是 Promise 對象，運行結果可能是rejected，所以最好把await命令放在try...catch代碼塊中。

async 的 demo1

async function demo() {
 try {
  await new Promise(function (resolve, reject) {
   // something
  });
 } catch (err) {
  console.log(err);
 }
}

demo().then(data => {
  console.log(data) // 
})

以上是“javascript異步編程有哪些方式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

名稱欄目：javascript異步編程有哪些方式
分享網址：http://m.newbst.com/article26/jesicg.html

成都網站建設公司_創新互聯，為您提供移動網站建設、全網營銷推廣、網站建設、微信公眾號、網站維護、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯