[10 MINS/DAY] JavaScript Promise [1]

本文的一些知识点摘自MDN web doc, 如果大家想深入研究，可以去看原文[使用Promise] & [Promise文档]

• Promise有什么用？

在没有Promise之前，我们在实现异步的时候通常通过回调函数，有时候因为业务逻辑复杂，会出现一个回调嵌套另一个回调，形成回调地狱。ES6 Promise的出现提供了一种更好的处理异步的方法。

• Promise如何使用

场景：任务Task分为A步骤和B步骤，A步骤成功与否决定我们执行B_success还是B_failure。

// 当我们单纯的通过回调函数实现
function function_A(params, callback_success, callback_failure) {
    // What we need to do in A
    if(success){
        callback_success();
    } else {
        callback_failure();
    }
}
function function_B_success() {
    // What we need to do in B after A succeed
}
function function_B_failure() {
    // What we need to do in B after A failed
}
// 执行Task
function_A(params, function_B_success, function_B_failure);

现在我们有了Promise，他是一个对象，表示一个异步操作的结果是完成了还是失败了

// 第一种写法
const promise = function_A(params); 
promise.then(function_B_success, function_B_failure);

//第二种写法
function_A(params).then(function_B_success, function_B_failure);

• Promise约定的是什么？

Promise在英语里是约定，许诺的意思。Promise约定的有三点：

1. 在本轮事件循环运行完成之前，回调函数是不会被调用的。
2. 即使异步操作已经完成（成功或失败），在这之后通过then添加的回调函数也会被调用。
3. 通过多次调用then可以添加多个回调函数，它们会按照插入顺序执行。

• 什么是事件循环？

在JS中有一套并发模型，负责收集，处理队伍中的任务。这个处理模型就叫做事件循环。大家如果想深入了解可以读MDN文档以后有机会单独和大家聊事件循环。

• .then()方法

then()最多需要两个参数, Promise 的成功和失败情况的回调函数。

p.then(onFulfilled\[, onRejected\]);

p.then(value => {
  // fulfillment
}, reason => {
  // rejection
});

then会返回一个新的Promise对象， 如下

const promise1 = doSomething();
const promise2 = promise1.then(successCallback, failureCallback);

所以then会返回一个新的promise对象，表示上一个promise回调函数的状态，也就是doSomething成功或者失败后的回调函数的执行状态，这样就形成了一个链条。我们称其为链式调用。
如果要实现链式调用，前一个promise要进行return，不可以简单的写成箭头函数。
链式调用中如果某一环抛出错误throw new Error(‘error’);,则直接跳至catch，但是catch之后的then不会被影响。

• Promise的三种状态 -- pending/fulfillment/rejection

Pending表示未决，即还在执行中，未得到结果
Fulfillment表示成功
Rejectection表示失败

• .resolve()方法

**Promise.resolve(value)**方法返回一个以给定值解析后的Promise对象。如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是thenable（即带有then方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
以上是MDN给出的解释，简单来讲就是两种情况:

1. value是一个简单的值，比如数字，字符串，数组，这个时候Promise.resolve(value)返回一个promise对象，这个对象的then的成功回调函数参数为value。
2. value是一个thenable对象

// original是我们说的thenable对象
var original = Promise.resolve(33);
// promise是我们通过resolve返回的Promise对象
var promise = Promise.resolve(original);
// 这时候的promise成功情况会进行original这个thenable的最终结果，也就是一层一层走到最底层
promise.then(function(value) {
  console.log('value: ' + value);
});
console.log('original === promise ? ' + (original === promise));

/*
*  打印顺序如下，这里有一个同步异步先后执行的区别
*  original === cast ? true
*  value: 33
*/

• reject()方法

返回一個帶有拒絕原因的Promise对象。

//因为reject传入Error对象，所以resolved不会被调用
function resolved(result) {
  console.log('Resolved');
}
//rejected被调用
function rejected(result) {
  console.error(result);
}
//Error是一个错误构造器
Promise.reject(new Error('fail')).then(resolved, rejected);
// expected output: Error: fail