前言

本文将从浅到深的去剖析promise。由于内容较多，分为上下两篇。

内容大纲

异步编程的解决方案（完成）
promise是什么（完成）
promise的用法（完成）
promise的优点与缺点（完成）
promise的错误捕获（待续）
promise的原理（待续）
promise的底层源码（待续）
自己实现一个promise（待续）

异步编程的解决方案

js是一门单线程的语言，所以其中会涉及到很多异步的操作，异步编程的解决方案有很多种，我们主要讲一种最基础的和这篇文章的主角（promise）：

回调函数

在异步编程中，这种的应用范围最广，举个定时器的例子：

setTimeout(() => {
    // ...
}, 1000);

当然在业务中异步请求也会用到很多，但当多个异步操作需要串行操作的时候，就会有回调地狱产生。

$.get(url, data1 => {
    console.log(data1)
    $.get(data1.url, data2 => {
        console.log(data2)
        $.get(data2.url, data3 => {
            console.log(data3)
        })
    })
})

代码没有美感，且不利于维护。当然，我们可以通过减少代码嵌套，模块化等手段来修复。但是并不如下面的解决方案优雅。

佼佼者——promise

const reqMethod = (url) => {
    return new Promise((reslove, reject) => {
        $.get(url, data => {
            if(data.success) {
                reslove();
            } else {
                reject();
            }
        })
    })
}

reqMethod(url).then((data1) => {
    return reqMethod(data1.url);
}).then((data2) => {
    return reqMethod(data2.url);
}).then((data3) => {
    return reqMethod(data3.url);
})

这样的实现方式，符合易于阅读，因为每一步操作都是按照先后顺序进行的。

promise是什么

Promise从不同角度理解，有很多种含义。

promise的一种承诺

promise从字面意思理解，就是许诺和承诺的意思，对于一种承诺而言，有三种状态：

1、承诺还未达成，还在纠结过程中（pending状态）
2、承诺没有实现，失言了（rejected状态）
3、承诺实现了，就是成功的状态（fulfilled状态）

Promise是一种标准的规范

在这里不过多展开，大家可以去看Promise/A+ 规范或者ECMAscript规范;

Promise是ES6提供的一种对象

Promise是一个对象，是一个构造函数，ES6将其写进了语言标准。统一了用法。最基础的用法如下：

const promiseMethod = new Promise((resolve, reject) => {
    // some code
    if(/*异步成功的条件*/) {
        resolve();
    } else {
        reject();
    }
})

Promise的用法

new Promise

Promise是一个构造函数，最基础的作用就是用new操作符生成一个实例对象

const promiseMethod = new Promise((resolve, reject) => {
    // some code
    if(/*异步成功的条件*/) {
        resolve();
    } else {
        reject();
    }
})

Promise可接受的参数是一个函数，resolve和reject是该函数的两个参数，由js引擎提供，不需要自己定义。

resolve的作用是将pending状态变更为fulfilled状态。

reject的作用是将pending状态变更为rejected状态。

Promise新建时就会立即执行，与何时调用无关，与结果也无关

举个例子

const promiseOne = new Promise((resolve, reject) => {
    console.log('has finish');
    resolve();
})

1、console.log在新建过程中就执行了。

2、promiseOne的结果已经固定下来了，无论何时调用，结果都不会发生改变。

Promise.prototype.then

then方法是被定义在Promise的原型上，作用是：添加Promise状态改变后的回调函数。

then方法接收两个参数，第一个参数是resolve状态执行的函数，第二个参数是reject执行的函数。

then方法返回的是一个新的Promise对象。

举个例子：

const promiseOne = new Promise((resolve, reject) => {
    console.log('has finish');
    resolve();
})

const promiseTwo = new Promise((resolve, reject) => {
    console.log('has reject');
    reject();
})

const promiseThree = promiseOne.then(() => {
    console.log('成功的回调')
}, () => {
    console.log('失败的回调')
})

promiseTwo.then(() => {
    console.log('成功的回调')
}, () => {
    console.log('失败的回调')
})

console.log(promiseThree);

输出的结果：

has finish
has reject
<Promise>(pending)
成功的回调
失败的回调

Promise.prototype.catch

catch方法其实和then第二个回调函数的别名，作用是用于储物发生时的回调处理。

catch捕获两类错误：

1、异步操作时抛出错误，导致状态变为reject

2、then回调过程中产生的错误。

举个例子：

//第一种情况：异步操作过程中报错
const promise = new Promise(function(resolve, reject) {
  throw new Error('test');
});
promise.catch(function(error) {
  console.log(error);
});

