国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Jrain / 3251人閱讀

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

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

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

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打印的第一個await的返回結(jié)果。

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

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

const v1 = await testSometing();

可以理解成下面的代碼：

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

按照這個思路，將題目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é)果對比一下，哈哈！完全一樣。

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99053.html

相關(guān)文章

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

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

    ShowerSun 評論0 收藏0

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

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

    寵來也 評論0 收藏0

  • 前端 100 問：能搞懂80%的請把簡歷給我

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

    Scott 評論0 收藏0

  • 最后一次搞懂 Event Loop

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

    gself 評論0 收藏0

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

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

    weizx 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<