Promise 简介以及使用教程

2024-8-12

共计 26926 个字符，预计需要花费 68 分钟才能阅读完成。

要了解 Promise 是什么，首先要知道什么是异步编程，常见的异步编程有以下几种：

nodejs 中 fs 模块操作磁盘文件
数据库操作
ajax 请求
定时器

要知道，js 设计之初就是单线程模式，那么遇到异步函数不能等它执行完再执行，所以通常传递一个回调函数。例如：

setTimeout(() => {
    console.log('3 秒后打印');
}, 3000)

这种方式有一个明显的问题，就是当异步操作包含异步操作时会形成回调地狱。例如：

setTimeout(() => {
    console.log('3 秒后打印');
    setTimeout(() => {
        console.log('6 秒后打印');
        setTimeout(() => {
            console.log('9 秒后打印');
        }, 3000)
    }, 3000);
}, 3000)

当在项目中，大量编写这种代码是不合理的，比如登录成功以后发起请求，获取一系列数据等等。

Promise 即承诺的意，正如其名，它承诺未来返回给你一个处理结果。它是一种用于处理异步操作的对象，代表了一个异步操作的最终完成或失败的状态和结果值。Promise 可以让你以更加清晰和可读的方式编写异步代码，避免了回调地狱的问题。

在 Promise 中，有三种状态：

Pending（进行中）：初始状态，既不是成功也不是失败状态。
Fulfilled（已成功）：操作成功完成。
Rejected（已失败）：操作失败。

当一个 Promise 对象被创建的时候，默认就是 Pending 状态。当执行 resolve() 方法时，状态修改为 Fulfilled；当执行 reject() 方法时或抛出异常时，状态修改为 Rejected。不同的状态将会执行不同的回调函数：

new Promise((resolve, reject) => {
    if(...){
        resolve();
    }else{
        reject();
    }
}).then(value => {
    console.log(value)
}, reason => {
    console.log(value)
})

但是其实一般会这样干，使用 catch 捕获到拒绝状态的 Promise。

new Promise((resolve, reject) => {
    if(...){
        resolve();
    }else{
        reject();
    }
}).then(value => {
    console.log(value)
}).then(value => {
    console.log(value)
}).catch((err) => {
    console.log(value)
})

使用 Promise 优化上面的代码：

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('3 秒后打印');
        resolve()
    }, 3000)
}).then(result => {
    // 注意：这里需要返回一个 Promise 对象
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('6 秒后打印');
            resolve()
        }, 3000)
    })
}).then(result => {
    setTimeout(() => {
        console.log('9 秒后打印');
    }, 3000)
})

Promise.resolve 返回一个已解析（resolved）的 Promise 对象，并带有一个指定的值。无论传递给 Promise.resolve 的值是一个 Promise 对象还是一个普通的值，它都会返回一个 Promise 对象，并以该值解析。

如果传递给 Promise.resolve 的是一个 Promise 对象，则它会原封不动地返回这个 Promise 对象：

const originalPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("result");
  }, 1000);
});

const resolvedPromise = Promise.resolve(originalPromise);

resolvedPromise.then(result => {
  console.log(result); // 输出: Original promise resolved
});

如果传递给它的是一个 thenable 对象（即具有 .then 方法的对象），则 Promise.resolve 会将其视为一个 Promise 对象，并立即调用其 .then 方法:

const thenableObject = {
  then: function(resolve, reject) {
    resolve("result");
  }
};

const resolvedFromThenable = Promise.resolve(thenableObject);

resolvedFromThenable.then(result => {
  console.log(result); // 输出: result
});

如果传递给它的是一个普通的值（比如数字、字符串等），则 Promise.resolve 会返回一个以该值解析的 Promise 对象：

const resolvedStringPromise = Promise.resolve("result");

resolvedStringPromise.then(result => {
  console.log(result); // 输出: result
});

const resolvedNumberPromise = Promise.resolve(42);

resolvedNumberPromise.then(result => {
  console.log(result); // 输出: 42
});

Promise.reject 返回一个被拒绝（rejected）的 Promise 对象，并带有一个指定的原因（reason）。无论传递给 Promise.reject 的值是什么，它都会返回一个被拒绝的 Promise 对象，并以该值作为拒绝原因。