// 第二种情况：then执行过程中报错

const promise = new Promise((resolve, reject) => {
    resolve();
})

promise.then(() => {
    throw new Error('test');
}).catch(function(error) {
  console.log(error);
});

关于catch和then第二个参数的区别：

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

第二种写法的优点在于，then执行过程中的报错，catch一样能捕获，优于第一种写法。

更深入的错误捕获我们单独放一章讲。

Promise.prototype.finally

finally方法作用在于不管promise返回的状态是什么，它都会在执行。

finally不接受任何参数。

promise
  .then(function(data) {
    // success
  })
  .catch(function(err) {
    // error
  }).finally(() => {
      
  });

finally中执行的状态与promise的结果无关，而且在方法中无法得知promise的运行结果。

Promise.all

用法：

Promise.all([p1, p2, p3]);

作用：是将多个promise示例封装成一个promise实例。结果只有以下两种情形：

全部成功

所有promise都成功，总的promise才会成功

const p1 = new Promise((resolve, reject) => {
    resolve('hello');
})
const p2 = new Promise((resolve, reject) => {
    resolve('hello');
})
Promise.all([p1, p2]).then(() => {
    console.log('全部成功')
}).catch(() => {
    console.log('全部失败')
})

// 全部成功

全部失败

只要有一个promise的状态从pending变成reject就是失败。

const p1 = new Promise((resolve, reject) => {
    resolve();
})
const p2 = new Promise((resolve, reject) => {
    reject();
})
Promise.all([p1, p2]).then(() => {
    console.log('全部成功')
}).catch(() => {
    console.log('全部失败')
})

Promise的时间如何计算？

const newDate = new Date();
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 500)
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, 1000)
})
Promise.all([p1, p2]).then(() => {
    const now = new Date();
    let time = now.getTime() - newDate.getTime();
    console.log(time);
})
// 1001

按最长的那个为准。

Promise.race

用法：

Promise.race([p1, p2, p3]);

作用：是将多个promise示例封装成一个promise实例。

Promise.race与Promise.all的区别

Promise.race的状态取决于最先完成的promise的状态。

举个例子，我们需要对一个请求做5秒的timeout，就可以用Promise.race。

const reqMethod = (url) => {
    return new Promise((reslove, reject) => {
        $.get(url, data => {
            reslove();
        })
    })
}

const timeout = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('timeout')
    }, 5000)
})
Promise.race([reqMethod(xxx),timeout]).then(() => {
    console.log('请求成功')
}).catch(() => {
    console.log('timeout')
})

Promise.resolve

作用：需要将现有的对象转化为promise对象。

Promise.resolve({});
//等价于
new Promise(resolve => resolve({}));

Promise.resolve会根据传入的不同参数做不同的处理

传入一个promise对象

不做任何操作，原封不动的返回该对象。

参数是一个thenable对象

立即执行thenable对象中的then方法，然后返回一个resolved状态的promise。

let thenable = {
    then: function(resolve, reject) {
        resolve('success')
    }
}

const p = Promise.resolve(thenable);
p.then((e) => {
    console.log(e);
})

不是对象

直接返回一个resolved状态的promise。并将参数带给回调函数。

const p = Promise.resolve('参数')；

p.then((e) => {
    console.log(e)
})

不传参数

直接返回一个resolved状态的promise。

Promise.reject

其作用是返回一个新的promise实例，状态直接为reject

Promise.reject('error');
//等价于
new Promise((resolve, reject) => reject('error'));

不同于Promise.resolve，其参数会原封不动的作为reject的理由。

举个例子：

const p = Promise.reject('error');
p.catch((e) => {
    console.log(e)
})
// error

Promise的优缺点

Promise的特点

状态不受外界影响，只满足于结果

1、promise代表一个异步操作，一共有三种状态：pending、fulfilled和rejected。
2、promise的结果只服从于异步操作的结果，成功进入fulfilled状态，失败进入rejected状态。

状态变更之后不会在改变

1、promise状态变化只有两种可能，一种从pending到fulfilled，或者是从pending到reject。
2、当状态变更完时，状态将不在发生改变。

Promise的优点

链式写法可读性比回调函数的写法更优雅。
与回调函数相比更加方便错误处理。
与事件体系相比，一次性返回结果，更加适用于一次性返回的结果。

Promise的缺点

不能取消执行过程。
不能读取异步过程中的进度。
生成之后对象结果不会改变。

结语

本文对promise的用法进行了详解，之后会更新两篇深入一点的文章：

promise错误捕捉
聊聊promise系列（深入）