Promise構(gòu)造函數(shù)和then方法的執(zhí)行順序

Cruise_Chan 發(fā)布于2019-08-26 10:43 / 2263人閱讀

摘要：的基本用法如果執(zhí)行失敗，則調(diào)用如果執(zhí)行成功，則調(diào)用如果執(zhí)行成功，則繼續(xù)調(diào)用方法如果執(zhí)行失敗，則用捕獲失敗在的內(nèi)部，執(zhí)行順序是同步的。

Promise的基本用法

  let promise = new Promise((resolve, reject) => {
        console.log(1)
        // 如果執(zhí)行失敗，則調(diào)用reject()
        // reject("fail")
        
        console.log(2)
        
        // 如果執(zhí)行成功，則調(diào)用resolve()
        resolve("success")
      })

      // 如果執(zhí)行成功，則繼續(xù)調(diào)用then方法
      promise.then(res => {
        // console.log(res)
        console.log(3)
      })

      // 如果執(zhí)行失敗，則用catach捕獲失敗
      promise.catch(err => {
        console.log(err)
        console.log(4)
      })

在Promise的內(nèi)部，執(zhí)行順序是同步的。其次等內(nèi)部執(zhí)行完成后，調(diào)用再選擇調(diào)用thenorcatch方法。

所以這次輸出的結(jié)果：

1
2
3

then的執(zhí)行順序

   let promise = new Promise((resolve, reject) => {
        console.log(1)
        // 如果執(zhí)行失敗，則調(diào)用reject()
        // reject("fail")
        console.log(2)
        // 如果執(zhí)行成功，則調(diào)用resolve()
        resolve("success")
      })

      // 如果執(zhí)行成功，則繼續(xù)調(diào)用then方法
      promise.then(res => {
        console.log(res)
        console.log(3)
      })

      // promise內(nèi)部是同步的，但是then方法是異步的
      console.log(5)

then方法執(zhí)行是異步的，不用等到then的方法結(jié)果,會(huì)直接執(zhí)行console.log(5)

我們可以根據(jù)上面的代碼，豐富業(yè)務(wù)實(shí)際情況

      let promise = new Promise((resolve, reject) => {
        console.log(`開始執(zhí)行`)
        
        // 如果執(zhí)行成功，則調(diào)用resolve()
        resolve("success")
        
        console.log(`執(zhí)行中ing`)
      }).then(res => {
        console.log(res)
        console.log("執(zhí)行成功，繼續(xù)執(zhí)行下一步")
        return "第二then方法，開始"
      })

      // 如果執(zhí)行成功，則繼續(xù)調(diào)用then方法
      promise.then(res => {
        console.log(res)
      })

      // promise內(nèi)部是同步的，但是then方法是異步的
      console.log(`我會(huì)在then方法前，先執(zhí)行`)
      
      // 我們可以利用timeout方法在then方法執(zhí)行完成后，進(jìn)行執(zhí)行
      setTimeout(()=>console.log(`then方法執(zhí)行完成后，開始執(zhí)行`))

執(zhí)行結(jié)果：

1.開始執(zhí)行
2.執(zhí)行中ing
3.我會(huì)在then方法前，先執(zhí)行
4.執(zhí)行成功，繼續(xù)執(zhí)行下一步
5.第二then方法，開始
6.then方法執(zhí)行完成后，開始執(zhí)行

總結(jié)

其實(shí)比較好理解的方式是：每次當(dāng)promise執(zhí)行完成后，then是異步的，所以當(dāng)執(zhí)行then后，不會(huì)等它的結(jié)果，會(huì)直接執(zhí)行下面的代碼，但是setTimeout定時(shí)器本身會(huì)將執(zhí)行內(nèi)容調(diào)到任務(wù)隊(duì)列尾部，所以會(huì)等then方法執(zhí)行完成后才會(huì)調(diào)用定時(shí)器。