JS中如何讓異步執(zhí)行的方法同步執(zhí)行
前言
js中的方法默認(rèn)是異步執(zhí)行的,但是有時(shí)候我們有需要同步的執(zhí)行一些方法,這時(shí)就需要用到async和await來進(jìn)行操作,使得函數(shù)內(nèi)部的方法同步執(zhí)行,本人為小后端一枚,前端的一些知識(shí)體系理解不夠細(xì)致,難免有疏漏,希望大家多多包涵,但是方法是可行的。
1.先看會(huì)異步執(zhí)行的函數(shù)
這是要調(diào)用的方法
控制臺(tái)輸出順序
function2
function1
2.添加async 和await后變成同步
2.1 在方法名前加上async關(guān)鍵字
2.2 在需要等待的方法前加上 await(await 需要一個(gè)promise對(duì)象,在沒有等到promise對(duì)象執(zhí)行完畢,它會(huì)阻斷該函數(shù)后面代碼的執(zhí)行)
2.3 將方法體用Promise對(duì)象包起來
2.4 返回resolve
這時(shí)看控制臺(tái)輸出為
function1
function2
附:JavaScript將異步方法轉(zhuǎn)換為同步執(zhí)行的實(shí)用方法
要將異步方法轉(zhuǎn)換為同步執(zhí)行的方法,我們可以使用Promise
和async/await
的組合。下面是一個(gè)一般的步驟:
- 將異步邏輯封裝在一個(gè)
Promise
構(gòu)造函數(shù)中。 - 在
Promise
構(gòu)造函數(shù)中執(zhí)行異步邏輯,并在適當(dāng)?shù)奈恢檬褂?code>resolve和reject
來處理異步結(jié)果。 - 將異步方法的返回值傳遞給
resolve
,或者將錯(cuò)誤傳遞給reject
。 - 在調(diào)用異步方法的地方使用
await
關(guān)鍵字來等待異步方法的完成,并使用try/catch
來捕獲可能的異常。
下面是一個(gè)示例,將一個(gè)異步的延遲函數(shù)delayAsync
轉(zhuǎn)換為同步執(zhí)行的方法delaySync
:
function delayAsync(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Done'); }, ms); }); } async function delaySync(ms) { try { const result = await delayAsync(ms); console.log(result); // 繼續(xù)處理結(jié)果 } catch (error) { console.error(error); // 處理錯(cuò)誤 } } delaySync(2000);
在上述示例中,delayAsync
是一個(gè)異步的延遲函數(shù),它使用setTimeout
來實(shí)現(xiàn)延遲,并返回一個(gè)Promise
。delaySync
是一個(gè)同步執(zhí)行的方法,它使用await
關(guān)鍵字調(diào)用delayAsync
函數(shù),并使用try/catch
來捕獲可能的異常。
通過將異步方法轉(zhuǎn)換為同步執(zhí)行的方法,我們可以確保按照順序執(zhí)行代碼,并使用async/await
語法來處理結(jié)果和錯(cuò)誤。
總結(jié)
到此這篇關(guān)于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的文章就介紹到這了,更多相關(guān)JS異步執(zhí)行方法同步執(zhí)行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript Event學(xué)習(xí)第十章 一些可替換的事件對(duì)
為了讓我們的JavaScript驅(qū)動(dòng)的頁面對(duì)那些不能或者不想使用鼠標(biāo)的用戶也能很好的使用,我們對(duì)于像mouseover和click這樣的事件做一些處理,同樣的,對(duì)于非鼠標(biāo)事件也同樣的要我們的腳本執(zhí)行。2010-02-02原生javascript實(shí)現(xiàn)分享到朋友圈功能 支持ios和android
本文主要介紹網(wǎng)上一個(gè)牛人寫的js可以實(shí)現(xiàn)在UC瀏覽器和QQ瀏覽器中調(diào)用瀏覽器內(nèi)置的分享組件進(jìn)行分享。2016-05-05Egg.js 中 AJax 上傳文件獲取參數(shù)的方法
這篇文章主要介紹了Egg.js 中 AJax 上傳文件獲取參數(shù),需要的朋友可以參考下2018-10-10Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹
這篇文章主要介紹了Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹,本文講解了什么是短路表達(dá)式,并給出了一些示例,需要的朋友可以參考下2015-03-03原生JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖形驗(yàn)證碼,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考下2023-11-11