ES6 | 搞懂promise

【转】原文地址：https://www.cnblogs.com/lvdabao/p/es6-promise-1.html
首先感谢原作者吕大豹大神的文章，用大白话讲Promise，让小白比较容易搞懂Promise，这里做个记录，再贯通一下，也当是自己做笔记了。
先搞明白一个问题，什么是回调函数：

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应

回调函数就是把一个函数fn1()作为一个参数传递给另一个函数fn2()，当函数fn2()执行到某一步，或者满足某种条件的时候才执行传入的参数fun2()

1. 先看看promise是什么？

console.log('------Promise是什么：-----');

console.dir(Promise);

控制台查看到如下的结果：

Promise
发现 Promise 是一个构造函数，自身有all()、reject()、resolve()这几个眼熟的方法，prototype上有then()、catch()等同样很眼熟的方法。所以，用 Promise new 出来的对象，应该都有上述方法的：

// 实例化一个简单的 Promise 对象
let p = new Promise(function (resolve, reject) {
            // 执行一个异步操作
            setTimeout(() => {
                console.log('异步操作执行完毕');
                resolve('resolve 回调函数的结果');
            }, 1000);
        });

Promise 对象接收一个函数做为参数，并且该函数参数又有两个回调函数参数 resolve 和 reject， resolve 可以暂时理解为异步执行“成功”的回调函数， reject 可以暂时理解为异步执行“失败”的回调函数；确切的说Promise 对象并没有“成功”和“失败”这一说，只是

• resolve 回调函数将 Promise 状态置为 fullfiled ，
• reject 回调函数将 Promise 状态置为 rejected 。

运行上面的代码，会在1秒后输出一个结果“异步操作执行完毕”；
注意:

• 这里只是实例化了一个对象，并未调用它，但是传入的匿名函数已经执行了，这点需要注意。所以，一般需要将Promise实例对象封装一下，在需要的时候，去调用这个封装的函数即可，对上例进行修改：

  function runAsync() {
    let p = new Promise(function (resolve, reject) {
    // 执行一个异步操作
    setTimeout(() => {
      console.log('异步操作执行完毕');
      resolve('resolve 回调函数的结果');
        }, 1000);
     });
     return p;
  }
  // 调用封装的函数
  runAsync();// 异步操作执行完毕
  

• resolve('resolve 回调函数的结果'); 这段代码并没有什么效果呢？
  这是因为上面说了 resolve 是一个回调函数，但是并没有定义这个函数的逻辑操作 resolve('resolve 回调函数的结果'); 这段代码只是给 resolve() 函数传递了一个“resolve 回调函数的结果”参数而已，但是 resolve() 具体逻辑操作是什么，并未定义；带着这个问题继续往下进行

2. Promise 能做什么？

在封装的函数中，最后会 return 一个 Promise 实例，也就是说，执行这个函数我们得到了一个 Promise 实例对象。最开始，在控制台输出 Promise 结果可以看到有 then 、 catch 方法的，我们来用一下 then() 方法，then() 方法接受一个参数，这个参数也是函数，为这个函数参数传入一个参数 params ，然后运行下面的代码：

runAsync().then(function(params){
  console.log(params);
})

运行上面的代码，会在1秒后输出如下的结果：

then()
奇迹的发现，then() 传入的函数参数不就是 Promise 构造的实例中传入的那个 resolve 回调函数么，也就是说 resolve() 的执行逻辑是在 then()传递的函数参数中的，它在 runAsync() 这个异步任务执行完之后被执行了。这就是 Promise 的作用之一了：

• 解构回调函数：把原始的回调函数写法分离出来，写在 then()中， 也就是解构了，在异步操作执行完成之后，用链式调用的方式执行回调函数

Promise 链式调用
从表面上看， Promise 只是能够简化层层回调的写法，而实质上，Promise 的精髓是 “状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它相比传统的callback函数要简单，灵活。如下面一个场景：

runAsync().then(function (params) {
  console.log(params);
  return runAsync1();
}).then(function (params) {
  console.log(params);
  return runAsync2();
}).then(function (param) {
  console.log(params);
});

这样能够按顺序，每隔1秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。运行结果如下：

链式调用

runAsync2()、runAsync3()的内部逻辑同 runAsync() 一致，就不再写了

在 then() 方法中，也可以直接 return 数据，在后面的 then() 中就可以接收到数据了，比如把上面的代码修改一下：

runAsync().then(function (params) {
  console.log(params);
  return runAsync1();
}).then(function (params) {
  console.log(params);
  return params;
}).then(function (param) {
  console.log(params);
});

运行后，输出的结果是：

return 数据

reject 回调函数和 catch()方法的用法
上面了解了 resolve 回调函数和 then() 的用法，那么还有一个回调函数 reject 没用呢，这个回调函数又是做什么用的呢？事实上，前面的例子都是只有“执行成功”的回调，但是没有“执行失败”的情况，前面说过 reject 回调函数将 Promise 状态置为 rejected，这样我们在then()就能捕捉到，然后执行“失败”的情况的回调。下面做一个有“失败”的情况：

