JS每日一題: 如何理解es6中的Promise？

JS每日一題發表於2019-01-24
JS每日一題Promise

20190123問:

如何理解es6中的Promise？

試題解析：考查對JS中同步非同步的理解，及工作中常用的使用場景

參考回答

js是單執行緒的，也就是說一次只能完成一個任務，為了解決這個問題，js將任務的執行模式分為兩種， 同步和非同步, 在es5中我們處理非同步只能通過的回撥的方式進行處理，在多層非同步中，回撥會一層一層巢狀，也就是所謂的回撥地獄，promise就是非同步程式設計的一種解決方案

Promise

特點:

  • 物件的狀態不受外界影響, promise物件代表一個非同步操作，有三種狀態pendding(進行中), fulfilled(成功), rejected(失敗)
  • 一旦狀態改變，就不會再變, 狀態的改變只有兩種可能, pendding =>
    fulfilled及pendding =>
    rejected

基本用法:

const promise = new Promise(function(resolve, reject) { 
 // ... some code  if (/* 非同步操作成功 */){ 
   resolve(value);
 // 將狀態從pendding變成fulfilled  
  } else { 
   reject(error);
 // 將狀態從pendding變成rejected  
  }
  });
複製程式碼

promise 生成例項後可以使用then方法接收resolved狀態和rejected狀態的回撥函式

    promise.then( ()=>
 { 
       console.log('resolved')    
  }, () =>
 { 
       console.log('rejected')    
  })複製程式碼

promise原型上具有catch方法， catch方法是rejection的別名， 用於指定發生錯誤時的回撥函式

    promise.then( ()=>
 { 
       console.log('resolved')    
  }, () =>
 { 
       console.log('rejected')    
  }).catch( (err) =>
 { 
       console.log('catch')    
  })複製程式碼

promise原型上具有finally方法，用於不管promise物件最後的狀態如何，都會執行的操作

    promise.then( ()=>
 { 
       console.log('resolved')    
  }, () =>
 { 
       console.log('rejected')    
  }).finally( (err) =>
 { 
       console.log('end')    
  })複製程式碼

Promise.all

Promise.all方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項

簡單使用:

const p = Promise.all([p1, p2, p3]);
複製程式碼

特點:

  • 引數都是promise例項，如果不是會呼叫promise.resolve方法將其轉為promise例項
  • p的獎態由傳入的promise例項的狀態決定
    • promise例項狀態都變成fulfilled,p狀態為fulfilled
    • promise例項狀態一個變成rejected,p狀態為rejected
題後思考

為何實現一個promise

往期

JS每日一題: 前端的快取有哪些？都適用什麼場景？區別是什麼？
JS每日一題: Call，Apply，Bind的使用與區別，如何實現一個bind？
JS每日一題: 說說你對前端模組化的理解
JS每日一題: web安全攻擊手段有哪些？以及如何防範

關於JS每日一題

JS每日一題可以看成是一個語音答題社群
每天利用碎片時間採用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

  • 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點選加入答題

來源：https://juejin.im/post/5c4985d46fb9a049ae083ff4

相關文章