const reason = "reason";
const rejectedPromise = Promise.reject(reason);

rejectedPromise.catch(error => {
  console.error('Error:', error);
});

即使传递的是一个字符串，还是返回一个错误的 Promise。

Promise.all 接受一个由 Promise 对象组成的可迭代对象（比如数组），并返回一个新的 Promise 对象。这个新的 Promise 对象会在可迭代对象中所有的 Promise 都已经解决（fulfilled）或至少有一个 Promise 被拒绝（rejected）后才会被解决或拒绝。

全部成功的案例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'Success-1');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, 'Success-2');
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 300, 'Success-3');
});

const promise4 = new Promise((resolve, reject) => {
  setTimeout(reject, 150, 'Faild');
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // 输出: ['Success-1', 'Success-2', 'Success-3']
  })
  .catch(error => {
    console.error('Error:', error);
  });

Promise.all([promise1, promise2, promise3, promise4])
  .then(values => {
    console.log(values);
  })
  .catch(error => {
    console.error('Error:', error); // 输出: Error: Faild
  });

Promise.race() 接收一个 Promise 数组作为参数，并返回一个新的 Promise。这个新 Promise 将在数组中的任何一个 Promise 对象解决（resolve）或拒绝（reject）时解决或拒绝，以第一个完成的 Promise 的状态为准。

这意味着，如果传入的 Promise 数组中有一个 Promise 对象先解决（resolve）或拒绝（reject），那么返回的 Promise 将立即采用这个解决值或拒绝原因。而其他的 Promise 对象的状态不会再影响返回的 Promise。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'Promise 1');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'Promise 2');
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'Promise 3');
});

Promise.race([promise1, promise2, promise3])
  .then((value) => {
    console.log(value); // 输出 "Promise 1"，因为它是第一个完成的 Promise
  });

初始结构搭建

executor 为函数执行器。

// 声明构造函数
function Promise(executor) {

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

resolve 与 reject 结构搭建

函数执行器需要接收两个函数作为参数，所以这两个函数需要在实例中进行定义。

// 声明构造函数
function Promise(executor) {

    // resolve 函数
    function resolve(data) {

    }

    // reject 函数
    function reject(data) {

    }
    // 同步调用执行器函数
    executor(resolve, reject);
}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

resolve 与 reject 代码实现

resolve 和 reject实现的效果是修改对象的状态和结果值，但是在执行时拿到的 this 将是 Window 对象，而不是 Promise 对象。所以，需要在外面保存Promise 对象的 this 引用。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    // reject 函数
    function reject(data) {
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }
    // 同步调用执行器函数
    executor(resolve, reject)
}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

throw抛出异常改变状态

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    // reject 函数
    function reject(data) {
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

Promise对象状态只能修改一次

执行之前需要判断状态是否改变。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

then方法执行回调

then 方法中传递两个函数，根据 Promise 的状态执行不同的函数。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    // 调用回调函数
    if(this.PromiseState === 'fulfilld'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejectd'){
        onRejected(this.PromiseResult);
    }

}

异步任务回调的执行

Promise 中的代码是同步执行的，如果里面是同步任务，那么此时立刻修改 Promise 状态，那么回调函数可以顺利执行。

如果里面是异步任务，在 then 方法中调用回调函数时，Promise 的状态还是 pending。这个时候应该保存一下回调函数，在执行完异步任务时再调用回调函数。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callback = {};

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    }

    // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        if(self.callback.onRejected){
            self.callback.onRejected(data);
        }
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

    // 调用回调函数
    if(this.PromiseState === 'fulfilld'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejectd'){
        onRejected(this.PromiseResult);
    }

    if(this.PromiseState === 'pending'){
        // 保存回调函数
        this.callback = {
            onResolved,
            onRejected
        }
    }

}

指定多个回调实现

Promise 对象可以指定多个 then 方法，并且当状态改变时，then 方法都会进行调用。

但是上面的代码实现，只会调用最后一个 then 方法，原因是保存回调函数时，只保存了最后一个 then 方法传递的回调函数。

