什么是promise？
promise是js直接中进行异步编程的新的解决方案
promise的基本使用
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve和reject 。它们是两个函数，由JavaScript引擎提供，不用自己部署。
创建一个promise
var p = new Promise((resolve,reject) => {
// 执行器函数
1、成功 调用resolve(value)
2、失败 调用reject(resaon)
})
p.then(
value => { // 接收得到的成功的value数据
},
reason => { // 接收得到的失败的reason数据
}
)
promise的三种状态：ending 、resolved（又称Fulfilled）、rejected
- promise 对象初始化状态为 pending
- 当调用resolve(成功)，会由pending => resolved
- 当调用reject(失败)，会由pending => rejected
注：promise一旦状态改变，就不会再改，
一个promise指定多个成功/失败的回调函数，当promise改变为对应状态时都会调用
var p = new Promise((resolve,reject) => {
setTimeout(() => {
console.log('上课了')
resolve()
},10)
})
p.then(() => {
console.log('班长：起立')
})
p.then(() => {
console.log('同学们：老师好')
})
改变promise状态与指定回调函数谁先谁后？
- 都有可能 正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
- 如何先改变状态，再指定回调
在执行器函数中直接调用resolve/reject，延迟更长时间才调用then() - 什么时候才能得到数据？
如果先指定回调，当状态改变时，回调就会先调用，得到数据
如果先改变状态，那当指定回调时，回调函数就会调用，得到数据
// 先指定回调函数，后改变状态
var p = new Promise((resolve,reject) => {
setTimeout(() => {
// 后改变状态,同时传递数据，异步执行回调函数
resolve('成功')
},3000)
}).then((value) => {
// 先指定回调函数，保存当前指定的回调函数
console.log('我是回调函数')
console.log(value)
})
// 先改变状态，后指定回调函数
var p = new Promise((resolve, reject) => {
// 先改变状态，同时传递数据
resolve('马上就成功')
})
setTimeout(() => {
// 后指定回调函数，异步执行回调函数
p.then((value) => {
console.log(value)
})
},1000)
Promise.prototype.then()
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。then 方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为 Reject时调用。其中，第二个函数是可选的，不一定要提供。]
then方法返回的是一个新的Promise实例(注意，不是原来那个Promise实例)。因此可以采用链式写法，即then方法后面再调用另一个then方法。
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象(即有异步操作)，这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
promise.then()返回新的peomise的结果状态由前一个指定的回调函数执行的结果决定：
- 如果抛出异常，新promise变为resolved ，reason为抛出的异常
- 如果返回的是非promise的任意值，新peomise变为resolved，value为返回的值
- 如果返回的是另一个新的peomise，此promise的结果会成为新的promise的结果
var p = new Promise((resolve,reject) => {
resolve('成功')
})
.then(
value => {
// 没有指定返回值，是一个非promise的任意值
console.log('resolve1',value)
},reason => {
console.log('reject1', reason)
})
.then(
value => {
// 根据上一个函数的结果，状态为resolved, 调用
console.log('resolve2', value)
}, reason => {
console.log('reject2', reason)
})
// resolve1 成功
// resolve2 undefined
var p = new Promise((resolve,reject) => {
resolve('成功')
})
.then(
value => {
// 根据执行器函数结果，调用成功函数
console.log('resolve1',value)
throw '失败了'
},reason => {
console.log('reject1', reason)
})
.then(
value => {
console.log('resolve2', value)
}, reason => {
// 根据上一个then的函数返回结果，调用reject，reason为错误原因
console.log('reject2', reason)
})
// resolve1 成功
// reject2 失败了
如何中断promise链？
- 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
办法：在回调函数中返回一个pendding状态的promise对象
new Promise((resolve, reject) => {
reject(1)
}).then(
value => console.log(value)
).catch(
reason => {
console.log('程序报错就中断promise')
return new Promise(() => { }) // 返回一个pending的promise
})
.then(
value => console.log('如果程序报错，将不会执行到这')
)
Promise.prototype.catch()
Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。
如果Promise状态已经变成Resolved，再抛出错误是无效的。
如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何 反应。
Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。
链式调用中，如果没有报错，会跳过catch方法，继续后面的then()方法，要是then方法里面报错，就与前面的catch无关了。
var p = new Promise((resolved,reject) => {
reject('失败了')
resolved('你看我在哪？') // 永远不会被调用
}).then(( value ) => {
console.log(1)
}).then((value) => {
console.log(2)
}).catch((error) => {
// 处理前面三个Promise产生的错误
console.log(error)
}).then(() => {
console.log('我是可以被调用的')
});
return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获
Promise.resolve()
.then(() => {
return new Error('error!!!')
})
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
// then: Error: error!!!
// at Promise.resolve.then (...)
// at ...
Promise.all()
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。且返回一个promise
p 的状态由 p1 、p2、p3决定，分成两种情况。
只有 p1 、p2、p3的状态都变成 fulfilled， p 的状态才会变成fulfilled ，此时 p1 、p2、p3 的返回值组成一个数组，传递给 p 的回调函数。
只要p1 、p2、p3之中有一个被rejected， p 的状态就变成rejected ,此时第一个被 reject实例的返回值，会传递给p的回调函数。
let p1 = new Promise((resolve, reject) => {
resolve(1);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
},100)
});
let p3 = new Promise((resolve, reject) => {
resolve(3);
});
Promise.all([p1, p2, p3])
.then(data => {
console.log(data);
// [1, 2, 3] 结果顺序和promise实例数组顺序是一致的
})
.catch(error => {
console.log(data);
})
Promise.race()
Promise.race()是参数中有一个实例率先改变状态，p的状态就跟着改变，那个率先改变的Promise实例的返回值，就传递给p的回调函数。
Promise.race()方法，同样是将多个Promise实例，包装成一个新的Promise实例。
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 100)
});
let p2 = new Promise((resolve, reject) => {
resolve(2);
});
let p3 = new Promise((resolve, reject) => {
resolve(3);
});
Promise.race([p1, p2, p3])
.then(data => {
console.log(data);
// 2 返回那个率先改变的Promise实例的返回值
})
.catch(error => {
console.log(data);
})
Promise.resolve()
主要作用：将现有对象转为Promise对象
Promise.resolve 方法的参数分成四种情况
参数是一个Promise实例
如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例参数是一个thenable对象
thenable对象指的是具有then方法的对象，Promise.resolve方法会将这个对象转为Promise对象，然后就立即执行thenable对象的then方法。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
- 参数不是具有then方法的对象，或者根本不是对象
如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved。
var p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
- 不带有任何参数
Promise.resolve方法允许调用时不带参数，直接返回一个Resolved状态的Promise对象
var p = Promise.resolve();
p.then(function () {
// ...
});
需要注意的是，立即resolve的Promise对象，是在本轮“事件循环”(event loop)的结束时，而不是在下一轮“事件循环”的开始时。
setTimeout(function () {
console.log('three');
}, 0);
Promise.resolve().then(function () {
console.log('two');
});
console.log('one');
// one
// two
// three
Promise.reject()
Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected。它的参数用法与Promise.resolve方法完全一致。
实现一个基本的promise
// 自定义promise函数模块：IIFE
(function (window) {
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
// promise构造函数
// excutor执行器函数(同步执行)
function Promise(excutor) {
var self = this;
this.status = PENDING // 给promise对象指定status属性，初始值为pending
this.data = undefined // 给promise对象指定一个用户存储结果数据的属性
this.callbacks = [] // 每个元素的结构{ onResolved(){}, onReject(){}}
// 立即同步执行excutor
function resolve(value) {
// 如果当前状态不是pending，直接结束
if (self.status !== PENDING) {
return
}
// 将状态改为resolved
self.status = RESOLVED
// 保存value数据
self.data = value
// 如果有待执行的callback函数，立即异步执行回调函数onResolved
if (self.callbacks.length > 0) {
// 异步执行
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
})
})
}
}
function reject(reason) {
// 如果当前状态不是pending，直接结束
if (self.status !== PENDING) {
return
}
// 将状态改为resolved
self.status = REJECTED
// 保存value数据
self.data = reason
// 如果有待执行的callback函数，立即异步执行回调函数onRejected
if (self.callbacks.length > 0) {
// 异步执行
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
})
})
}
}
try {
excutor(resolve, reject)
} catch(error){
// 如果执行器出现异常，promise对象变为reject状态
reject(error)
}
}
// promise原型对象的then方法
// 指定成功和失败的回调函数
// 返回一个新的promise对象
Promise.prototype.then = function (onResolved, onRejected) {
// 向后传递成功的value
onResolved = typeof onResolved === 'function' ? onResolved : value => value
// 指定默认的失败的回调(实现错误/异常穿透的关键点) 向后传递失败的reason
onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}
const self = this
// console.log(self.data)
return new Promise((resolve, reject) => {
// 调用指定的函数处理
// 根据执行结果，改变return的promise的状态
function handle(callback) {
// 1、如果抛出异常，return的promise就会失败，reason就是error
// 2、如果回调函数返回非promise，return的promise就会成功，value就是返回值
// 3、如果回调函数返回的是promise，return的promise结果就是这个promise的结果
try {
const result = callback(self.data)
// 3、如果回调函数返回的是promise，return的promise结果就是这个promise的结果
if (result instanceof Promise) {
// result.then(
// value => {
// resolve(value) // 当result成功时，return的promise就会成功，value就是返回的值
// },
// reason => {
// reject(reason) // 当result失败时，让return的promise也失败
// }
// )
// 或者直接
result.then(resolve,reject)
} else {
// 2、如果回调函数返回非promise，return的promise就会成功，value就是返回值
resolve(result)
}
} catch (error) {
// 1、如果抛出异常，return的promise就会失败，reason就是error
reject(error)
}
}
if (self.status === PENDING) {
// 当前状态还是peding状态，将回调函数保存起来
self.callbacks.push({
onResolved(value) {
handle(onResolved)
},
onRejected(reason) {
handle(onRejected)
}
})
} else if (self.status === RESOLVED) {
// 如果当前是resolved 异步执行onResolved并改变return的promise状态
setTimeout(() => {
// handle(onRejected)
handle(onResolved)
})
} else { // reject
// 如果当前是resolved 异步执行onRejectd并改变return的promise状态
setTimeout(() => {
handle(onRejected)
})
}
})
}
// promise原型对象的catch方法
// 指定失败的回调函数
// 返回一个新的promise对象
Promise.prototype.catch = function (onRejected) {
return this.then(undefined,onRejected)
}
// promise函数对象的resolve方法
// 返回一个指定结果的成功的promise
Promise.resolve = function (value) {
// 如果是一般值
// 如果是成功的promise
// 如果是失败的promise
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(resolve, reject)
} else {
// value不是promise =》 promise 变成功，数据是value
resolve(value)
}
})
}
// promise函数对象的reject方法
// 返回一个指定reason的成功的promise
Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason)
})
}
// promise函数对象的all方法
// 返回一个promise，只有当所有的promise都成功时才算成功，否则失败
Promise.all = function (promises) {
// 用来保存所有成功value数组
const values = new Array(promises.length)
// 计数器
let resolvedCount = 0
return new Promise((resolve, reject) => {
// 遍历获取每一个promise的结果
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => {
resolvedCount++
// p成功，将成功的value保存values
value[index] = value
// 如果全部成功了，将return的promise改变成功
if (resolvedCount === promises.length) {
resolve(values)
}
},
reason => {
reject(reason)
}
)
})
})
}
// promise函数对象的race方法
// 返回一个promise，其结果由第一个完成的promise决定
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
promises.forEach((p, index) => {
// Promise.resolve(p)为了兼容传入的不是一个promise
Promise.resolve(p).then(
value => {
resolve(value)
},
reason => {
reject(reason)
}
)
})
})
}
// 返回一个promise对象，在指定的时间后再确认结果
Promise.resolveDelay = function (value,time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// value是promise
if (value instanceof Promise) {
value.then(resolve, reject)
} else {
// value不是promise =》 promise 变成功，数据是value
resolve(value)
}
}, time)
})
}
Promise.rejectDelsy = function (reason, time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(value)
}, time)
})
}
// 向外暴露promise函数
window.Promise = Promise
})(window)
关于promise的经典面试题
选了几篇有质量的promise面试题，可以做做：
1、Promise面试题
2、Promise 必知必会（十道题）
3、面试官眼中的Promise
本文参考：
《es6标准教程》
《promise核心技术》