您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“js怎么實(shí)現(xiàn)異步串行與異步并行”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“js怎么實(shí)現(xiàn)異步串行與異步并行”吧!
串行:這個(gè)就像隊(duì)列一樣,一個(gè)執(zhí)行完,下一個(gè)再執(zhí)行,比如js同步執(zhí)行
并發(fā):是指這個(gè)系統(tǒng)擁有處理多個(gè)任務(wù)的能力,在一定時(shí)間發(fā)出,不需要同時(shí)性執(zhí)行。js的異步消息隊(duì)列讓js擁有并發(fā)的能力
比如執(zhí)行多個(gè)settimeout 它會(huì)掛載在消息隊(duì)列,然后依次執(zhí)行
并行:是指這個(gè)系統(tǒng)擁同時(shí)處理多個(gè)任務(wù)的能力,屬于多線程的一種方式,而js是屬于單線程 雖然可以通過(guò)worker來(lái)創(chuàng)建多線程,但是子線程
完全受主線程控制,沒(méi)有改變JavaScript單線程的本質(zhì)
串行示意圖:
有人會(huì)問(wèn),異步不是都在消息隊(duì)列嗎,不就是一個(gè)一個(gè)執(zhí)行了嗎?
舉個(gè)例子,如果本身就是串行執(zhí)行,那么你現(xiàn)在執(zhí)行2給個(gè)任務(wù),一個(gè)是5秒后打印console.log(1),一個(gè)是十秒后打印console.log(2)
按照串行應(yīng)該是15秒執(zhí)行完畢,但實(shí)際耗時(shí)是10秒,如上這是并發(fā),
console.time() setTimeout(() => { console.log(1) }, 5000); setTimeout(() => { console.log(2) console.timeEnd() }, 10000);
大多時(shí)候我們可以用 promise 和async await來(lái)解決
promise
比較少的時(shí)候,可以用.then來(lái)實(shí)現(xiàn)串行
var a = function() { return new Promise((resolve, reject) => { setTimeout(() => { consloe.log('a') resolve('a') }, 3000) }) } var b = function() { return new Promise((resolve, reject) => { setTimeout(() => { consloe.log('b') resolve('b') }, 2000) }) }; console.time('test') a().then((aa) => { b().then((bb) => { console.log(`${aa}-${bb}`) console.timeEnd('test') }) })
async await
我們改造一下,明顯使用await看起來(lái)更加清晰
var a = function() { return new Promise((resolve, reject) => { setTimeout(() => { consloe.log('a') resolve('a') }, 3000) }) } var b = function() { return new Promise((resolve, reject) => { setTimeout(() => { consloe.log('b') resolve('b') }, 2000) }) }; (async () => { console.time('test') var aa = await a() var bb = await b() console.log(`${aa}-${bb}`) console.timeEnd('test') })()
但當(dāng)我們有多個(gè)異步,比如2000個(gè)該如何
var createPromise = function(time) { // then中的回調(diào)函數(shù) return (resolve, reject) => { return new Promise((resolve, reject) => { setTimeout(() => { //模擬請(qǐng)求 (真實(shí)使用把time設(shè)置為0,將resolve傳入異步函數(shù)中) console.log('timein' + time) resolve(); //在異步處理結(jié)束后resolve }, time * 1000) }) } } var arr = [createPromise(2), createPromise(3), createPromise(1), createPromise(4), createPromise(5)]; function serpromise(arr) { arr.reduce((pre, next, index, carr) => { return pre.then(next) }, Promise.resolve()) } // 相當(dāng)于 // Promise.resolve().then(createPromise(2)).then(createPromise(1))...... serpromise(arr)
async await
var createPromise = function(time) { return () => { return new Promise((resolve, reject) => { setTimeout(() => { //模擬請(qǐng)求 (真實(shí)使用把time設(shè)置為0,將resolve傳入異步函數(shù)中) console.log('timein' + time) resolve(); //在異步處理結(jié)束后resolve }, time * 1000) }) } } var arr = [createPromise(2), createPromise(3), createPromise(1), createPromise(4), createPromise(5)]; var fn = async function(promiseArr) { for (let i = 0, len = arr.length; i < len; i++) { let currentPromise = promiseArr[i] var result = await currentPromise() } } fn(arr)
通過(guò)打印可以看出如過(guò)是并發(fā)的打印會(huì)是1,2,3,4,5
并行示意圖:
js并不能并行,我們只是可以思考如何卡在abc都執(zhí)行完成,這里可以用promise.all 來(lái)輕松實(shí)現(xiàn)
const a = new Promise((resolve, reject) => { //模擬異步任務(wù) setTimeout(function() { resolve('a'); }, 1000) }) .then(result => result) .catch(e => { }) const b = new Promise((resolve, reject) => { setTimeout(function() { // resolve('b'); reject('Error in b'); }, 1000) }) .then(result => result) .catch(e => e) Promise.all([a, b]).then(data => { console.log('data', data) }) .catch(e => console.log('erro', e));
這里需要注意的是,all能接受的 resolve reject都行,所以需要每個(gè)自己去處理異常
多個(gè)異步
promise
var createPromise = function(time) { return new Promise((resolve, reject) => { setTimeout(() => { console.log('time', time); resolve(time) }, time * 1000) }) } var arr = [createPromise(2), createPromise(3), createPromise(1), createPromise(4), createPromise(5)]; Promise.all(arr).then(data => { console.log('data', data) })
asnyc await
var createPromise = function(time) { return new Promise((resolve, reject) => { setTimeout(() => { console.log('time', time); resolve(time) }, time * 1000) }) } var arr = [createPromise(2), createPromise(3), createPromise(1), createPromise(4), createPromise(5)]; var fn = async function(promiseArr) { let awaitArr = [] for (let i = 0, len = arr.length; i < len; i++) { let currentPromise = promiseArr[i] let result = await currentPromise awaitArr.push(result) } return awaitArr } // async 返回的是一個(gè)promise fn(arr).then(data => { console.log('data', data); })
到此,相信大家對(duì)“js怎么實(shí)現(xiàn)異步串行與異步并行”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。