需要状态改变时，执行多个回调，需要将所有的回调函数都保存。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

    // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

    // 调用回调函数
    if(this.PromiseState === 'fulfilld'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejectd'){
        onRejected(this.PromiseResult);
    }

    if(this.PromiseState === 'pending'){
        // 保存回调函数
        this.callbacks.push({
            onResolved,
            onRejected
        })
    }

}

同步修改状态then方法结果返回

then 方法可以链式调用，说明有返回值，但是上面的代码回调并没有返回值。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            try {
               // 获取回调函数的执行结果
                let result = onResolved(this.PromiseResult);
                if(result instanceof Promise){
                    result.then(v => {
                        reslove(v);
                    }, r => {
                        reject(r);
                    })
                }else{
                    resolve(result);
                } 
            } catch (e) {
                reject(e);
            }

        }
        if(this.PromiseState === 'rejectd'){
            try {
                // 获取回调函数的执行结果
                 let result = onRejected(this.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
            } catch (e) {
                 reject(e);
            }
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved,
                onRejected
            })
        }
    })
}

异步修改状态then方法结果返回

当执行 then 方法时，如果 Promise 里面执行的是异步任务，此时 Promise 状态还是 pending。那么执行 then 时，进入 if(this.PromiseState === 'pending') 判断，这里没有进行修改 Promise 的状态。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            try {
               // 获取回调函数的执行结果
                let result = onResolved(this.PromiseResult);
                if(result instanceof Promise){
                    result.then(v => {
                        reslove(v);
                    }, r => {
                        reject(r);
                    })
                }else{
                    resolve(result);
                } 
            } catch (e) {
                reject(e);
            }

        }
        if(this.PromiseState === 'rejectd'){
            try {
                // 获取回调函数的执行结果
                 let result = onRejected(this.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
            } catch (e) {
                 reject(e);
            }
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    try {
                        // 执行成功回调函数
                        let result = onResolved(self.PromiseResult);

                        if(result instanceof Promise){
                            result.then(v => {
                                reslove(v);
                            }, r => {
                                reject(r);
                            })
                        }else{
                            reslove();
                        }
                    } catch (e) {
                        reject(e);
                    }

                },
                onRejected: function() {

                    try {
                        // 执行回调失败函数
                        let result = onRejected(self.PromiseResult);

                        if(result instanceof Promise){
                            result.then(v => {
                                reslove(v);
                            }, r => {
                                reject(r);
                            })
                        }else{
                            reslove();
                        }
                    } catch (e) {
                        reject();
                    }      
                }
            })
        }
    })
}

then方法优化

上面的代码有很多是重复的，需要进行优化。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejectd'){
            callback(onRejected);
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

catch方法

catch 方法只处理失败的回调函数，所以调用 then 方法即可。

另外，如果 then 方法只传入成功的回调函数，那么失败的时候将执行不到失败的回调函数，提示 onRejected is not a function。

另外，当 then 方法什么都不传时，默认应该也能够进行值传递，所以 onResolved 应该也需要一个默认方法。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }

    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejectd'){
            callback(onRejected);
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

resolve方法封装

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }

    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }

    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejectd'){
            callback(onRejected);
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

Promise.prototype.resolve = function (value) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v => {
                reslove(v);
            }, r => {
                reject(r);
            })
        }else{
            resolve(result);
        } 
    })
}

reject方法封装

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }

    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }

    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejectd'){
            callback(onRejected);
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

Promise.prototype.resolve = function (value) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v => {
                reslove(v);
            }, r => {
                reject(r);
            })
        }else{
            resolve(result);
        } 
    })
}

Promise.prototype.reject = function (reason) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        reject(reason) 
    })
}

all方法封装

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }

    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }

    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejectd'){
            callback(onRejected);
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

Promise.resolve = function (value) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v => {
                reslove(v);
            }, r => {
                reject(r);
            })
        }else{
            resolve(result);
        } 
    })
}

Promise.reject = function (reason) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        reject(reason) 
    })
}

