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

超過(guò)10年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶(hù)，為自己降低成本，也就是為客戶(hù)降低成本。到目前業(yè)務(wù)范圍包括了：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，小程序定制開(kāi)發(fā)，微信開(kāi)發(fā)，App定制開(kāi)發(fā)，同時(shí)也可以讓客戶(hù)的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷(xiāo)和我們一樣獲得訂單和生意！

異步編程

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

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

2. 事件監(jiān)聽(tīng)

3. 發(fā)布訂閱模式

4. Promise

5. Generator (ES6)

6. async (ES7)

異步編程傳統(tǒng)的解決方案：回調(diào)函數(shù)和事件監(jiān)聽(tīng)

初始示例：假設(shè)有兩個(gè)函數(shù), f1 和 f2，f1 是一個(gè)需要一定時(shí)間的函數(shù)。

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

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

因?yàn)?f1 是一個(gè)需要一定時(shí)間的函數(shù)，所以可以將 f2 寫(xiě)成 f1 的回調(diào)函數(shù)，將同步操作變成異步操作，f1 不會(huì)阻塞程序的運(yùn)行，f2 也無(wú)需空空等待，例如 JQuery 的 ajax。

回調(diào)函數(shù)的demo：

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

效果如下：

 

總結(jié)：回調(diào)函數(shù)易于實(shí)現(xiàn)、便于理解，但是多次回調(diào)會(huì)導(dǎo)致代碼高度耦合

事件監(jiān)聽(tīng)

腳本的執(zhí)行不取決代碼的順序，而取決于某一個(gè)事件是否發(fā)生。

事件監(jiān)聽(tīng)的demo

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

發(fā)布訂閱模式

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

發(fā)布訂閱模式的 demo

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

Promise

Promise 實(shí)際就是一個(gè)對(duì)象， 從它可以獲得異步操作的消息，Promise 對(duì)象有三種狀態(tài)，pending(進(jìn)行中)、fulfilled（已成功）和rejected（已失?。?。Promise 的狀態(tài)一旦改變之后，就不會(huì)在發(fā)生任何變化,將回調(diào)函數(shù)變成了鏈?zhǔn)秸{(diào)用。

Promise 封裝異步請(qǐng)求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 函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)。執(zhí)行 Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，使用該對(duì)象的 next() 方法，可以遍歷 Generator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)，直到 return 語(yǔ)句。

形式上，Generator 函數(shù)是一個(gè)普通函數(shù)，但是有兩個(gè)特征。一是，function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)；二是，函數(shù)體內(nèi)部使用yield表達(dá)式， yield是暫停執(zhí)行的標(biāo)記。

next() 方法遇到y(tǒng)ield表達(dá)式，就暫停執(zhí)行后面的操作，并將緊跟在yield后面的那個(gè)表達(dá)式的值，作為返回的對(duì)象的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函數(shù)返回的是一個(gè) Promise 對(duì)象，可以使用 then 方法添加回調(diào)函數(shù)，async 函數(shù)內(nèi)部 return 語(yǔ)句返回的值，會(huì)成為 then 方法回調(diào)函數(shù)的參數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。

1.await命令后面返回的是 Promise 對(duì)象，運(yùn)行結(jié)果可能是rejected，所以最好把a(bǔ)wait命令放在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異步編程有哪些方式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：javascript異步編程有哪些方式-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://weahome.cn/article/djjdps.html