ES6 promise

2019年8月24日 122次阅读 来源: dy_faith²º¹5

Promise

基礎概念：
Promise：是ES6中新增的異步編程解決方案，體現在代碼中它是一個對象，能夠經由過程Promise 組織函數來實例化。

new Promise(cb)
三種狀況：Pending、 Resolved、Rejected

兩個原型要領：
Promise.prototype.then()
Promise.prototype.catch()

兩個經常使用的靜態要領：
Promise.all() // 能夠將多個Promise實例包裝成一個新的Promise實例

  • 當一切Promise實例的狀況都變成resolved，Promise.all的狀況才會變成resolved，此時返回值構成一個數組，傳遞給then中的resolve函數。
  • 只需期中有一個被rejected，Promise.all的狀況就變成rejected，此時第一個被rejected的實例的返回值，會傳遞給p的回調函數。

Promise.resolve()

Pending ====> Resolved(已完成)
Pending ====> Rejected(已失利)

console.log(1)
const p = new Promise(function(resolve, reject){
    const img = new Image();
    img.src = '';
    img.onload = function(){
        resolve(this);
    }
    img.onerror = function(){
        reject(new Error('圖片加載失利'));
    }
})

p.then(function(img){
   document.body.appendChild(img);
}, function(err){
    console.log(err)
}) //第一個參數是實行勝利的，第二個函數是實行失利（平常不引薦第二個參數，採納catch）
console.log(2)
p.catch(function(err){
   console.log(err)
})
 // 1 2 error（異步，不影響背面加載）
 
 
var imgs = ['a.jpg', 'b.jpg', 'c.jpg']
function loadImg(url){
    const p = new Promise(function(resolve, reject){
        const img = new Image();
        img.src = '';
        img.onload = function(){
            resolve(this);
        }
        img.onerror = function(){
            reject(new Error('圖片加載失利'));
        }
    })
    return p;
}

const allDone = Promise.all([loadImg(imgs[0])], [loadImg(imgs[1])], [loadImg(imgs[2])]);

allDone.then(function(data){
   console.log(data) // data 就是一組數組
}).catch(function(err){
   console.log(err) //
})

Promise.resolve()三種用法
//參數是Promise實例，將不做任何修正、一成不變的返回這個實例

Promise.resolve(loadImg(imgs[0]).then(function(data){
  console.log(data) // 
})

//將對象轉為Promise對象，然後就馬上實行thenable對象的then要領

 Promise.resolve({
   then(resolve, reject){
       const img = new Image();
       img.src = imgs[0];
       img.onload = function (){
           resolve(this)
       }
   }
 }).then(function(data){
     
 })

//參數是一個基礎數據類型或許不傳參數 ，那末返回一個狀況為resolved的Promise對象

  Promise.resolve('abc').then(function(str){
   console.log(str); //abc
  })
  
  const p = Promise.resolve();
  console.log(p)
    原文作者：dy_faith²º¹5
    原文地址: https://segmentfault.com/a/1190000014378378
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