ES6 promise

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6 promise脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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)

脚本宝典总结

以上是脚本宝典为你收集整理的ES6 promise全部内容,希望文章能够帮你解决ES6 promise所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。