本篇內(nèi)容主要講解“web中異步編程的方式有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“web中異步編程的方式有哪些”吧!
因?yàn)?f1 是一個(gè)需要一定時(shí)間的函數(shù)，所以可以將 f2 寫成 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)致代碼高度耦合
腳本的執(zhí)行不取決代碼的順序，而取決于某一個(gè)事件是否發(fā)生。
事件監(jiān)聽(tīng)的demo
$(document).ready(function(){ console.log('DOM 已經(jīng) ready')
});發(fā)布/訂閱模式是利用一個(gè)消息中心，發(fā)布者發(fā)布一個(gè)消息給消息中心，訂閱者從消息中心訂閱該消息，。類似于 vue 的父子組件之間的傳值。
發(fā)布訂閱模式的 demo
//訂閱done事件$('#app').on('done',function(data){ console.log(data)
})//發(fā)布事件$('#app').trigger('done,'haha')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 函數(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函數(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) // })到此，相信大家對(duì)“web中異步編程的方式有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
