欢迎访问阿蛮君博客~
关于本站，有任何疑问都可以评论或留言。

Promise 简介以及使用教程

266次阅读
没有评论

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

1. 回调地狱

要了解 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)

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

2. Promise简介

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)
})

3. Promise方法

3.1 Promise.resolve

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

  1. 如果传递给 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
});
  1. 如果传递给它的是一个 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
});
  1. 如果传递给它的是一个普通的值（比如数字、字符串等），则 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
});

3.2 Promise.reject

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

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

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

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

3.3 Promise.all

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
  });

3.4 Promise.race

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
  });

4. 手写Promise

  1. 初始结构搭建

executor 为函数执行器。

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

}

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

}
  1. resolve 与 reject 结构搭建

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

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

    // resolve 函数
    function resolve(data) {

    }

    // reject 函数
    function reject(data) {

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

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

}
  1. 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){

}
  1. 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){

}
  1. 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){

}
  1. 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);
    }

}
  1. 异步任务回调的执行

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
        }
    }

}
  1. 指定多个回调实现

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
        })
    }

}
  1. 同步修改状态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
            })
        }
    })
}
  1. 异步修改状态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();
                    }      
                }
            })
        }
    })
}
  1. 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);
                }
            })
        }
    })
}
  1. 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);
}
  1. 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);
        } 
    })
}
  1. 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) 
    })
}
  1. 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);
            })
        }

    })
}
  1. 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);
            })
        }
    })
}
  1. 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);
            })
        }
    })
}
  1. 封装成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);
                })
            }
        })
    }
}

5. async与await

5.1 async

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

5.2 await

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

5.3 注意

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

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

AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年
正文完
Promise 前端开发 异步任务
2024-04-20
 
阿蛮君
版权声明：本站原创文章，由 阿蛮君 2024-04-20发表，共计26926字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
Linux 及 Windows配置临时全局代理
Linux 以及 Docker 配置 http 代理
EasyExcel 导出文件过大报错分析
Linux 离线安装 Docker
评论（没有评论）
文章搜索
随机文章
Docker 配置文件详解

Docker 配置文件详解

使用 docker 过程中，经常遇到需要修改配置文件的清空，整理了下 docker 配置文件相关的内容。 1. 容器运行时配置 { "default-runtime":"runc", // 容器的默认OCI运行时（默认为" runc"） "default-ulimits":{}, // 容器的默认ulimit（默认[]...
Docker 不常用但很实用的命令总结

Docker 不常用但很实用的命令总结

1、查看容器 ip docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' 容器名 2、查看 run 命令 docker run --rm -v /var/run/docker.sock:/var/run/docker.sock assaflavie/runlike -p <...
Ubuntu 防火墙 ufw 的基本使用

Ubuntu 防火墙 ufw 的基本使用

在 Ubuntu 中，采用 ufw 管理防火墙，因为 iptables 的规则实在比较复杂，还是通过 ufw 管理比较方便，所以有必要了解一下它的基本使用方法。此外，ufw 不仅仅是 Ubuntu 可以使用，Centos 也是可以的，不过 Centos 默认使用 firewalld 管理。 1. 安装ufw # Ubuntu安装 sudo apt-get install ufw # Centos安...
360文件夹-让你像浏览器一样管理和查看文件

360文件夹-让你像浏览器一样管理和查看文件

不要害怕，这里介绍的不是 360 全家桶，360 文件夹仅是一个单独且纯净的软件。 360 文件夹软件是一款非常安全的电脑文件管理工具，在软件中可以帮助你进行文件的分类整理，根据文件不同的格式形式来进行显示，可以在文件夹里面进行内容的搜索，帮助你更方便的管理文件，需要文件的时候，也可以更快速的去查找到它们。 可能还有很多人没注意到，目前 win11 也自带标签管理。但是每次快捷键 Win+E 都会...
PHP 实现随机图片 api 接口以及9000多个头像打包下载

PHP 实现随机图片 api 接口以及9000多个头像打包下载

由于博客头像经常图裂，阿蛮君考虑做个随机头像 api 接口，资源文件在后面，代码如下： <?php $type = isset($_GET['type']) ? $_GET['type'] : ''; $dirPath = './' . $type . '/'; if ($type != &#...
热门文章

IDM 6.39.2 安装教程

Navicat15 最新版下载和安装教程

Dokcer 安装 v2rayA

Docker 搭建 headscale 异地组网完整教程

Ubuntu 22.04 锁屏不能远程连接的解决方案

最新评论
john john 这个功能挺实用的，对于导航网站来说。
john john 好嘞
john john 想要一个免费下载全网音乐的自建程序 :razz:
thinks365 thinks365 网站标题：日有所思 网站地址：https://thinks365.com/ 网站介绍：一个成分复杂的网站~ 网站图标地址：https://thinks365.com/logo.png 贵站已添加~
zicheng zicheng 赞一个
heiu heiu 怎么让它自己更新并选择延迟低的啊，每次手动更新好麻烦
momo momo 大佬
le le 能否更新下https代理
creator creator 好的
creator creator 博主，有没有可以支持img格式的系统docker指令？
留言建议| 免责声明| 友链申请| 站点地图
Copyright © 2022-2024 阿蛮君博客 湘ICP备2023001393号
本网站由 亿信互联 提供云计算服务 | 蓝易云CDN 提供安全防护和加速服务
Powered by Wordpress  Theme by Puock