Promise 原型方法Promise.prototype.then()

then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。

语法

p.then(onFulfilled[, onRejected]);

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

参数：

• onFulfilled |可选。是一个函数，当 Promise 变成接受状态（fulfilled）时会被调用。这个函数有一个参数，是接收到的值（the fulfillment value）。如果onFulfilled不是函数，则会在内部被替换为 (x) => x，即按原样返回 promise 最终结果的函数。
• onRejected |可选。是一个函数，当 Promise 变成接受状态或拒绝状态（rejected）时会被调用，该函数有一个参数，即拒绝的原因（rejection reason）。 如果该onRejected 不是函数，则会在内部被替换为一个 “Thrower” 函数 (it throws an error it received as argument)。

返回值：
当一个 Promise 完成（fulfilled）或者失败（rejected）时，相应的处理函数(onFulfilled 或 onRejected) )将被异步调用（由当前的线程循环来调度完成）。具体的返回值依据以下规则返回。如果 then() 中的回调函数：

• 返回了一个值，那么 then 返回的 Promise 将会成为resolved状态，并且将返回的值作为resolved状态的回调函数的参数值。
• 没有返回任何值，那么 then 返回的 Promise 将会成为resolved状态，并且该resolved状态的回调函数的参数值为 undefined。
• 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝(rejected)状态，并且将抛出的错误作为拒绝(rejected)状态的回调函数的参数值。
• 返回一个已经是resolved状态的 Promise，那么 then 返回的 Promise 也会成为resolved状态，并且将那个 Promise 的resolved状态的回调函数的参数值作为该被返回的Promise的resolved状态回调函数的参数值。（returns an already fulfilled promise, the promise returned by then gets fulfilled with that promise’s value as its value;）
• 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。（returns an already rejected promise, the promise returned by then gets rejected with that promise’s value as its value;）
• 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。（returns another pending promise object, the resolution/rejection of the promise returned by then will be subsequent to the resolution/rejection of the promise returned by the handler. Also, the value of the promise returned by then will be the same as the value of the promise returned by the handler.）

由于 then() 和 Promise.prototype.catch() 方法都会返回 promise，它们可以被链式调用。（As the then and Promise.prototype.catch() methods return promises, they can be chained）

emmmmm…理论有点儿绕，把下面的例子都好好写一遍回味一遍会方便理解很多。

举例一：then() 方法的同步性的例子

// using a resolved promise, the 'then' block will be triggered instantly, 
// but its handlers will be triggered asynchronously as demonstrated by the console.logs
let resolvedProm = Promise.resolve('happy chen');

let thenProm = resolvedProm.then(value => {
    console.log(`this gets called after the end of the main stack,the value received and returned is : ${value}`);
    return value;
});

// instantly logging the value of thenProm
console.log(thenProm);

// using setTimeout we can postpone the execution of a function to the moment the stack is empty
setTimeout(()=>{
    console.log(thenProm);
})

// Promise { <pending> }
// this gets called after the end of the main stack,the value received and returned is : happy
// Promise { 'happy chen' }

举例二：then() 方法返回一个 Promise 对象，所以可以链式调用。
传递一个回调函数给 then()方法，如果这个回调函数返回一个 Promise，一个等价的 Promise 将暴露给后续的then()方法链。下面的代码片段使用 setTimout 函数来模拟异步代码操作。

Promise.resolve('happy')
    // 1. Receive "foo", concatenate "bar" to it. and resolve that to the next then
    .then(val => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                val += ' chen';
                resolve(val);
            }, 100);
        })
    })
    // 2. receive "happy chen", register a callback function to work on that string
    // and print it to the console, but not before returning the unworked on
    // string to the next then
    .then(val => {
        setTimeout(() => {
            val += '666';
            console.log(val);
        }, 100);
        return val;
    })
    .then(val => {
        console.log("Note that `val` will not have the '666' bit of it at this point.This is because we mocked that to happen asynchronously with a setTimeout function");
        console.log(val);
    })
//注意打印顺序：
// Note that `val` will not have the '666' bit of it at this point.This is because we          mocked that to happen asynchronously with a setTimeout function
// happy chen
// happy chen666

举例三：当一个值只是从一个 then() 回调方法中返回时，它将等价地返回 Promise.resolve(<被调用的处理程序返回的值>)

let p = new Promise((resolve, reject) => {
    resolve('happy chen');
})

p.then(val => {
    console.log(val);
    return val + '666';
}).then(val => {
    console.log(`${val} ----A synchronous value works`);
})

p.then(val => {
    console.log(val);
})
// happy chen
// happy chen
// happy chen666 ----A synchronous value works

举例三：如果函数抛出错误或返回一个拒绝的Promise，则 then() 将返回一个拒绝的Promise

Promise.resolve()
    .then(() => {
        throw new Error('something wrong!')
    })
    .then(()=>{
        //not called
    },err => {
        console.log(`onRejected function called: ${err.message}`);
    })
    // onRejected function called: something wrong!

举例四：实际上，捕获 rejected promise 的需求经常大于使用 then 的两种情况语法

Promise.resolve()
  .then(() => {
    // Makes .then() return a rejected promise
    throw new Error('Oh no!');
  })
  .catch(error => {
    console.error('onRejected function called: ' + error.message);
  })
  .then(() => {
    console.log("I am always called even if the prior then's promise rejects");
  });
//   onRejected function called: Oh no!
// I am always called even if the prior then's promise rejects

举例五：如果 onFulfilled 返回了一个 promise，then 的返回值 就是这个promise resolved 或者 rejected后的返回值

function resolveLater(resolve,reject){
    setTimeout(() => {
        resolve(10);
    }, 1000);
}

function rejectLater(resolve,reject){
    setTimeout(() => {
        reject(new Error('something wrong'))
    }, 1000);
}

let p1 = Promise.resolve('happy');
let p2 = p1.then(() => {
	// Return promise here, that will be resolved to 10 after 1 second
    return new Promise(resolveLater);
})
p2.then(val => {
    console.log(`resolved: val`);
},e => {
    console.log(`rejected: e`);
})

// resolved: val

执行效果：

function resolveLater(resolve,reject){
    setTimeout(() => {
        resolve(10);
    }, 1000);
}

function rejectLater(resolve,reject){
    setTimeout(() => {
        reject(new Error('something wrong'))
    }, 1000);
}

let p1 = Promise.resolve('foo');
let p3 = p1.then(function() {
    // Return promise here, that will be rejected with 'Error' after 1 second
    return new Promise(rejectLater);
  });
  p3.then(function(v) {
    // not called
    console.log('resolved', v);
  }, function(e) {
    console.error('rejected', e); // "rejected", 'Error'
  });

//   something wrong

举例六：使用链接操作 基于promise的API 实现一个类似promise的函数

function fetch_current_data() {
    return fetch('current-data.json').then(response => {
        // The fetch() API returns a Promise.  This function
        // exposes a similar API, except the fulfillment
        // value of this function's Promise has had more
        // work done on it.
        if (response.header.get('content-type') != 'application/json') {
            throw new TypeError();
        }
        let data = response.json();
        return data;// fulfillment value given to user of
                    // fetch_current_data().then()
    })
}