Promise.all = function (promises) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {

        let count = 0;
        let arr = [];

        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                // 得知对象的状态是成功
                count++;
                // 将结果存入数组
                arr[i] = value;
                // 成功的条件
                if(count === promises.length){
                    resolve();
                }
            }, r => {
                reject(r);
            })
        }

    })
}

race方法封装

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用成功的回调函数
        self.callbacks.forEach( item => {
            item.onResolved(data);
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        // 3. 调用失败的回调函数
        self.callbacks.forEach( item => {
            item.onRejected(data);
        })
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }

    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }

    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejectd'){
            callback(onRejected);
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

Promise.resolve = function (value) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v => {
                reslove(v);
            }, r => {
                reject(r);
            })
        }else{
            resolve(result);
        } 
    })
}

Promise.reject = function (reason) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        reject(reason) 
    })
}

Promise.all = function (promises) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {

        let count = 0;
        let arr = [];

        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                // 得知对象的状态是成功
                count++;
                // 将结果存入数组
                arr[i] = value;
                // 成功的条件
                if(count === promises.length){
                    resolve();
                }
            }, r => {
                reject(r);
            })
        }
    })
}

Promise.race = function (promises) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {

        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                resolve(v);
            }, r => {
                reject(r);
            })
        }
    })
}

then方法回调异步执行

then方法回调是异步执行的。

// 声明构造函数
function Promise(executor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];

    // 保存实例对象this
    const self = this;
    // resolve 函数
    function resolve(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态
        self.PromiseState = 'fulfilld';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        setTimeout(() => {
            // 3. 调用成功的回调函数
            self.callbacks.forEach( item => {
                item.onResolved(data);
            })
        })
    }

     // reject 函数
    function reject(data) {
        if(self.PromiseState !== 'pending') return;
        // 1. 修改对象状态 
        self.PromiseState = 'rejectd';
        // 2. 修改对象结果值
        self.PromiseResult = data;

        setTimeout(() => {
            // 3. 调用失败的回调函数
            self.callbacks.forEach( item => {
                item.onRejected(data);
            })
        }) 
    }

    try{
        // 同步调用执行器函数
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }

}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    // 判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }

    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }

    // 需要返回一个 Promise 
    return new Promise((reslove, reject) => {
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                 let result = type(self.PromiseResult);
                 if(result instanceof Promise){
                     result.then(v => {
                         reslove(v);
                     }, r => {
                         reject(r);
                     })
                 }else{
                     resolve(result);
                 } 
             } catch (e) {
                 reject(e);
             }
        }

        // 调用回调函数
        if(this.PromiseState === 'fulfilld'){
            setTimeout(() => {
                callback(onResolved);
            });
        }
        if(this.PromiseState === 'rejectd'){
            setTimeout(() => {
                callback(onRejected);
            });    
        }

        if(this.PromiseState === 'pending'){
            // 保存回调函数
            this.callbacks.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

Promise.resolve = function (value) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v => {
                reslove(v);
            }, r => {
                reject(r);
            })
        }else{
            resolve(result);
        } 
    })
}

Promise.reject = function (reason) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        reject(reason) 
    })
}

Promise.all = function (promises) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {

        let count = 0;
        let arr = [];

        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                // 得知对象的状态是成功
                count++;
                // 将结果存入数组
                arr[i] = value;
                // 成功的条件
                if(count === promises.length){
                    resolve();
                }
            }, r => {
                reject(r);
            })
        }
    })
}

Promise.race = function (promises) {
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {

        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                resolve(v);
            }, r => {
                reject(r);
            })
        }
    })
}

封装成class

class Promise{

    constructor(executor){

        this.PromiseState = 'pending';
        this.PromiseResult = null;
        this.callbacks = [];

        // 保存实例对象this
        const self = this;
        // resolve 函数
        function resolve(data) {
            if(self.PromiseState !== 'pending') return;
            // 1. 修改对象状态
            self.PromiseState = 'fulfilld';
            // 2. 修改对象结果值
            self.PromiseResult = data;

            setTimeout(() => {
                // 3. 调用成功的回调函数
                self.callbacks.forEach( item => {
                    item.onResolved(data);
                })
            })
        }

        // reject 函数
        function reject(data) {
            if(self.PromiseState !== 'pending') return;
            // 1. 修改对象状态 
            self.PromiseState = 'rejectd';
            // 2. 修改对象结果值
            self.PromiseResult = data;

            setTimeout(() => {
                // 3. 调用失败的回调函数
                self.callbacks.forEach( item => {
                    item.onRejected(data);
                })
            }) 
        }

        try{
            // 同步调用执行器函数
            executor(resolve, reject);
        }catch(e){
            reject(e);
        }
    }

