亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

javascript之異步函數(shù)

WrBug / 2829人閱讀

摘要：所以增加了異步函數(shù)，提高了代碼可讀性，對(duì)不太熟悉的人而言，幫助就更大了。因?yàn)楫惒胶瘮?shù)去掉了所有回調(diào)。這就是此代碼有效的原因它和以下一樣代碼更易讀正如上面示例所見，與回調(diào)和代碼相比，異步函數(shù)代碼看起來非常簡單。

這篇文章詳細(xì)講解了JavaScript中的異步函數(shù)。 JavaScript中的異步代碼在很短的時(shí)間內(nèi)從回調(diào)發(fā)展為Promise，再到ES2017的異步函數(shù)，現(xiàn)在我們可以像編寫同步代碼那樣編寫基于 Promise 的代碼，而且還不會(huì)阻塞主線程。

為什么需要async/await？

當(dāng)promise在ES2015中引入時(shí)，目的是解決異步代碼的問題，但是promise不是最終的解決方案。

雖然Promise解決了著名的回調(diào)地獄，但是它自己引入了語法復(fù)雜性。

所以ES2017增加了異步函數(shù)，提高了代碼可讀性，對(duì)不太熟悉 Promise 的人而言，幫助就更大了。

async/await使代碼看起來像是同步的，但它在后臺(tái)是異步和非阻塞的。

工作原理

異步函數(shù)返回一個(gè)promise，如下例所示：

const doSomethingAsync = () => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("I did something"), 3000)
    })
}

調(diào)用一個(gè)異步函數(shù)時(shí)，您先要設(shè)置一個(gè)await，當(dāng)您 await 某個(gè) Promise 時(shí)，函數(shù)暫停執(zhí)行，直至該 Promise 產(chǎn)生結(jié)果，并且暫停并不會(huì)阻塞主線程。 如果 Promise 執(zhí)行，則會(huì)返回值。 如果 Promise 拒絕，則會(huì)拋出拒絕的值。因?yàn)楫惒胶瘮?shù)去掉了所有回調(diào)。提高了代碼的可讀性，這是一個(gè)例子：

const doSomething = async () => {
    console.log(await doSomethingAsync())
}
一個(gè)簡單的例子

這是異步函數(shù)async / await的簡單示例：

const doSomethingAsync = () => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("I did something"), 3000)
    })
}
const doSomething = async () => {
    console.log(await doSomethingAsync())
}
console.log("Before")
doSomething()
console.log("After")

上面代碼執(zhí)行結(jié)果如下：

Before
After
//after 3s
I did something
Promise詳解

將async關(guān)鍵字添加到任何函數(shù)意味著該函數(shù)將返回一個(gè)promise。即使它沒有聲明，它也會(huì)在內(nèi)部使它返回一個(gè)promise。
這就是此代碼有效的原因：

const aFunction = async () => {
  return "test"
}
// This will alert "test"
 aFunction().then(alert)

它和以下一樣：

const aFunction = async () => {
  return Promise.resolve("test")
}
// This will alert "test"
aFunction().then(alert)
代碼更易讀

正如上面示例所見，與回調(diào)和promise代碼相比，異步函數(shù)代碼看起來非常簡單。

我們下面用更復(fù)雜一點(diǎn)的代碼來演示。

例如，以下是使用promises獲取JSON資源并解析它的方法：

const getFirstUserData = () => {
    // get users list
    return fetch("/users.json") 
        // parse JSON
        .then(response => response.json()) 
        // pick first user    
        .then(users => users[0]) 
        // get user data
        .then(user => fetch(`/users/${user.name}`)) 
        // parse JSON
        .then(userResponse => response.json()) 
}
getFirstUserData()

以下是使用await / async提供的相同功能：

const getFirstUserData = async () => {
    // get users list
    const response = await fetch("/users.json") 
    // parse JSON
    const users = await response.json() 
    // pick first user
    const user = users[0] 
    // get user data
    const userResponse = await fetch(`/users/${user.name}`) 
    // parse JSON
    const userData = await user.json() 
    
    return userData
}
getFirstUserData()
鏈接多個(gè)異步函數(shù)

