promise用了这么多年了，一直也没有系统整理过。今天整理整理promise的相关东西，感兴趣的可以一起看一看。我尽量用更容易理解的语言来剖析一下promise
我准备分两篇文章来说明一下promise
一篇来理解和使用promise（本篇）另一篇来从promise使用功能的角度来剖析下promise的源码（下一篇）

我准备从以下几点来慢慢理解Promise
1、Promise,Promise存在的意义
2、Promise基本用法
3、.then()函数
4、.catch()函数
5、实现简单的axios
6、Promise.all, Promise.race 以及两者的区别
7、Promise.resolve和Promise.reject

1、什么是Promise

我的理解是：实现让我们用同步的方式去写异步代码的一种技术。是异步解决方案的一种。
他可以将多个异步操作进行队列化，让它们可以按照我们的想法去顺序执行。
那么，Promise之前有没有其他的异步解决方案。肯定是有的，常见的有callback回调函数以及事件。
那Promise有啥优势，我认为Promise功能更为强大，且能让我们代码写的更为清晰

Promise提供了统一的API, 让我们控制异步操作更加容易
Promise可以避免callback回调函数的层层嵌套，使代码更为清晰。可读性性与维护性更高

2、Promise基本用法

首先，我们先来了解一些Promise的基本概念

2.1、Promise状态

Promise一共有3中状态，分别是Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）
状态的改变只可能从Pending转------>Resolved,或者从Pending------->Rejected。并且状态一旦发生改变，就不会再更改了。而触发状态发生改变的，只有异步操作的结果。结果为成功触发状态变更为 Resolved, 结果失败或者中途发生错误，则会触发状态变更为 Rejected

2.2 Promise结构

Promise是一个构造函数，故通过new Promise()可以实例化出来一个Promise对象
new Promise()时，接受一个函数作为参数，且这个函数，有两个参数，分别是resolve,reject。而resolve和 reject也是两个函数。他们由JavaScript引擎提供，不用自己部署。
每一个被实例化出来的promise实例，都有.then() 和 .catch() 两个方法。且这两个方法的调用支持链式操作

好，了解完概念，我们看看Promise的基本用法
首先，如何实例化一个promise对象

const promise = new Promise((resolve, reject) => {setTimeout(() => {if (/* 成功 */) {resolve(res)} else {reject(err)}}, 100)
})

上图中，通过new Promise() 实例化了一个promise实例，注意：new Promise()方法中的函数是一个立即执行函数，即，在new Promise()的一瞬间就会被执行。函数内代码是同步代码。
resolve和reject用于返回异步操作的结果，当使用resolve()时，promise状态会由Pending—>Resolved, 并将异步的正确结果返回。当使用reject()时，promise状态由Pending---->Rejected，并将错误信息返回

再看这个对象如何接收返回的结果

promise.then((res) => {console.log(res)
}).catch((err) => {console.log(err)
})

上图中，.then的回调函数和 .catch的回调函数分别用来接收resolve()返回的正确信息和reject返回的错误信息。

下面我们来详细看下.then() 和 .catch()

.then() 函数

then()函数是Promise实例的一个方法，他的作用是为Promise实例添加状态改变时的回调函数
它存在以下特点

then()是添加在Promise的原型上的。即Promise.prototype.then(), 故所有Promise实例都存在.then()方法
.then()可以进行链式操作即promise.then().then().then()，then的回调函数将会按照次序调用
.then()函数存在两个参数，这两个参数一般情况下是函数。其中，第一个函数是在状态变为Resolved的时候才会执行(我们下文中统称为.then的resolve回调)，并且参数是Promise对象resolve(res)时的值。第二个函数是在状态变为Rejected的时候才会执行(我们下文统称为.then的reject回调)，后面我们会说哪几种情况下，状态会变成Rejected
Promise会存在值穿透的情况，当我们then()的两个参数不为函数时，会穿透到下一个then()里面，如果下一个then()参数也不是函数，则会继续向下穿透
我们上面说过了，Promise实例resolve()方法执行时，会将实例的状态变更为Resolved，故.then的resolve回调会在当前Promise实例resolve()时被触发

