成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

搞懂一道async await, promise， setTimeout執(zhí)行順序的前端面試題

Jrain / 3284人閱讀

摘要：不再廢話，下面見題執(zhí)行執(zhí)行輸出結(jié)果執(zhí)行執(zhí)行這道題最難理解的地方和的執(zhí)行順序，前面的結(jié)果一般沒有異議，如果不明白，百度一下變可以理解。

先指明這道題是面試題的改版，原題可以看：promise、async和await之執(zhí)行順序的那點(diǎn)事
這道題也不是我改的，出處見：async/await 執(zhí)行順序詳解

這兩篇文章寫的非常好，我仔細(xì)琢磨了一下，感覺受益匪淺，決定記錄一下自己的理解。
不再廢話，下面見題：

async function testSometing() {
    console.log("執(zhí)行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("執(zhí)行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

輸出結(jié)果：

1 test start...
2 執(zhí)行testSometing
3 promise start..
4 test end...
5 promise
6 testSometing
7 執(zhí)行testAsync
8 hello async
9 testSometing hello async

這道題最難理解的地方5和6的執(zhí)行順序，前面1~4的結(jié)果一般沒有異議，如果不明白，百度一下變可以理解。
5的結(jié)果是promise的then方法里輸出的，6打印的第一個(gè)await的返回結(jié)果。

下面先說一下async的await：
async 函數(shù)中可能會(huì)有 await 表達(dá)式，這會(huì)使 async 函數(shù)暫停執(zhí)行，將await的結(jié)果封裝成一個(gè)Promise，并等待解析完成后繼續(xù)執(zhí)行，
另外如果await 遇上async函數(shù)，阮一峰老師這么說明：
async 函數(shù)返回一個(gè) Promise 對(duì)象，當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到 await 就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

所以如果await遇到了 async函數(shù)，就會(huì)封裝兩次Promise，即：

const v1 = await testSometing();

可以理解成下面的代碼：

new Promise((resolve)=> {
 resolve(Promise.resolve(testSometing()));
}).then((val)=>{
  const v1 = val
  ...
})

按照這個(gè)思路，將題目await 都替換成promise：

function testSometing() {
    console.log("執(zhí)行testSometing");
    return "testSometing";
}

function testAsync() {
    console.log("執(zhí)行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    new Promise((resolve)=> {
     resolve(Promise.resolve(testSometing()));
    }).then((val)=>{
      const v1 = val
      console.log(v1);
      new Promise((resolve)=> {
         resolve(Promise.resolve(testAsync()));
      }).then((val)=>{
          const v2 = val
          console.log(v2);
          console.log(v1, v2);
      })
    })
    
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

執(zhí)行的結(jié)果如下：

test start...
執(zhí)行testSometing
promise start..
test end...
promise
testSometing
執(zhí)行testAsync
hello async
testSometing hello async

大家可以和最上面的結(jié)果對(duì)比一下，哈哈！完全一樣。

這道題應(yīng)該算是明白了，但是我又發(fā)現(xiàn)一個(gè)新的問題，現(xiàn)在還沒搞明白，請(qǐng)大神解答

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

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

相關(guān)文章

  • 用一道大廠面試題帶你搞懂事件循環(huán)機(jī)制

    本文涵蓋 面試題的引入 對(duì)事件循環(huán)面試題執(zhí)行順序的一些疑問 通過面試題對(duì)微任務(wù)、事件循環(huán)、定時(shí)器等對(duì)深入理解 結(jié)論總結(jié) 面試題 面試題如下，大家可以先試著寫一下輸出結(jié)果，然后再看我下面的詳細(xì)講解，看看會(huì)不會(huì)有什么出入，如果把整個(gè)順序弄清楚 Node.js 的執(zhí)行順序應(yīng)該就沒問題了。 async function async1(){ console.log(async1 start) ...

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

  • 「今日頭條」前端面試題和思路解析

    摘要：一篇文章和一道面試題最近，有篇名為張圖幫你一步步看清和的執(zhí)行順序的文章引起了我的關(guān)注。作者用一道年今日頭條的前端面試題為引子，分步講解了最終結(jié)果的執(zhí)行原因。從字面意思理解，讓我們等等。當(dāng)前的最新版本，在這里的執(zhí)行順序上，的確存在有問題。 一篇文章和一道面試題 最近，有篇名為 《8張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序》 的文章引起了我的關(guān)注。 作者用...

    寵來也 評(píng)論0 收藏0

  • 前端 100 問：能搞懂80%的請(qǐng)把簡(jiǎn)歷給我

    摘要：解析第題第題為什么的和的中不能做異步操作解析第題第題京東下面代碼中在什么情況下會(huì)打印解析第題第題介紹下及其應(yīng)用。盡量減少操作次數(shù)。解析第題第題京東快手周一算法題之兩數(shù)之和給定一個(gè)整數(shù)數(shù)組和一個(gè)目標(biāo)值，找出數(shù)組中和為目標(biāo)值的兩個(gè)數(shù)。 引言 半年時(shí)間，幾千人參與，精選大廠前端面試高頻 100 題，這就是「壹題」。 在 2019 年 1 月 21 日這天，「壹題」項(xiàng)目正式開始，在這之后每個(gè)工...

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

  • 最后一次搞懂 Event Loop

    摘要：由于是單線程的，這些方法就會(huì)按順序被排列在一個(gè)單獨(dú)的地方，這個(gè)地方就是所謂執(zhí)行棧。事件隊(duì)列每次僅執(zhí)行一個(gè)任務(wù)，在該任務(wù)執(zhí)行完畢之后，再執(zhí)行下一個(gè)任務(wù)。 Event Loop 是 JavaScript 異步編程的核心思想，也是前端進(jìn)階必須跨越的一關(guān)。同時(shí)，它又是面試的必考點(diǎn)，特別是在 Promise 出現(xiàn)之后，各種各樣的面試題層出不窮，花樣百出。這篇文章從現(xiàn)實(shí)生活中的例子入手，讓你徹底理解 E...

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

  • 8張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序

    摘要：第部分畫圖一步步看清宏任務(wù)微任務(wù)的執(zhí)行過程我們以開篇的經(jīng)典面試題為例，分析這個(gè)例子中的宏任務(wù)和微任務(wù)。注意這里只是把推入微任務(wù)隊(duì)列，并沒有執(zhí)行。執(zhí)行結(jié)束，才能繼續(xù)執(zhí)行后面的代碼如圖此時(shí)當(dāng)前宏任務(wù)都執(zhí)行完了，要處理微任務(wù)隊(duì)列里的代碼。 8張圖讓你一步步看清 async/await 和 promise 的執(zhí)行順序 為什么寫這篇文章？ 測(cè)試一下自己有沒有必要看 需要具備的前置基礎(chǔ)知識(shí) 主...

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

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

0條評(píng)論

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