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

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

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

公司有個(gè)項(xiàng)目，類(lèi)似用戶(hù)自定義試卷試題的功能，很多表單需要驗(yàn)證，但是又要根據(jù)配置自動(dòng)生成，所以，每個(gè)輸入框都是一個(gè)組件，驗(yàn)證是異步，如果全部都用Promise看起來(lái)也很頭大，各方查閱，總結(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 的使用時(shí) 必須在async 函數(shù)中

easy? 表述可還清楚？有遺漏請(qǐng)指正。

GPU云服務(wù)器云服務(wù)器 async await 三句話 await-async async-await

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104669.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

vspiders 2019-08-20 14:33 評(píng)論0 收藏0