《es6标准入门》知识整理（5）- Promise

背景

早就在项目中使用过 promise，当时在用 angular 作项目的时候，也探寻过 promise 和 observable 的优劣。可是一直没特别全面的去了解过 promise。如今在看关于 es6 标准的书，仍是顺手把它的相关知识总结总结吧。

理解 Promise

Promise，像 observable 同样，是异步编程的一种解决方案。它指的是在一个容器里，保存着将来才会获得的事件结果。也就是说当事件的完成时间是不肯定或太长了的时候，咱们就能够建立一个Promise来解决问题。好比咱们在获取http请求的时候，因为网络或者各类各样的因素，请求的时间比较慢，咱们也不能在当前就立刻请求到结果，此时咱们就能够建立一个promise。

概述

promise对象，正如它的中文翻译同样“承诺”同样，有如下两个特色：

（1）对象状态不受外界影响：一个 promise 对象有：pending→fulfilled→rejected 三种状态。只有异步操做的结果能够决定当前属于哪一种状态；

（2）一旦状态改变，就不会再变；promise 对象状态改变，只有：pending→fullilled（失败）和pending→rejected（失败）这两种。只要这两种状态之一产生，就会一直保持这个结果，这时称为 resolved.

正由于有了 promise 对象，咱们能够将异步操做以同步流程表达出来，避免了层层嵌套的回调函数。可是当某些事件不断地反复发生，用 observable 比部署 Promise 是更好地选择。

基本用法

下面是一个promise实例：

const promise = new Promise(function (resolve, reject) {
    	if(success) {
    		resolve(value);
    	} else {
    		reject(error)
    	}
    });

可知，promise的两个参数是 resolve 和 reject;

• resolve的做用：将 promis 的状态从 pending→fulfilled,在异步操做成功时调用，并将异步操做的结果，做为参数传递出去；

• rejected的做用：将 promise 的状态从 pending→rejected，在异步操做失败时调用，并将异步操做报出的错误，做为参数传递出去。

promise 实例生成之后，能够用 then 方法分别调用当 resolved 和 rejected 时的回调函数：

let promise = new Promise(function(resolve, reject) {
        console.log('Promise');// //@1
        resolve();
     });
     promise.then(function() {
         console.log('hh success');// @2
     });
     console.log('haha');// @3

输出顺序为 @1→@3→@2; Promise 实例化后当即执行，因此最早输出 @1，而后，then 方法指定的回调函数，会在当前脚本全部同步任务执行完才会执行，因此 resolved 最后输出。

其余

• Promise.all():将多个Promise实例，包装成一个新的Promise实例；

const p = Promise.all([p1,p2,p3]);
    // 数组里的都是promise实例;
    // 当数组里的promise实例状态都为fulfilled时，p的状态才是fulfilled，他们的返回值组成数组，传递给p的回调函数;
    // 当数组中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值，被传递给p的回调函数。

• promise.race()

const p = Promise.race([p1,p2,p3]);
    //将多个promise实例，包装成一个新的Promise实例，可是它和promise.all()不同。
    //它指的是，只要p1,p2,p3之中有一个实例率先改变状态，p的状态就跟着改变。
    //那个率先改变的Promise实例的返回值，就传递给 p的回调函数。
    //race是竞争的意思，由此也能够区分两个。

• promise.resolve()：将现有对象转为Promise对象;即返回会一个promise:

const jsPromise = Promise.resolve($.ajax('/whatever.json'));

应用

加载图片：将图片的加载写成一个promise,一旦加载完成，promise的状态会发生变化

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