下面，我们重点来分析下第2，3，4，5

function getData(url) {return new Promise((resolve, reject) => {setTimeout(() => {if (url) {resolve({code: 200,message: 'ok',data: 123})} else {reject(new Error('缺少url'))}}, 100)})
}
getData('http://www.baidu.com').then((res) => {console.log('第一个回调')console.log(res)
}).then((res) => {console.log('第二个回调')console.log(res)
}).then((res) => {console.log('第三个回调')console.log(res)
})
// 第一个回调
// { code: 200, message: 'ok', data: 123 }
// 第二个回调
// undefined
// 第三个回调
// undefined

从上面代码，我们可以看出两点

1、then()方法被链式调用了，从这里我们其实是可以看出一点东西的。首先，我们知道，只有对象，才可以去调用他的方法。那是不是说明，上面的3个.then()分别是3个对象是调用了呢。首先第一个.then()，毫无疑问，getData()得到的是一个Promise对象，这个Promise对象，调用了他自己的then()方法，而第二个.then(),是在getData().then()之后被调用，那么我们是不是就可以看出一点，getData().then()其实也返回了一个对象。这个对象也是个Promise对象，也有他自己的then()。第三个.then()也是同理。故，我们得出结论：每一个then()方法被调用后内部其实都会返回一个新得Promise对象，而只要是Promise对象，都有.then()方法，故而，实现了链式调用。
2、当getData() resolve() 执行时 .then的resolve回调函数被依次调用，但是只有第一个then()的resolve回调函数的参数有值，而其他两个是undefind，这是为什么呢？我们再来看一个代码

getData('http://www.baidu.com').then((res) => {console.log('第一个回调')console.log(res)return 123
}).then((res) => {console.log(res)
})
// 第一个回调
// { code: 200, message: 'ok', data: 123 }
// 123

