<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          你真的了解 Promise 嗎?Promise 必知必會(十道題)

          時間:?2017-11-10閱讀:?2318標簽:?Promise
          Promise 想必大家十分熟悉,想想就那么幾個 api,可是你真的了解 Promise 嗎?本文根據 Promise 的一些知識點總結了十道題,看看你能做對幾道。
          以下 promise 均指代 Promise 實例。

          題目一

          const promise = new Promise((resolve, reject) => {
            console.log(1)
            resolve()
            console.log(2)
          })
          promise.then(() => {
            console.log(3)
          })
          console.log(4)


          運行結果:

          1
          2
          4
          3

          解釋:Promise 構造函數是同步執行的,promise.then 中的函數是異步執行的。

          題目二

          const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve('success')
            }, 1000)
          })
          console.log(promise)
          promise
            .then(() => {
              console.log(promise)
              throw new Error('error!!!')
            })
            .catch(err => {
              console.log(promise)
            })


          運行結果:

          Promise {  }
          Promise { 'success' }
          Promise { 'success' }

          解釋:promise 有 3 種狀態:pending、fulfilled 和 rejected。狀態改變只能是 pending->fulfilled 或者 pending->rejected,狀態一旦改變則不能再變。

          題目三

          const promise = new Promise((resolve, reject) => {
            resolve('success1')
            reject('error')
            resolve('success2')
          })
          
          promise
            .then((res) => {
              console.log('then: ', res)
            })
            .catch((err) => {
              console.log('catch: ', err)
            })


          運行結果:

          then: success1

          解釋:構造函數中的 resolve 或 reject 只有第一次執行有效,多次調用沒有任何作用,呼應代碼二結論:promise 狀態一旦改變則不能再變。

          題目四

          Promise.resolve(1)
            .then((res) => {
              console.log(res)
              return 2
            })
            .catch((err) => {
              return 3
            })
            .then((res) => {
              console.log(res)
            })


          運行結果:

          1
          2

          解釋:promise 可以鏈式調用。提起鏈式調用我們通常會想到通過 return this 實現,不過 Promise 并不是這樣實現的。promise 每次調用 .then 或者 .catch 都會返回一個新的 promise,從而實現了鏈式調用。

          題目五

          const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
              console.log('once')
              resolve('success')
            }, 1000)
          })
          
          const start = Date.now()
          promise.then((res) => {
            console.log(res, Date.now() - start)
          })
          promise.then((res) => {
            console.log(res, Date.now() - start)
          })


          運行結果:

          once
          success 1005
          success 1007

          解釋:promise 的 .then 或者 .catch 可以被調用多次,但這里 Promise 構造函數只執行一次。或者說 promise 內部狀態一經改變,并且有了一個值,那么后續每次調用 .then 或者 .catch 都會直接拿到該值。

          題目六

          Promise.resolve()
            .then(() => {
              return new Error('error!!!')
            })
            .then((res) => {
              console.log('then: ', res)
            })
            .catch((err) => {
              console.log('catch: ', err)
            })


          運行結果:

          then: Error: error!!!
              at Promise.resolve.then (...)
              at ...

          解釋:.then 或者 .catch 中 return 一個 error 對象并不會拋出錯誤,所以不會被后續的 .catch 捕獲,需要改成其中一種:

          1. return Promise.reject(new Error(‘error!!!’))
          2. throw new Error(‘error!!!’)

          因為返回任意一個非 promise 的值都會被包裹成 promise 對象,即 return new Error(‘error!!!’) 等價于 return Promise.resolve(new Error(‘error!!!’))。

          題目七

          const promise = Promise.resolve()
            .then(() => {
              return promise
            })
          promise.catch(console.error)


          運行結果:

          TypeError: Chaining cycle detected for promise #
              at 
              at process._tickCallback (internal/process/next_tick.js:188:7)
              at Function.Module.runMain (module.js:667:11)
              at startup (bootstrap_node.js:187:16)
              at bootstrap_node.js:607:3

          解釋:.then 或 .catch 返回的值不能是 promise 本身,否則會造成死循環。類似于:

          process.nextTick(function tick () {
            console.log('tick')
            process.nextTick(tick)
          })

          題目八

          Promise.resolve(1)
            .then(2)
            .then(Promise.resolve(3))
            .then(console.log)


          運行結果:

          1

          解釋:.then 或者 .catch 的參數期望是函數,傳入非函數則會發生值穿透。

          題目九

          Promise.resolve()
            .then(function success (res) {
              throw new Error('error')
            }, function fail1 (e) {
              console.error('fail1: ', e)
            })
            .catch(function fail2 (e) {
              console.error('fail2: ', e)
            })


          運行結果:

          fail2: Error: error
              at success (...)
              at ...

          解釋:.then 可以接收兩個參數,第一個是處理成功的函數,第二個是處理錯誤的函數。.catch 是 .then 第二個參數的簡便寫法,但是它們用法上有一點需要注意:.then 的第二個處理錯誤的函數捕獲不了第一個處理成功的函數拋出的錯誤,而后續的 .catch 可以捕獲之前的錯誤。當然以下代碼也可以:

          Promise.resolve()
            .then(function success1 (res) {
              throw new Error('error')
            }, function fail1 (e) {
              console.error('fail1: ', e)
            })
            .then(function success2 (res) {
            }, function fail2 (e) {
              console.error('fail2: ', e)
            })


          題目十

          process.nextTick(() => {
            console.log('nextTick')
          })
          Promise.resolve()
            .then(() => {
              console.log('then')
            })
          setImmediate(() => {
            console.log('setImmediate')
          })
          console.log('end')


          運行結果:

          end
          nextTick
          then
          setImmediate

          解釋:process.nextTick 和 promise.then 都屬于 microtasks,而 setImmediate 屬于 macrotasks,在事件循環的 check 階段執行。事件循環的每個階段(macrotasks)之間都會執行 microtasks,事件循環的開始會先執行一次 microtasks。


          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/87

          這幾個Promise的輸出到底是?

          我們使用構造函數方法創建一個Promise實例,立即使用 reject 回調觸發一個錯誤。catch處理程序的工作方式類似于DOM的 .addeventlistener(事件、回調)或事件發射器的 .on(事件、回調),其中可以添加多個回調。每個回調都具有相同的參數。

          ES6之Promise

          所謂的 promise,簡單的來說就是一個容器,里面保存著某個未來才會結束的事件(也就是我們的異步操作)的結果。從語法上面來說,Promise 是一個對象,從它可以獲取異步操作的消息。Promise 提供統一的 API,各種異步操作都可以用同樣的方法進行處理。

          從 callback 到 promise

          說起回調(callback),那可以說是 JS 最基礎的異步調用方式,是 JS 為解決阻塞請求而量身定制出的一種設計模式,在 JS 或是說前端大潮中有著舉足輕重的影響

          Promise對象 3 種妙用

          作為一個前端,說不了解 Promise 對象用法的基本不存在,這里就不對功能用法進行介紹了。但本文將會講述你可能不知道的 Promise 3 種奇妙用法。當然,每種用法都會有其適用的特殊場景。

          Callback Hell和ECMAScript6 Promise

          回調地域 既一個異步請求需要另一個異步請求結果;由于 Javascript 是單線程的,所以這里執行順序是 ajax1 -> ajax2 -> ajax3 -> ajax4;但是又由于這四個是異步操作

          手寫實現Promise的相關方法

          Promise 作為 JS 社區的異步解決方案,為開發者提供了.then()、Promise.resolve()、Promise.reject()等基本方法。除此之外,為了更方便地組合和控制多個的 Promise 實例,也提供了.all()、.race()等方法。

          Promise 使用、原理以及實現過程

          promise 是目前 JS 異步編程的主流解決方案,遵循 Promises/A+ 方案。promise 對象原型上有一個 then 方法,then 方法會返回一個新的 promise 對象,并且將回調函數 return 的結果作為該 promise resolve 的結果

          Js Promise的并行和串行

          Promise.all是所有的Promise執行完畢后(reject|resolve)返回一個Promise對象。最近在開發一個項目中,需要等接口拿到全部數據后刷新頁面,取消loding效果

          ES6 Promise

          最近一段時間在重溫ES6,Promise應該是是ES6新特性中非常重要的一部分內容。其實Promise在我日常開發中已經用得比較多,但大多數時候只是知道Promise可以用來實現異步編程,也只限于單純地會用罷了,并沒有時間深入去學習過

          Promise.resolve()詳解

          Promise.resolve等價于下面的寫法,有時需要將現有對象轉為 Promise 對象,Promise.resolve方法就起到這個作用。Promise.resolve方法的參數分成四種情況。那么 then 返回的 Promise 將會成為接受狀態(resolve)

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网