javascript之異步函數

WrBug 發布于2019-08-23 18:29 / 2788人閱讀

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

這篇文章詳細講解了JavaScript中的異步函數。 JavaScript中的異步代碼在很短的時間內從回調發展為Promise，再到ES2017的異步函數，現在我們可以像編寫同步代碼那樣編寫基于 Promise 的代碼，而且還不會阻塞主線程。

為什么需要async/await？

當promise在ES2015中引入時，目的是解決異步代碼的問題，但是promise不是最終的解決方案。

雖然Promise解決了著名的回調地獄，但是它自己引入了語法復雜性。

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

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

工作原理

異步函數返回一個promise，如下例所示：

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

調用一個異步函數時，您先要設置一個await，當您 await 某個 Promise 時，函數暫停執行，直至該 Promise 產生結果，并且暫停并不會阻塞主線程。如果 Promise 執行，則會返回值。如果 Promise 拒絕，則會拋出拒絕的值。因為異步函數去掉了所有回調。提高了代碼的可讀性，這是一個例子：

const doSomething = async () => {
    console.log(await doSomethingAsync())
}

一個簡單的例子

這是異步函數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")

上面代碼執行結果如下：

Before
After
//after 3s
I did something

Promise詳解

將async關鍵字添加到任何函數意味著該函數將返回一個promise。即使它沒有聲明，它也會在內部使它返回一個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)

代碼更易讀

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

我們下面用更復雜一點的代碼來演示。

例如，以下是使用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()

鏈接多個異步函數

異步函數可以非常容易地鏈接，并且語法比簡單的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)
})

將打印：

 I did something and I watched and I watched as well

調試更簡單

調試promise很難，因為調試器不會調試異步代碼。
Async / await使得這非常簡單，因為就像調試同步代碼一樣。

云服務器 GPU云服務器 javascript異步函數封裝異步函數 linux 函數異步 js 異步函數遞歸

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105322.html

javascript異步與promise

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

rollback 2019-08-23 14:52 評論0 收藏0
Javascript系列之javascript機制

摘要：異步任務必須指定回調函數，當異步任務從任務隊列回到執行棧，回調函數就會執行。事件循環主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為。事件循環事件循環是指主線程重復從消息隊列中取消息執行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
javascript異步中的回調

摘要：如果你把函數的指針地址作為參數傳遞給另一個函數，當這個指針被用來調用其所指向的函數時，我們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用于對該事件或條件進行響應。同期異步系列文章推薦談一談javascript異步javascript異步與promisejavascript異步之Promise.all()、Promise.ra...

WalkerXu 2019-08-23 14:48 評論0 收藏0
JS異步編程之callback

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

superw 2019-08-23 15:15 評論0 收藏0
探索Javascript 異步編程

摘要：因為瀏覽器環境里是單線程的，所以異步編程在前端領域尤為重要。除此之外，它還有兩個特性，使它可以作為異步編程的完整解決方案函數體內外的數據交換和錯誤處理機制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我們日常編碼中，需要異步的場景很多，比如讀取文件內容、獲取遠程數據、發送數據到服務端等。因為瀏覽器環境里Javascript是單線程的，...

Salamander 2019-08-22 10:35 評論0 收藏0