1. Promise 简介
Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有 all、reject、resolve 这几个方法，原型上有 then、catch等方法。
Promise 对象有以下两个特点：
(1) 对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
(2) 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
2. Promise的使用
下面先 new一个Promise：
let p = new Promise(function(resolve, reject) {
// 做一些异步操作
setTimeout(function() {
console.log('执行完成Promise'); // 执行完成Promise
resolve('要返回的数据可以任何数据例如接口返回数据');
}, 2000);
}); 其执行过程是：执行了一个异步操作，也就是 setTimeout，2秒后，输出“执行完成”，并且调用 resolve 方法。
注意！我只是 new 了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用 Promise 的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：
<button onClick="promiseClick()">开始异步请求</button>const promiseClick = () => {
console.log('点击方法被调用');
let p = new Promise(function(resolve, reject) {
// 做一些异步操作
setTimeout(function() {
console.log('执行完成Promise');
resolve('要返回的数据可以任何数据例如接口返回数据');
}, 2000);
});
return p;
}
// 刷新页面的时候是没有任何反应的，但是点击button后控制台打出：
// 点击方法被调用
// 执行完成Promise当放在函数里面的时候只有调用的时候才会被执行。
我们包装好的函数最后，会返回 Promise 对象，也就是说，执行这个函数我们得到了一个 Promise 对象。接下来就可以用 Promise 对象上的 then、catch 方法了，这就是 Promise 的强大之处了，看下面的代码：
promiseClick().then(function(data) {
console.log(data);
// 后面可以用传过来的数据做些其他操作
// ......
});
// 这时控制台会输出：
// 点击方法被调用
// 执行完成Promise
// 要返回的数据可以任何数据例如接口返回数据先是方法被调用，执行了 promise，最后执行了 promise 的 then 方法，then 方法是一个函数接受一个参数是接受 resolve，表示返回的数据。这时就输出了“要返回的数据可以任何数据例如接口返回数据”。
then 里面的函数就跟我们平时的回调函数一个意思，能够在 promiseClick 这个异步任务执行完成之后被执行。这就是 Promise 的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
Promise 只是能够简化层层回调的写法（即回调地狱），而实质上，Promise 的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递 callback 函数要简单、灵活的多。所以使用 Promise 的正确场景是这样的：
promiseClick()
.then(function(data) {
console.log(data);
return runAsync2();
})
.then(function(data) {
console.log(data);
return runAsync3();
})
.then(function(data) {
console.log(data);
});以上是对 Promise 的 resolve 用法进行了解释，相当于 resolve 是对 promise 成功时候的回调，它把 promise 的状态修改为 fullfiled。
reject的用法：
reject 是失败的时候的回调，他把 promise 的状态修改为 rejected，这样我们在 then 中就能捕捉到，然后执行“失败”情况的回调。
function promiseClick() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
promiseClick().then(
function(data) {
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
},
function(reason) {
console.log('rejected失败回调');
console.log('失败执行回调抛出失败原因：',reason);
}
);
// 执行结果：
// 随机数生成的值： 18
// rejected失败回调
// 失败执行回调抛出失败原因： 数字太于10了即将执行失败回调//随机数生成的值： 2
// resolved成功回调
// 成功回调接受的值： 2 以上代码：调用 promiseClick 方法执行，2秒后获取到一个随机数，如果小于10，算成功，调用resolve 修改 Promise 的状态为 fullfiled。否则我们认为是失败了，调用 reject 并传递一个参数，作为失败的原因。并将状态改成 rejected。
运行 promiseClick 并且在 then 中传了两个参数，这两个参数分别是两个函数，then 方法可以接受两个参数，第一个对应 resolve 的回调，第二个对应 reject 的回调。（也就是说 then 方法中接受两个回调，一个成功的回调函数，一个失败的回调函数，并且能在回调函数中拿到成功的数据和失败的原因），所以我们能够分别拿到成功和失败传过来的数据，就有以上的运行结果。
catch的用法：
与 Promise 对象方法 then方法并行的一个方法就是 catch 方法，与 try-catch 类似，catch 就是用来捕获异常的，也就是和 then 方法中接受的第二参数 rejected 的回调是一样的，如下：
function promiseClick() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
promiseClick().then(
function(data) {
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
}
)
.catch(function(reason, data) {
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因：',reason);
});
// 执行结果：
// 随机数生成的值： 4
// resolved成功回调
// 成功回调接受的值： 4
// 随机数生成的值： 19
// catch到rejected失败回调
// catch失败执行回调抛出失败原因： 数字太于10了即将执行失败回调效果和写在 then 的第二个参数里面一样。它将大于10的情况下的失败回调的原因输出，但是，它还有另外一个作用：在执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死 js，而是会进到这个catch方法中。如下：
function promiseClick() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num);
if(num <= 10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
promiseClick().then(
function(data) {
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
console.log(noData);
}
).catch(function(reason, data) {
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因：',reason);
});
// 执行结果：
// 随机数生成的值： 6
// resolved成功回调
// 成功回调接受的值： 6
// catch到rejected失败回调
// catch失败执行回调抛出失败原因： ReferenceError: noData is not defined at 0.test.html:30:15在 resolve 的回调中，我们在控制台输出了 noData，而 noData 这个变量是没有被定义的。如果我们不用 Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到上述的结果，也就是说进到 catch 方法里面去了，而且把错误原因传到了 reason 参数中。即便是有错误的代码也不会报错了。
3. Promise.all
与 then 同级的另一个方法，all 方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行成功的回调，有1个异步操作执行结果是失败就立即执行失败的回调。
将上述方法复制两份并重命名 promiseClick3、promiseClick2、promiseClick1，如下
function promiseClick1() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
function promiseClick2() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num)
if(num<=10){
resolve(num);;
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
function promiseClick3() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
Promise.all([promiseClick3(), promiseClick2(), promiseClick1()]).then(function(results) {
console.log(results);
});
// 输出结果：
// 随机数生成的值： 20
// catch到rejected失败回调
// catch失败执行回调抛出失败原因： 数字太于10了即将执行失败回调
// 随机数生成的值： 8
// 随机数生成的值： 15//随机数生成的值： 9
// 随机数生成的值： 5
// 随机数生成的值： 9
// (3) [9, 5, 9]
Promise.all 执行，all 接收一个数组参数，这组参数为需要执行异步操作的所有方法，里面的值最终都返回 Promise 对象。如果异步操作全部成功执行，all 会把所有异步操作的结果放进一个数组中传给 then，然后再执行 then 方法的成功回调将结果接收。
这样以后就可以用 all 并行执行多个异步操作，并且在一个回调中处理所有的返回数据，比如你需要提前准备好所有数据才渲染页面的时候就可以使用 all，执行多个异步操作将所有的数据处理好，再去渲染。
4. Promise.race
all 方法是等所有的异步操作都成功执行了再执行成功回调的方法，只要有一个异步操作执行失败就立即执行失败回调的方法。那么 race 方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了 race 的成功回调还是失败回调，其余的将不会再进入 race 的任何回调。
我们将上面的方法延迟分别改成234秒：
function promiseClick1() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('2s随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p;
}
function promiseClick2() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('3s随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 3000);
})
return p;
}
function promiseClick3() {
let p = new Promise(function(resolve, reject) {
setTimeout(function() {
var num = Math.ceil(Math.random()*20); // 生成1-10的随机数
console.log('4s随机数生成的值：',num);
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 4000);
})
return p;
}
Promise.race([promiseClick3(), promiseClick2(), promiseClick1()]).then(function(results) {
console.log('成功',results);
}, function(reason) {
console.log('失败',reason);
});
// 执行结果：
// 2s随机数生成的值： 19
// 失败 数字太于10了即将执行失败回调
// 3s随机数生成的值： 15
// 4s随机数生成的值： 7
// 2s随机数生成的值： 8
// 成功 8
// 3s随机数生成的值： 5
// 4s随机数生成的值： 16当2s后 promiseClick1 执行完成后就已经进入到了 then 里面回调，在 then 里面的回调开始执行时，promiseClick2 和 promiseClick3 并没有停止，仍旧再执行。于是再过3秒后，输出了他们各自的值，但是将不会再进入 race 的任何回调。
race 的使用：比如可以使用在一个请求在10s内请求成功的话就走 then 方法，如果10s内没有请求成功的话进入 reject 回调执行另一个操作。
5. Promise 手写代码实现
var PromisePolyfill = (function () {
// 和 reject 不同的是 resolve 需要尝试展开 thenable 对象
function tryToResolve (value) {
if (this === value) {
// 主要是防止下面这种情况
// let y = new Promise(res => setTimeout(res(y)))
throw TypeError('Chaining cycle detected for promise!')
}
// 根据规范2.32以及2.33 对对象或者函数尝试展开
// 保证ES6之前的 polyfill 也能和ES6的原生promise混用
if (value !== null &&
(typeof value === 'object' || typeof value === 'function')) {
try {
// 这里记录这次then的值同时要被try包裹
// 主要原因是 then 可能是一个getter, 也也就是说
// 1. value.then可能报错
// 2. value.then可能产生副作用(例如多次执行可能结果不同)
var then = value.then
// 另一方面, 由于无法保证 then 确实会像预期的那样只调用一个 onFullfilled / onRejected
// 所以增加了一个 flag 来防止 resolveOrReject 被多次调用
var thenAlreadyCalledOrThrow = false
if (typeof then === 'function') {
// 是thenable 那么尝试展开
// 并且在该thenable状态改变之前this对象的状态不变
then.bind(value)(
// onFullfilled
function (value2) {
if (thenAlreadyCalledOrThrow) return
thenAlreadyCalledOrThrow = true
tryToResolve.bind(this, value2)()
}.bind(this),
// onRejected
function (reason2) {
if (thenAlreadyCalledOrThrow) return
thenAlreadyCalledOrThrow = true
resolveOrReject.bind(this, 'rejected', reason2)()
}.bind(this)
)
} else {
// 拥有 then，但是 then 不是一个函数 所以也不是 thenable
resolveOrReject.bind(this, 'resolved', value)()
}
} catch (e) {
if (thenAlreadyCalledOrThrow) return
thenAlreadyCalledOrThrow = true
resolveOrReject.bind(this, 'rejected', e)()
}
} else {
// 基本类型，直接返回
resolveOrReject.bind(this, 'resolved', value)()
}
}
function resolveOrReject (status, data) {
if (this.status !== 'pending') return
this.status = status
this.data = data
if (status === 'resolved') {
for (var i = 0; i < this.resolveList.length; ++i) {
this.resolveList[i]()
}
} else {
for (i = 0; i < this.rejectList.length; ++i) {
this.rejectList[i]()
}
}
}
function Promise (executor) {
if (!(this instanceof Promise)) {
throw Error('Promise can not be called without new !')
}
if (typeof executor !== 'function') {
// 非标准，但与 Chrome、谷歌保持一致
throw TypeError('Promise resolver ' + executor + ' is not a function')
}
this.status = 'pending'
this.resolveList = []
this.rejectList = []
try {
executor(tryToResolve.bind(this), resolveOrReject.bind(this, 'rejected'))
} catch (e) {
resolveOrReject.bind(this, 'rejected', e)()
}
}
Promise.prototype.then = function (onFullfilled, onRejected) {
// 返回值穿透以及错误穿透, 注意错误穿透用的是 throw 而不是 return，否则的话
// 这个 then 返回的 promise 状态将变成 resolved 即接下来的 then 中的 onFullfilled
// 会被调用, 然而我们想要调用的是onRejected
if (typeof onFullfilled !== 'function') {
onFullfilled = function (data) {
return data
}
}
if (typeof onRejected !== 'function') {
onRejected = function (reason) {
throw reason
}
}
var executor = function (resolve, reject) {
setTimeout(function () {
try {
// 拿到对应的 handle 函数处理 this.data
// 并以此为依据解析这个新的 Promise
var value = this.status === 'resolved'
? onFullfilled(this.data)
: onRejected(this.data)
resolve(value)
} catch (e) {
reject(e)
}
}.bind(this))
}
// then 接受两个函数返回一个新的 Promise
// then 自身的执行永远异步与 onFullfilled/onRejected 的执行
if (this.status !== 'pending') {
return new Promise(executor.bind(this))
} else {
// pending
return new Promise(function (resolve, reject) {
this.resolveList.push(executor.bind(this, resolve, reject))
this.rejectList.push(executor.bind(this, resolve, reject))
}.bind(this))
}
}
// for prmise A+ test
Promise.deferred = Promise.defer = function () {
var dfd = {}
dfd.promise = new Promise(function (resolve, reject) {
dfd.resolve = resolve
dfd.reject = reject
})
return dfd
}
// for prmise A+ test
if (typeof module !== 'undefined') {
module.exports = Promise
}
return Promise
})()
PromisePolyfill.all = function (promises) {
return new Promise((resolve, reject) => {
const result = []
let cnt = 0
for (let i = 0; i < promises.length; ++i) {
promises[i].then(value => {
cnt++
result[i] = value
if (cnt === promises.length) resolve(result)
}, reject)
}
})
}
PromisePolyfill.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; ++i) {
promises[i].then(resolve, reject)
}
})
}
扫一扫
3227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