    then(onResolved, onRejected){
        const self = this;
        // 判断回调函数参数
        if(typeof onRejected !== 'function'){
            onRejected = reason => {
                throw reason;
            }
        }

        if(typeof onResolved !== 'function'){
            onResolved = value => value;
        }

        // 需要返回一个 Promise 
        return new Promise((reslove, reject) => {
            function callback(type) {
                try {
                    // 获取回调函数的执行结果
                     let result = type(self.PromiseResult);
                     if(result instanceof Promise){
                         result.then(v => {
                             reslove(v);
                         }, r => {
                             reject(r);
                         })
                     }else{
                         resolve(result);
                     } 
                 } catch (e) {
                     reject(e);
                 }
            }

            // 调用回调函数
            if(this.PromiseState === 'fulfilld'){
                setTimeout(() => {
                    callback(onResolved);
                });
            }
            if(this.PromiseState === 'rejectd'){
                setTimeout(() => {
                    callback(onRejected);
                });    
            }

            if(this.PromiseState === 'pending'){
                // 保存回调函数
                this.callbacks.push({
                    onResolved: function() {
                        callback(onResolved);
                    },
                    onRejected: function() {
                        callback(onRejected);
                    }
                })
            }
        })
    }

    catch(onRejected){
        return this.then(undefined, onRejected);
    }

    static resolve(value){
        // 返回 Promise 对象
        return new Promise((resolve, reject) => {
            if(value instanceof Promise){
                value.then(v => {
                    reslove(v);
                }, r => {
                    reject(r);
                })
            }else{
                resolve(result);
            } 
        })
    }

    static reject(reason){
        // 返回 Promise 对象
        return new Promise((resolve, reject) => {
            reject(reason) 
        })
    }

    static all(promises){
        // 返回 Promise 对象
        return new Promise((resolve, reject) => {

            let count = 0;
            let arr = [];

            for(let i=0;i<promises.length;i++){
                promises[i].then(v => {
                    // 得知对象的状态是成功
                    count++;
                    // 将结果存入数组
                    arr[i] = value;
                    // 成功的条件
                    if(count === promises.length){
                        resolve();
                    }
                }, r => {
                    reject(r);
                })
            }
        })
    }

    static race(){
        // 返回 Promise 对象
        return new Promise((resolve, reject) => {

            for(let i=0;i<promises.length;i++){
                promises[i].then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                })
            }
        })
    }
}

函数返回值为 Promise 对象
Promise 对象的结果值由 async 函数的执行的返回值决定

await 右侧表达式一般为 Promise 对象，但也可以是其他值
如果表达式为 Promise 对象，await 返回的是 Promise 成功的值
如果表达式为其它值，直接将此值作为 await 的返回值

await 必须写在 async 函数中，但 async 函数中可以没有 await
如果 await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理

提醒：本文发布于114天前，文中所关联的信息可能已发生改变，请知悉！

Tips:清朝云网络工作室

阅读剩余

版权声明网站名称： 清朝云资源网
本文章网址：https://www.qcyqq.com/7501.html
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！邮件：766378891@qq.com
网站部分内容来源于网络，版权争议与本站无关。请在下载后的24小时内从您的设备中彻底删除上述内容。
如无特别声明本文即为原创文章仅代表个人观点，版权归《清朝云资源网》所有，欢迎转载，转载请保留原文链接。

THE END

Promise 简介以及使用教程

1. 回调地狱

2. Promise简介

3. Promise方法

3.1 Promise.resolve

3.2 Promise.reject

3.3 Promise.all

3.4 Promise.race

4. 手写Promise

5. async与await

5.1 async

5.2 await

5.3 注意