三句話總結(jié) async await 用法

Anonymous1 發(fā)布于2019-08-23 18:06 / 1348人閱讀

摘要：三句話看懂函數(shù)執(zhí)行結(jié)果都是總能等到結(jié)果即便是嵌套多層的異步的使用時必須在函數(shù)中表述可還清楚有遺漏請指正。

公司有個項目，類似用戶自定義試卷試題的功能，很多表單需要驗證，但是又要根據(jù)配置自動生成，所以，每個輸入框都是一個組件，驗證是異步，如果全部都用Promise看起來也很頭大，各方查閱，總結(jié)如下。

三句話看懂 async/await 1 async 函數(shù)執(zhí)行結(jié)果都是Promise

async function HiAsync() {
 return "hi";
}
async function HelloAsync() {
 return Promise.resolve("hello")
}

console.log(HiAsync())
console.log(HelloAsync())

HiAsync().then(r => {
    console.log(r) // "hi"
})
HelloAsync().then(r => {
    console.log(r)  // "hello"
})

2 await 總能等到結(jié)果

(即便是嵌套多層的異步)

function getSomething() {
    return "a";
}

async function testAsync() {
    return new Promise((re, rj) => {
        setTimeout(() => { re("b") }, 500)
    })
}
async function deepAsync() {
    let p2 = new Promise((re, rj) => {
        setTimeout(() => { re("c") }, 10)
    })
    return new Promise((re, rj) => {
        setTimeout(() => { re(p2) }, 500)
    })
}

async function test() {
    const v1 = await getSomething();
    console.log("v1",v1)
    const v2 = await testAsync();
    console.log("v2",v2)
    const v3 = await deepAsync();
    console.log("v3",v3);
}
test();

3 await 的使用時必須在async 函數(shù)中

easy? 表述可還清楚？有遺漏請指正。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104669.html

相關(guān)文章

細說async/await相較于Promise的優(yōu)勢

摘要：它細說了什么是函數(shù)，以及其相較于的優(yōu)勢。從最早的回調(diào)函數(shù)，到對象，再到函數(shù)，每次都有所改進，但又讓人覺得不徹底。所以，不能把它和回調(diào)函數(shù)搭配使用。但不用寫及其回調(diào)函數(shù)，這減少代碼行數(shù)，也避免了代碼嵌套。總結(jié)的異步編寫方式，從回調(diào)函數(shù)到再到。前言介于上一篇「今日頭條」前端面試題和思路解析中提到的 async/await，讓我想起了之前寫過的一篇文章，在此做個分享。它細說了什么是a...

J4ck_Chan 2019-08-23 14:14 評論0 收藏0
js斷點調(diào)試心得（以chrome瀏覽器為例）

摘要：原文轉(zhuǎn)載自這里斷點調(diào)試心得我是勤勞的搬運工，嗯這里相對原文有刪減，想看原文的請移步。那么接下來犯罪嫌疑人的身份鎖定在哪里呢事件觸發(fā)了，那么接下來的問題就是它內(nèi)部的函數(shù)問題了。這個功能非常的實用，大部分的調(diào)試都會使用到它。原文轉(zhuǎn)載自這里js斷點調(diào)試心得,我是勤勞的搬運工，嗯！這里相對原文有刪減，想看原文的請移步。 1、斷點調(diào)試是啥？難不難？用chrome瀏覽器打開頁面 → 按f12打...

Gu_Yan 2019-08-19 18:18 評論0 收藏0
Eventloop不可怕，可怕的是遇上Promise

摘要：就是每次傳入的函數(shù)最后是的任務(wù)之后，開始執(zhí)行，可以看到此時會批量執(zhí)行中的函數(shù)，而且還給這些中回調(diào)函數(shù)放入了一個這個很顯眼的函數(shù)之中，表示這些回調(diào)函數(shù)是在微任務(wù)中執(zhí)行的。下一模塊會對此微任務(wù)中的插隊行為進行詳解。有關(guān)Eventloop+Promise的面試題大約分以下幾個版本——得心應(yīng)手版、游刃有余版、爐火純青版、登峰造極版和究極變態(tài)版。假設(shè)小伙伴們戰(zhàn)到最后一題，以后遇到此類問題，都是...

olle 2019-08-23 16:28 評論0 收藏0
JS 異步編程六種方案

摘要：接下來介紹下異步編程六種方法。六生成器函數(shù)是提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同，最大的特點就是可以控制函數(shù)的執(zhí)行。參考文章前端面試之道異步編程的種方法你不知道的中卷函數(shù)的含義和用法替代的個理由前言我們知道Javascript語言的執(zhí)行環(huán)境是單線程。也就是指一次只能完成一件任務(wù)。如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，再執(zhí)行后面一個任務(wù)。這種模式雖然實現(xiàn)起...

longmon 2019-08-23 14:42 評論0 收藏0
js的異步回調(diào)之async/await

摘要：假如返回的不是一個對象，是其他的任何返回值，后面的語句會立即執(zhí)行。而關(guān)鍵字只有得到返回值后才繼續(xù)執(zhí)行，不就是同步么。最近在學(xué)習(xí)NodeJS框架koa V2，koa2的API很簡單，基于ES7 async/await實現(xiàn)異步代碼。很多人認(rèn)為async/await是解決異步終極解決方案，那我們就研究下async/await。前端業(yè)務(wù)邏輯越來越復(fù)雜，往往幾個 AJAX 請求之間互有依賴，有...

vspiders 2019-08-20 14:33 評論0 收藏0