看上面代码咱好像发现，第二个then中resolve回调得参数好像是第一个then得resolve回调函数得返回值啊。我告诉你，是的。这是怎么回事呢！
答：上面我们已经说过了，每一个.then()内部都返回了一个Promise对象，那么第二个.then必定是这个新返回得Promise对象所调用得，那第二个.then的resolve()回调的参数肯定也就是第一个.then()内部返回的Promis对象所resolve(res）的值。从而，我们不难推测出。then函数内部的基础逻辑是如下的

Promise.prototype.then = (Resolved, Rejected) => {return new Promise((resolve, reject) => {// 定义一个变量存储then的resolve回调函数的返回值let xif (this.status === 'fulFilled') { // 状态是成功时x = Resolved()resolve(x)} else if (this.status === 'rejected') { // 状态是失败时x = Rejected()reject(x)}})
}

现在，我们就不难理解之前为什么后面2个.then()的resolve()回调函数的参数是undefind了，是因为第一个then()的resolve回调函数并没有return 值，而没有return 默认return的就是一个undefind
但是。上图中Resolved（）回调所返回的值，是有几种情况的

1、第一个then的resolve回调当返回的是一个普通值时，就像上图一样，直接被resolve()
2、如果then的resolve回调返回的是一个Promise对象时。那么会将这个Promise对象的状态做为then函数返回的Promise对象的状态，将这个Promise对象resolve()或者reject()的值作为then函数返回的Promise对象被resolve()或者reject()的值

下面我们看一段代码验证一下

getData('http://www.baidu.com').then((res) => {console.log('第一个回调')console.log(res)return new Promise((resolve, reject) => {resolve('456')})
}).then((res) => {console.log(res)
})// 第一个回调
// { code: 200, message: 'ok', data: 123 }
// 456

总结：

每一个.then函数都会返回默认返回一个Resolved状态的Promise对象
这个Promise对象默认resolve了then的resolve回调函数的返回值

下面我们再来看下，如果then()的参数不是函数，那会怎么样，下面，我们看一段代码

var getData = function() {return new Promise(function(resolve, reject) {resolve(123)});
};
getData().
then(345)
.catch(err => {console.log('捕捉到一个错误')console.log(err)
}).then((res) => {console.log('我是第二个then')console.log(res)
})
// 输出
我是第二个then
123

如上图，可以看到，当我们第一个then的resolve回调不是函数，而是一个数字345时，resolve(123)穿透到第二个then中了，触发了第二个then的resolve回调执行，并将resolve的返回值给了第二个then的resolve回调。这种现象，叫做值穿透。

var getData = function() {return new Promise(function(resolve, reject) {reject(new Error(123))});
};
getData().
then(345)
.catch(678)
.then((res) => {console.log('我是第二个then')console.log(res)
}).catch(err => {console.log('我是第二个catch')console.log(err)
})
// 输出
我是第二个catch
Error: 123

可以看到，报错时，同样发生了值穿透

到此，.then()相关以及 then()的第一个参数就讲完了，而第二个参数，我们放到.catch()方法中一起将

.catch() 函数

catch()也是挂载在Promise对象原型下的方法(Promise.prototype)，和then()一样, 故所有Promise对象也都有catch方法。它的作用是用来指定发生错误时的回调函数，也就是捕获异步操作所发生的错误
它有什么特点呢。我们先总结一下，后来再一一来验证

.catch()会指定一个参数作为错误发生时的回调，故catch((err) => {})的参数会在Promise状态变更为Rejected时被触发。
.then(null, (err) => {})的第二个参数，也是在Promise状态变更为Rejected时被触发。故其实.catch()和 .then()的reject回调函数本质上是一样的，只是写法不一样。但我们一般更倾向于使用.catch()而不使用.then的reject回调。原因后面会讲
代码抛出错误和reject()函数执行都会让Promise对象的状态转变为Rejected，故两种情况都会触发catch()的回调执行或者then()的reject回调执行。所以，reject()的本质，其实就是抛出一个错误
.catch()的回调函数以及.then的reject回调一样，执行时默认都会返回一个状态为Resolved的Promise对象（也就是 return Promise.resolve()）
.catch()和.then()一样，也可以写多个，也支持链式操作，原因就是上面的第三点
抛出的错误一旦被catch捕获，便不会再向外传播，只有再次向外抛出错误，才会继续被后面的catch所捕获。故错误具有冒泡性质，会一步一步向外传播，直到被catch捕获

1、我们先看第一点：

var getData = function() {return new Promise(function(resolve, reject) {reject(123)});
};
getData().then((res) => {console.log('成功')
}).catch((err) => {console.log('捕捉到错误')console.log(err)
})// 捕捉到错误
// 123

毫无疑问，reject(123)抛出一个错误，catch的回调捕捉到错误，并输出

2、再看第二点：

var getData = function() {return new Promise(function(resolve, reject) {reject(123)});
};
getData().then((res) => {console.log('成功')
}, (err) => {console.log('捕捉到一个错误')console.log(err)
})// 捕捉到错误
// 123

从代码上也可以看出，上面这两种方式是一样的。
现在，我来说说为什么建议使用catch() ,而不推荐使用then()的reject回调呢。看下下面的代码

var getData = function() {return new Promise(function(resolve, reject) {resolve(123)});
};
getData().then((res) => {console.log('成功')return new Promise((resolve, reject) => {reject(new Error('123'))})
}, (err) => {console.log('捕捉到一个错误')console.log(err)
})// 成功

此时，只输出了成功, 而then的resolve回调中所抛出的错误，并没有被捕捉到
再看下面一段代码

var getData = function() {return new Promise(function(resolve, reject) {resolve(123)});
};
getData().then((res) => {console.log('成功')return new Promise((resolve, reject) => {reject(new Error('123'))})
}).catch((err) => {console.log('捕捉到一个错误')console.log(err)
})成功
捕捉到一个错误
Error: 123

看，同样的错误，但是使用catch()，可以捕捉到，而使用then()的reject回调，却捕捉不到。
结论：catch()可以通过放到操作链的最底部而捕捉到任意地方（指的是Promise内）的错误。而then()的reject回调，只能捕捉到这个.then()执行之前的错误，当前执行的then的resolve回调内的错误无法捕捉到，后面再执行的代码所抛出的错误也无法捕捉到。并且.catch的写法，代码层面也更为清晰

var getData = function() {return new Promise(function(resolve, reject) {resolve(123)});
};
getData().then((res) => {console.log('成功')return new Promise((resolve, reject) => {reject(new Error('123'))})
}, (err) => {console.log('第一个错误捕捉')
}).then((res) => {console.log('第二个resolve回调')
}, err => {console.log('第二个错误捕捉')
})成功
第二个错误捕捉

如上图中，第一个then的resolve回调中抛出的错误被第二个then中reject回调所捕捉
故结论：一般情况下，不要去用then的第二个参数，而尽可能的去用.catch()方法去捕捉错误

3、下面我们再看第三点

var getData = function() {return new Promise(function(resolve, reject) {resolve(x)});
};
getData().then((res) => {console.log('成功')
}).catch(err => {console.log('捕捉到一个错误')console.log(err)throw new Error('我抛出了一个错误')
}).catch(err => {console.log('我也捕捉到了一个错误')console.log(err)
})捕捉到一个错误
ReferenceError: x is not defined
我也捕捉到了一个错误
Error: 我抛出了一个错误

上面代码可以看出，不是只有reject()执行了才会抛出一个错误，x未定义，系统会自动抛出一个错误，throw new Error是我们自己手动抛出一个错误。而这些都会使得Promise对象的状态变更为Rejected,从而触发catch。
同时上面的代码我们还可以看出我们上面写的第六点，错误会冒泡式向外传播，当被catch之后，便不会再进行传播了。直到再次抛出错误。上面代码中，第一个错误被第一个catch捕获后，原本第二个catch是不会再走的，但因为在第一个catch中又抛出了一个错误，才导致了第二个catch的执行。

4、下面我们再看第四点（catch()的回调函数也会返回一个状态是Resolved的Promise实例）
其实这一点，我们从上面那张图中也是可以看出来的，第一个catch()的回调原本是要返回了一个Resolved状态的Promise，但是因为throw了一个错误，导致这个Promise实例状态变更为Rejected并返回，而变成成Rejected变触发了第二个catch的回调执行
我们看下下面的代码，再次验证下

var getData = function() {return new Promise(function(resolve, reject) {resolve(x)});
};
getData().then((res) => {console.log('成功')
}).catch(err => {console.log('捕捉到一个错误')console.log(err)
}).then((res) => {console.log('我是第二个then')
})捕捉到一个错误
ReferenceError: x is not defined
我是第二个then

上面代码可以看出，catch的回调执行后，后面的then依然被执行了，为什么，就是因为catch的回调执行后默认返回了一个Resolved状态的Promise实例（return Promise.resolve()）

第五点，第六点我们已经验证过了。不再多说。

实现简单的axios

axios我们比较常用，大家应该都发现了，axios的使用方式，和Promise好像是一样的，

axios({url:'http://www.baidu.com',method: 'post',data: {}
}).then((res) => {console.log(res)
}).catch((err) => {console.log(err)
})

没错。axios就是一个Promise实例。他是一个用Promise来封装的一个XMLHttpRequest
下面我们也来实现一个简单的axios

function MyAxios(option) {return new Promise((resolve, reject) => {const http = new XMLHttpRequest()http.open(option.method, option.url);http.responseType = "json";http.setRequestHeader("Accept", "application/json");http.onreadystatechange = myHandler;http.send();function myHandler() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}}})
}
MyAxios({url:'http://www.baidu.com',method: 'post'
}).then((res) => {console.log(res)
}).catch((err) => {console.log(err)
})

Promise.all, Promise.race 以及两者的区别

1、Promise.all

Promise.all()可以并行执行多个Promise(), 并返回一个新的Promise实例

var p = Promise.all([p1, p2, p3]); // p1,p2,p3为3个Promise实例

Promise.all（）的参数不一定是数组，只要具有Iterator接口的数据都可以（Iterator是一个遍历器，我这里就不做过多介绍，感兴趣的可以自己去官网看看）。但是参数遍历后返回的成员必须必须是Promise对象（如上面的，p1,p2,p3都必须是Promise对象，如果不是，则会先调用Promise.resolve(p1)将他转化为Promise实例）

那么，Promise.all()返回的Promise实例的状态是如何定义的。

只有参数的各个成员(p1,p2,p3)状态都变成Resolved，p的状态才会变成Resolved,
参数的各个成员中，有任意一个状态变成Rejected, p的状态都会立刻变成Rejected

function getData (data) {return new Promise((resolve, reject) => {setTimeout(() => {if (data === 6) {reject(new Error('请求发生错误了'))} else {resolve(data)}}, data * 500)})
}
const promises = [1,3,5,7].map((item) => {return getData(item)
})
Promise.all(promises)
.then((res) => {console.log('请求成功')console.log(res)
}).catch((err) => {console.log('请求失败')console.log(err)
})// 3.5s后输出
请求成功
[ 1, 3, 5, 7 ]

如上图, 最后一个成员(上图中7返回的promise实例)的状态是在3.5s后才变更为Resolved，故.then()的resolve回调在3.5s后才执行

function getData (data) {return new Promise((resolve, reject) => {setTimeout(() => {if (data === 6) {reject(new Error('请求发生错误了'))} else {resolve(data)}}, data * 500)})
}
const promises = [2,4,6,8].map((item) => {return getData(item)
})
Promise.all(promises)
.then((res) => {console.log('请求成功')console.log(res)
}).catch((err) => {console.log('请求失败')console.log(err)
})// 3s后输出
请求失败
Error: 请求发生错误了

上图可以看出，当我们改用 2，4，6，8去得到promise成员时，第3s得时候发生了错误，此时，Promise.all()返回得Promise实例得状态立刻变更为Rejected，catch()的回调立即触发。故输出错误

2、Promise.race()

Promise.race()和Promise.all()的作用是一样的，都是并发处理多个Promise实例，并返回一个新的实例。
而区别在于，两者返回的新的Promise实例的状态改变的时机不同。

Promise.all是所有Promise子成员状态都变为Resolved, 新的Promise实例状态才会变成Resolved。中途如果有任何一个子成员状态变成了Rejected，新的Promise实例的状态就会立刻变为Rejected
Promise.race是只要子成员中，有任何一个的状态发生了变化(不管是变成Resolved还是Rejected)，那么返回的新的Promise实例的状态也会立刻发生变化，而变化的状态就是那个子成员所变化的状态。

function getData (data) {return new Promise((resolve, reject) => {setTimeout(() => {if (data === 6) {reject(new Error('请求发生错误了'))} else {resolve(data)}}, data * 500)})
}
const promises = [2,4,6,8].map((item) => {return getData(item)
})
Promise.race(promises)
.then((res) => {console.log('请求成功')console.log(res)
}).catch((err) => {console.log('请求失败')console.log(err)
})// 1s后输出
请求成功
2

上图可以看出，1s后第一个子成员状态变更为Resolved，那么返回的新Promise实例状态也立马变更为Resolved，故1s后.then()的resolve回调执行。输出请求成功.

最后，我们来说一说前面用到了的Promise.resolve()吧

Promise.resolve和Promise.reject

Promise.resolve()

前面我们说到过 Promise.resolve可以返回一个状态是Resolved的Promise对象。没错，其实它等同于

new Promise((resolve, reject) => {resolve()
})

当Promise.resolve()有参数时，会返回一个Promise对象的同时，将参数做作为then()resolve回调的参数返回（当参数是thenable对象除外，后面会将）。主要有以下几种情况
1、参数是一个Promise对象时
将会直接返回这个参数，不做任何更改
2、参数是thenable对象时，（即，存在.then()方法的对象），如下

let obj= {then: function(resolve, reject) {resolve('我是thenable对象');}
};

此时，Promise.resolve(obj) 会返回一个Promise对象，并且调用obj的then()方法，哎，这里注意了，这个.then()并不是新Promise对象的.then() , obj的then()会立即执行，可不代表新的Promise对象的then() 的回调也会执行，还记得吗，我们前面说的Promise对象的then()的回调执行的条件是这个Promise对象的状态发生变化了才会执行。

let obj= {then: function(resolve, reject) {console.log(123)}
};let p1 = Promise.resolve(obj);
p1.then(function(value) {console.log('成功')console.log(value);  // 42
});
// 输出
123

从上图可以看出来，立即执行了obj.then()，但Promise的then的回调并没有被执行

3、参数不是对象，或者说是没有.then方法的对象
会返回一个Promise实例，并将参数作为.then()的resolve回调的参数返回
如，Promise.resolve(‘123’) 等价于

new Promise((resolve, reject) => {resolve('123')
})

4、不带参数，即Promise.resolve()，也就是我们前面说的。返回了一个Resolved状态的Promise对象，但是.then()的resolve回调没有参数。

new Promise((resolve, reject) => {resolve()
}).then((res) => {console.log(res)
})
// 输出
undefined

Promise.resolve()

Promise.reject() 也是返回一个Promise对象，只是这个对象的状态是Rejected
至于参数的用法和Promise.resolve()完全一样，唯一的区别是没有thenable参数一说，也就是说有参数时，参数不论哪种情况，都会被当做catch()的回调参数返回。也就是说参数没有前面1，2，3种的区别。大家可以去试试，我就不过多说明了。

Promise的使用就说到这里了。下一次给大家带来从功能的角度来看Promise的源码敬请期待。喜欢的话，点个赞吧！！

ES6 之 Promise用法详解相关推荐

es6中promise用法详解
1.含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象. ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
Javascript Promise用法详解
1.约定本文的 demo 代码有些是伪代码,不可以直接执行. 没有特殊说明,本文所有 demo 都是基于 ES6 规范. Object.method 代表是静态方法, Object#method 代 ...
promise用法详解
一.什么是promise 1.promise简介 Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all.reject.resolve这几个方法,原型上有then.catch等 ...
Promise用法详解(一)
Promise 基本概念 Promise是一个构造函数,所以可以 new 出一个Promise的实例在Promise上有两个函数 resolve(成功之后的回调函数)和 reject(失败后的回调函 ...
【ES6】Module模块详解
[ES6]Module模块详解一.Module的由来二.严格模式三.export命令四.import命令查看更多ES6教学文章: 参考文献引言:由于两个JS文件之间相互使用必须通过一个ht ...
【ES6】Generator函数详解
[ES6]Generator函数详解一.Generator函数简介基本概念函数写法 yield关键字介绍二.next方法的参数三.for...of循环四.关于普通throw()与Gener ...
ES6 — Promise基础用法详解（resolve、reject、then、catch,all,）
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...

ES6 之 Promise用法详解

1、什么是Promise

2、Promise基本用法

2.1、Promise状态

2.2 Promise结构

.then() 函数

.catch() 函数

实现简单的axios

Promise.all, Promise.race 以及两者的区别

1、Promise.all

2、Promise.race()

Promise.resolve和Promise.reject

Promise.resolve()

Promise.resolve()

ES6 之 Promise用法详解相关推荐

最新文章

热门文章