Javascript: Promise 学习笔记（1）

1. 什么是 Promise ？
2. Promise 解决了什么问题？
3. 语法

---

一、什么是 Promise ？

A Promise represents a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers to an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of the final value, the asynchronous method returns a promise of having a value at some point in the future

通俗点说就是，Promise 相当于一个代理（proxy），用于处理 Promise 对象 的返回值，但这个值在 Promise 创建时不是必须知道的，可以用于异步（asynchronous）操作的返回值，在以后需要返回的时候用一个 Promise 封装好这个返回值

二、Promise 解决了什么问题 ？

首先来看个例子（例1）

// 路由处理
var route_1 = router.get('/example1', function(data) {
  process_1(data);
});
var route_2 = router.get('/example2', function(data) {
  process_2(data);
});
var route_3 = router.get('/example3', function(data) {
  process_3(data);
});

例1 这段代码我们并不关心回调函数的执行顺序，所以代码写起来还是很清晰的

如果关心呢？那代码将会写成如下这样（例2）

var route_1 = router.get('example1', function(data) {
  process_1(data);
  router_2 = router.get('example2', function(data) {
    process_2(data);
    router_3 = router.get('example3', function(data) {
      process_3(data);
    });
  });
});

例2 这段代码是强调先后顺序的，如果回调只有几层还好，一旦多起来，谁都不愿意看

粘张图感受一下回调的 **`威力`**

看完 例1 、例2，我想大家大概知道为什么要有 Promise 的存在了

如果用 Promise 来实现 例2，代码将如下（例3）

// 路由处理
var route_1 = function(resolve, reject) {
  router.get('example1', resolve(data));
};

var route_2 = function(resolve, reject) {
  router.get('example2', resolve(data));
};

var route_3 = function(resolve, reject) {
  router.get('example3', resolve(data));
};

// 相比于例2，这里没有了层层嵌套，流程看起来也比较清晰
new Promise(route_1)
  .then(function(data) {
    process_1(data);
    return new Promise(route_2);
  })
  .then(function(data) {
    process_2(data);
    return new Promise(route_3)
  }).then(function(data) {
    process_3(data);
  });

因此，我认为 Promise 存在的主要原因是为了应对回调嵌套太深，但应该不仅局限于此

三、语法

var promise = new Pormise(function(resolve, reject) {
  // ......
});

通过 new 关键字实例化一个 Promise 对象，该对象接受一个函数参数，接受两个参数，第一个参数用于处理执行成功时的情景，第二个参数用于处理执行失败的情景

Promise 对象的状态有三种

1. pending：处理中
2. fulfilled：处理成功
3. rejected：处理失败

Promise 对象原型包含两个方法，then(onFulfilled, onRejected) 和 catch(onRejected)

其中，then() 接受两个参数，第一个参数是在当前 Promise resolve 时进行回调的方法，第二个参数是 reject 时进行回调的方法；catch() 相当于 then(undefined, onRejected) 的语法糖。调用 then 和 catch 之后都会反回一个 Promise 对象，利用这个特性，可以轻松地实现链式(chain)调用

需要注意的一点事，回调方法 onFulfilled 及 onRejected 的返回值既可以是一个 Promise 对象，亦可以是其他值，比如

new Promise(step1)
  .then(function(data) {
    // ...
    return new Promise(step2);
  }).then(function(data) {
    //.. 
    return 1;
  }).then(function(data) {
    console.log(data);// 这里将输出: 1
  });

关于 then 的实现，可以参考 这里

Promise 实例包含四个方法，分别是 all()、race()、reject()、resolve()
将在下一篇文章进行说明