function getNum() {
  // promise 对象接收一个函数参数，并且该函数参数拥有两个函数参数，这两个函数参数是回调函数
  let p = new Promise(function (resolve, reject) {
    // 执行一个异步操作
    setTimeout(() => {
      let mathNum = Math.ceil(Math.random() * 10); //生成1-10的随机数
        if (mathNum <= 5) { // 如果数字 ≤ 5，则将promise的状态值为fullfield，可以理解为“成功了”
           console.log('执行完毕 call resolve()...');
           resolve('数字小于5'); // 执行 resolve 回调函数
         } else { // 如果数字大于5，则将Promise的状态置为 rejected ，可以理解为“失败了”
           console.log('执行完毕 call reject()...');
           reject('数字大于5'); // 执行 reject 回调函数
         }
     }, 1000);
  });
  // 返回Promise对象
  return p;
}

在最前面，在控制台输出 Promise 的时候，会发现，在 then() 方法里面，是可以传入两个参数的：

then()
下面调用 getNum 为 then() 方法传入两个回调函数参数：

getNum()
  .then(function (param) {
    console.log(param);
  }, function (param) {
    console.log(param);
});

执行代码，会得到以下两种结果的其中一种：

当随机数小于等于5的时候，结果如下：

结果1
当随机数大于5的时候，结果如下：
结果2
也就说，第二个函数参数执行了 reject 这个回调函数
这样的话，在then() 中也能触发 reject 这个回调函数，需要作为 then() 方法的第二个参数值传入
catch的作用
那么 catch() 这个方法是作何使用呢？

• 作用一：指定 reject 的回调
  catch作用之一和 then() 方法的第二个参数的作用一样，用来指定 reject 的回调，用法如下：

getNum()
  .then(function (param) {
    console.log(param);
  })
  .catch( function (param) {
    console.log(param);
});

执行代码发现同then()方法里面的第二个参数一样。

• 作用二：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），会进入到 catch() ，而不会中断js的执行
  修改上例的代码：

getNum()
  .then(function (param) {
    console.log(param);
    console.log(param1); //此处的param1 未定义
  })
  .catch( function (param) {
    console.log(param);
});

在 resolve 的回调函数逻辑中，输出了一个未定义的变量。如果不使用 Promise ，会直接报错，并中断js的执行。但是在这里，会得到如下的结果：

catch报告异常
也就是抛出异常后进入 catch 了，并且把异常信息作为参数传递给了 reject 。即便有错误的代码也不会报错了。这与try...catch的方法有相同的功能。

3. Promise 的其他用法

在刚开始，控制台查看 Promise 是什么的时候，发现 Promise 自身还有 race() 和 all() 等方法，下面看看这些方法是做什么用的

1. Promise.all()的用法

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。使用上面定义好的runAsync、runAsync1、runAsync2这三个函数，看下面的例子：

Promise
  .all([runAsync(), runAsync1(), runAsync2()])
  .then(function (result) {
    console.log(result);
  });

all()方法接受一个数组参数，数组中的值最终都返回Promise对象。这样，数组中的三个异步操作是并行执行的，等这三个异步操作执行完之后才会进入 then 中，可以将其中一个异步执行的时间长一点，发现最终的返回结果的时间，以所有异步操作执行完毕为准。那么，三个异步操作返回的数据结果去哪儿了呢？同样的，都在 then 中，all()方法回把所有的异步操作的结果放进一个数组中作为then回调函数的参数传入，所以上面代码输出的结果：

all()

• all()的应用场景：
  有了all，就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

2. Promise.race()的用法

上面说了 all() 方法的效果就是“谁最慢，以谁为准进行回调”，那么相对的还有另外一个方法“谁跑的快，以谁为准执行回调”，这就是 race() 方法， race 的用法和 all 一样，修改下代码，将三个异步操作的延时时间改为2秒，1秒，3秒，执行race方法：

Promise
  .race([runAsync(), runAsync1(), runAsync2()])
  .then(function(result){
    console.log(result);
  });

这三个异步操作也是并行执行的。结果是runAsync()1秒后执行完了，此时then里面的就执行了。看下执行结果：

race()
当执行代码的时候会发现，跟预期的稍微不太一样，执行了 runAsync1() 之后，并进入到then()中执行 runAsyac()中的resolve回调函数，输出了结果，但是 runAsync() 和 runAsync2() 仍在执行，只是没有执行相应的回调函数，那是因为 then() 已经执行完毕了，所以 race() 方法只能拿到最先执行那个异步操作的结果

• race() 的应用场景
  可以定义一个请求超时的方法，把请求超时的方法和请求都放入 race() 中，如果请求的时间超过设定的时间，则直接报请求超时，下面实现一下：

function request() {
  return new Promise((resolve, reject) => {
      var img = new Image();
      img.src = "https://www.cnblogs.com/xxxx";
      img.onload = () => resolve(img);
    });
}

function timeOut() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('请求超时');
    }, 2000);
  });
}
Promise
  .race([request(), timeOut()])
  .then((result) => {
    // 处理返回的数据
    console.log(result);
    $('div').append(result);
  })
  .catch((reason) => {
    console.log(reason);
});

执行代码，因为图片的路径是随便写的，肯定返回不了，2秒钟后结果显示：请求超时；
如果更换一个正确的图片路径，则会正确的显示结果，并在界面显示图片。
结束。