ES6--异步操作之Promise

1. 什么是Promise

Promise是ES6中新增的异步编程解决方案，体现在代码中它是一个对象

• 可以通过 Promise 构造函数来实例化。
• new Promise(cb) ===> 实例的基本使用 Pending Resolved Rejected
  *
• 两个原型方法：
• • Promise.prototype.then()
• • Promise.prototype.catch()
    *
• 两个常用的静态方法：
• • Promise.all()
• • Promise.resolve()
• 
  
  • Promise的状态
• • new Promise(cb)
• • Pending (进行中) ===> Resolved (已完成)
• • Pending (进行中) ===> Rejected (已失败)

举个栗子

var imgs = ['http://i1.piimg.com/1949/4f411ed22ce88950.jpg', 'http://i1.piimg.com/1949/5a35e8c2b246ba6f.jpg', 'http://i1.piimg.com/1949/1afc870a86dfec5f.jpg'];
const p = new Promise(function (resolve, reject){
  const img = new Image();
  img.src = '';
  img.onload = function (){
    resolve(this);
  };
  img.onerror = function (){
    reject(new Error('图片加载失败'));
  };
});
console.log(123);
p.then(function (img){
  console.log('加载完成');
  document.body.appendChild(img)
}).catch(function (err){
  console.log(err);
})
console.log(456);

打印结果为 123，456，Error:图片加载失败
将上面函数封装一下，第一个图片会加载进来，如下所示

function loadImg(url) {
  var p = new Promise(function (resolve, reject) {
    var img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(this);
    };
    img.onerror = function () {
      reject(new Error('图片加载失败'));
    };
  });
  return p;
}

loadImg(imgs[0]).then(function (img){
  document.body.appendChild(img)
})

2. Promise.all

• Promise.all 可以将多个Promise实例包装成一个新的Promise实例
• • 当所有Promise实例的状态都变成resolved，Promise.all的状态才会变成resolved，此时返回值组成一个数组，传递给then中的resolve函数。
• • 只要其中有一个被rejected，Promise.all的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

举个栗子

function loadImg(url) {
  var p = new Promise(function (resolve, reject) {
    var img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(this);
    };
    img.onerror = function () {
      reject(new Error('图片加载失败'));
    };
  });
  return p;
}

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

allDone.then(function (datas){
  datas.forEach(function(item, i) {
    document.body.appendChild(item);
  });
}).catch(function (err){
  console.log(err);
})

结果是没有一张打印出来，而且控制台报错

3. Promise.resolve

1) 参数是Promise实例，将不做任何修改、原封不动地返回这个实例。

Promise.resolve(loadImg(imgs[0])).then(function (img){
  document.body.appendChild(img);
})

第一张图片添加进来

2) 将对象转为Promise对象，然后就立即执行thenable对象的then方法。

Promise.resolve({
  then(resolve, reject){
    const img = new Image();
    img.src = imgs[1];
    img.onload = function (){
      resolve(this);
    }
  }
}).then(function (img){
  document.body.appendChild(img);
});

3) 参数是基本的数据类型或者不传参数

Promise.resolve('miaov').then(function (str){
  console.log(str);//miaov
})

var p = Promise.resolve();
console.log(p);//resolve