promise的创建
Promise对象是JavaScript异步操作解决方案，为异步方案提供统一的接口，在其中起到了代理的作用，充当异步操作与回调函数的中介，使得异步操作具备同步操作的接口。解决了一层层的嵌套调用，异步可以用同步的写法。
一、创建一个promise实例对象
class Promise {
constructor (executor) {
}
}
此处生成了一个名为Promise的类，constructor为类的构造函数，是一个默认方法。
注意：一个类必须有 constructor 方法，如果没有显示定义，一个默认的 constructor方法会被默认添加。
二、定义promise的状态值
class Promise {
constructor (executor) {
// 状态值
this.status = 'pending';
// 接收值
this.value = 'undefined';
// 成功的函数队列
this.onResolvedCallbacks = [];
// 失败的函数队列
this.onRejectedCallbacks = [];
}
}
promise对象存在一下三种状态：
- pending ------ 进行中
- fulfilled ------ 已成功
- rejected ------ 已失败
状态只能由
pending变为 fulfilled， 或由pending 变为 rejected，一旦改变状态，一直保持
三、实现promise状态值改变
class Promise {
constructor (executor) {
// 状态值
this.status = 'pending';
// 接收值
this.value = 'undefined';
// 成功的函数队列
this.onResolvedCallbacks = [];
// 失败的函数队列
this.onRejectedCallbacks = [];
// 成功的函数队列
this.onResolvedCallbacks = [];
// 失败的函数队列
this.onRejectedCallbacks = [];
// 成功方法
let resolve = data => {
if (this.status === 'pending') {
this.value = data;
this.status = 'fulfilled';
this.onResolvedCallbacks.forEach(fn => fn(this.value))
}
}
// 失败方法
let reject = err => {
if (this.status === 'pending') {
this.value = err;
this.status = 'rejected'
this.onRejectedCallbacks.forEach(fn => fn(this.value))
}
}
// executor 方法执行
try {
executor(resolve, reject)
} catch(error) {
// 执行出错，rejected调用
reject(error)
}
}
}
-
resolve方法将 Promise 对象的初始值状态 pending 变为 resolved -
reject方法将 Promise 对象的初始值状态 pending 改为 rejected
resolve 和 reject 接收任意参数最为入参，为Promised对象成功（fulfilled）和失败（rejected）的返回值。
四、promise核心then方法
class Promise {
constructor (executor) {
// 状态值
this.status = 'pending';
// 接收值
this.value = 'undefined';
// 成功的函数队列
this.onResolvedCallbacks = [];
// 失败的函数队列
this.onRejectedCallbacks = [];
// 成功的函数队列
this.onResolvedCallbacks = [];
// 失败的函数队列
this.onRejectedCallbacks = [];
// 成功方法
let resolve = data => {
if (this.status === 'pending') {
this.value = data;
this.status = 'fulfilled';
this.onResolvedCallbacks.forEach(fn => fn(this.value))
}
}
// 失败方法
let reject = err => {
if (this.status === 'pending') {
this.value = err;
this.status = 'rejected'
this.onRejectedCallbacks.forEach(fn => fn(this.value))
}
}
}
// then 调用
then (onResolved, onRejected) {
if (this.status === 'pending') {
// 等待状态，添加回调函数到成功的函数队列
this.onResolvedCallbacks.push(() =>{
onResolved(this.value)
})
// 等待状态，添加回调函数到失败的函数队列
this.onRejectedCallbacks.push(() =>{
onRejected(this.value)
})
}
// 支持同步调用
if (this.status === 'fulfilled') {
// 调用成功，并且把值返回
onResolved (this.value)
}
// 支持同步调用
if (this.status === 'rejected') {
// 调用失败，并且把值返回
onRejected()
}
}
}
then 方法返回的是两个回调，一个成功的回调，一个失败的回调
then调用
<!-- 测试函数 -->
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(Math.random() > 0.6) {
resolve(1)
} else {
reject(2)
}
}, 1000)
})
}
fn().then(
res => {
console.log('res', res) // res 1
},
err => {
console.log('err', err) // err 2
})