異步函數(shù)可以非常容易地鏈接，并且語法比簡單的promise更具可讀性：

const promiseToDoSomething = () => {
    return new Promise(resolve => {
        setTimeout(() => resolve("I did something"), 10000)
    })
}
const watchOverSomeoneDoingSomething = async () => {
    const something = await promiseToDoSomething()
    return something + " and I watched"
}
const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
    const something = await watchOverSomeoneDoingSomething()
    return something + " and I watched as well"
}
watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
    console.log(res)
})

將打?。?/p> 

 I did something and I watched and I watched as well
調(diào)試更簡單

調(diào)試promise很難，因?yàn)檎{(diào)試器不會(huì)調(diào)試異步代碼。
Async / await使得這非常簡單，因?yàn)榫拖裾{(diào)試同步代碼一樣。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105322.html

相關(guān)文章

  • javascript異步與promise

    摘要：到這里，我已經(jīng)發(fā)出了一個(gè)請(qǐng)求買漢堡，啟動(dòng)了一次交易。但是做漢堡需要時(shí)間，我不能馬上得到這個(gè)漢堡，收銀員給我一個(gè)收據(jù)來代替漢堡。到這里，收據(jù)就是一個(gè)承諾保證我最后能得到漢堡。 同期異步系列文章推薦談一談javascript異步j(luò)avascript異步中的回調(diào)javascript異步之Promise.all()、Promise.race()、Promise.finally()javascr...

    rollback 評(píng)論0 收藏0

  • Javascript系列之javascript機(jī)制

    摘要：異步任務(wù)必須指定回調(diào)函數(shù)，當(dāng)異步任務(wù)從任務(wù)隊(duì)列回到執(zhí)行棧，回調(diào)函數(shù)就會(huì)執(zhí)行。事件循環(huán)主線程從任務(wù)隊(duì)列中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為。事件循環(huán)事件循環(huán)是指主線程重復(fù)從消息隊(duì)列中取消息執(zhí)行的過程。 參考鏈接：這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制https://zhuanlan.zhihu.com/p/...從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制...

    13651657101 評(píng)論0 收藏0

  • javascript異步中的回調(diào)

    摘要：如果你把函數(shù)的指針地址作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針被用來調(diào)用其所指向的函數(shù)時(shí)，我們就說這是回調(diào)函數(shù)?；卣{(diào)函數(shù)不是由該函數(shù)的實(shí)現(xiàn)方直接調(diào)用，而是在特定的事件或條件發(fā)生時(shí)由另外的一方調(diào)用的，用于對(duì)該事件或條件進(jìn)行響應(yīng)。 同期異步系列文章推薦談一談javascript異步j(luò)avascript異步與promisejavascript異步之Promise.all()、Promise.ra...

    WalkerXu 評(píng)論0 收藏0

  • JS異步編程之callback

    摘要：而異步則是相反，調(diào)用在發(fā)出之后，這個(gè)調(diào)用就直接返回了，所以沒有返回結(jié)果而是在調(diào)用發(fā)出后，被調(diào)用者通過狀態(tài)通知來通知調(diào)用者，或通過回調(diào)函數(shù)處理這個(gè)調(diào)用?？偨Y(jié)回調(diào)函數(shù)是異步編程中的基石，但同時(shí)也存在很多問題，不太適合人類自然語言的線性思維習(xí)慣。 為什么 JS 是單線程？ 眾所周知，Javascript 語言的執(zhí)行環(huán)境是單線程（single thread）。 所謂單線程，就是指一次只能完成一...

    superw 評(píng)論0 收藏0

  • 探索Javascript 異步編程

    摘要：因?yàn)闉g覽器環(huán)境里是單線程的，所以異步編程在前端領(lǐng)域尤為重要。除此之外，它還有兩個(gè)特性，使它可以作為異步編程的完整解決方案函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯(cuò)誤處理機(jī)制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我們?nèi)粘＞幋a中，需要異步的場景很多，比如讀取文件內(nèi)容、獲取遠(yuǎn)程數(shù)據(jù)、發(fā)送數(shù)據(jù)到服務(wù)端等。因?yàn)闉g覽器環(huán)境里Javascript是單線程的，...

    Salamander 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<