es6学习之Promise

一.含义

Promise是JavaScript的一种异步解决方案,具有3中状态(pending进行中,fulfilled已经成功,rejected已失败).

二.Promise的使用

1.Promise带有resolve(成功),reject(失败)两个参数
2.Promise内部立即执行,then在所有同步事件完成后执行,catch是捕捉错误,finally是成功或者失败都会执行的操作.

let promise = new Promise((resolve, reject) => {
    let flag = false;
    if (flag) {
        resolve('xxx');
    } else {
        reject(new Error("错了"));
    }
});

promise
    .then(data => {
        console.log('resolve', data);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(()=>{
        console.log('finally');
    });

三.Promise的各种方法

1.Promise.prototype.then()

• 捕捉resolve事件(必须)和reject事件(可选)
• then返回一个Promise,也就是可以是then().then()链式调用,但是then中要有return ,否则无法传递值

2.Promise.prototype.catch()

• catch捕获reject事件
• catch捕获then中方法运行出错的错误
• 建议总是在then后面跟catch方法

3.Promise.prototype.finally()

• 不管resolve或者reject,都会执行的方法

4.Promise.all()

• 将多个promise转换为一个promise,参数是具有iterator接口的数据结构,数据中可以不是promise,但是JavaScript会将他转化为promise
• 多个promise中只要有一个是reject则返回reject,全部resolve才会返回resolve

// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});
上面代码中，promises是包含 6 个 Promise 实例的数组，只有这 6 个实例的状态都变
成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函
数。

5.Promise.race()

• promise跟随多个promise中第一个状态改变的状态,即最先改变的promise为reject则返回reject,不管其他的,否则发牛resolve

6.Promise.resolve()

• 将现有对象转化为promise对象,并返回
• 如果参数是promise实例,则返回实例
• 如果参数是thenable对象,则会将thenable转化为Promise,立即执行对象的then方法

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

• 如果参数不是对象或者不具有then方法的对象,会返回一个全新的Promise,状态为resolve
• 如果参数没有,返回一个状态为resolve的Promise实例

7.Promise.reject()

• 返回一个状态为reject的promise实例
• 参数作为返回的promise实例的error参数

四.Promise的应用

1.加载图片

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};