Promise学习笔记

最新推荐文章于 2022-10-13 12:13:19 发布

二木成林

最新推荐文章于 2022-10-13 12:13:19 发布

阅读量2.2k

点赞数 2

分类专栏：学习笔记文章标签： node.js 前端 Promise

本文链接：https://blog.csdn.net/cnds123321/article/details/121344929

版权

学习笔记专栏收录该内容

29 篇文章 26 订阅

订阅专栏

注：笔记来自于视频尚硅谷Web前端Promise教程从入门到精通
注：如果是初学仅需要学会Promise的基本使用即可，不要陷入要自己实现手写Promise中。

Promise的理解和使用

Promise是什么

Promise是一门新的技术，ES6技术规范。
Promise是JavaScript进行异步编程的新解决方案。旧方案是单纯使用回调函数。
从语法上来说，Promise是一个构造函数。
从功能上来说，promise对象用来封装一个异步操作并可以获取其成功和失败的结果值。

JavaScript中常见的异步编程场景有：

fs模块文件操作：require('fs').readFile('./test.txt', (err,data)=>{});
数据库操作
Ajax：$.get('/server', (data)=>{});
定时器：setTimeout(()=>{}, 2000);

Promise的出现解决了回调地狱的问题：

// 所谓的回调地狱就是在回调函数中不断嵌套回调函数
asyncFunc1(opt, function (args1) {
    asyncFunc2(opt, function (args2) {
        asyncFunc3(opt, function (args3) {
            asyncFunc4(opt, function (args4) {
                // ...
            })
        })
    })
});

Promise的语法格式如下：

var promise = new Promise(function (resolve, reject) {
    // resolve和reject两个都是函数类型的参数
    // 当成功时调用resolve()函数
    // 当失败时调用reject()函数
    if (/*异步操作成功*/){
        resolve([成功参数列表]);
    } else {
        reject([失败参数列表]);
    }
});
promise.then(function ([成功参数列表]) {
    // 当执行成功时调用的方法，即resolve
}, function ([失败参数列表]) {
    // 当执行失败时调用的方法，即reject
});

案例

获取随机数来打印字符串

使用异步编程实现，如下：

setTimeout(function () {
    var random = Math.ceil(Math.random() * 10);
    // 如果随机数大于5则直接输出随机数的值；如果随机数小于等于5则循环打印"hello world"
    if (random > 5) {
        console.log("random = " + random);
    } else {
        for (var i = 0; i < random; i++) {
            console.log("hello world");
        }
    }
}, 3000);

在一个setTimeout()函数中又嵌套了另外一个setTimeout()函数，都是异步操作。如果改成使用Promise来实现，则代码如下：

var promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        // 获取一位随机数
        var random = Math.ceil(Math.random() * 10);
        if (random > 5) {
            // 当随机数大于5时，我们设定为异步操作成功了
            // 调用resolve()函数，并且传入一个参数
            resolve(random);
        } else {
            // 当随机数小于等于5时，我们设定为异步操作失败了
            // 调用reject()函数，并且传入一个对象参数
            reject({random: random, text: "hello world"});
        }
    }, 100)
});
promise.then(function (random) {
    // 当异步操作成功时执行的函数，即resolve()
    console.log("random = " + random);
}, function (obj) {
    // 当异步操作失败时执行的函数，即reject()
    for (var i = 0; i < obj.random; i++) {
        console.log(obj.text);
    }
});

文件读取

使用fs模块的readFile()方法读取文件内容，用回调函数方式实现如下：

var fs = require('fs');
// 文件读取操作readFile()函数是一个异步操作
fs.readFile('./text.txt', function (err, data) {
    if (err) {
        // 如果文件读取发生错误，则打印错误对象
        console.log(err);
    } else {
        // 如果文件读取成功，则打印文件内容
        console.log(data.toString())
    }
});

使用Promise进行改写，代码如下：

var fs = require('fs');
// 文件读取操作readFile()函数是一个异步操作
var promise = new Promise(function (resolve, reject) {
    fs.readFile('./text.txt', function (err, data) {
        if (err) {
            // 如果文件读取失败，则调用reject函数
            reject(err);
        } else {
            // 如果文件读取成功，则调用resolve函数
            resolve(data.toString());
        }
    });
});
promise.then(function (content) {
    // 当异步操作成功调用的函数，即resolve
    console.log(content.toUpperCase());
}, function (err) {
    // 当异步操作失败调用的函数，即reject
    console.log(err)
});

原生Ajax

使用原生Ajax来发送一个GET请求，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    // 2.初始化
    xhr.open('GET', 'http://poetry.apiopen.top/sentences ');
    // 3.发送
    xhr.send();
    // 4.处理响应结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            // 判断响应状态码 2xx
            if (xhr.status >= 200 && xhr.status < 300) {
                // 控制台输出响应体
                console.log(xhr.response)
            } else {
                console.log(xhr.status)
            }
        }
    };
</script>
</body>
</html>

使用Promise改写后，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        // 1.创建对象
        var xhr = new XMLHttpRequest();
        // 2.初始化
        xhr.open('GET', 'http://poetry.apiopen.top/sentences ');
        // 3.发送
        xhr.send();
        // 4.处理响应结果
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                // 判断响应状态码 2xx
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 当响应成功则调用resolve函数
                    resolve(xhr.response);
                } else {
                    // 当响应失败则调用reject函数
                    reject(xhr.status)
                }
            }
        };
    });
    promise.then(function (response) {
        // 当异步操作成功后调用的方法，即resolve
        console.log(response);
    }, function (reason) {
        // 当异步操作失败后调用的方法，即reject
        console.log(reason);
    });
</script>
</body>
</html>

Promise封装fs模块读取操作

使用Promise封装fs模块读取文件的操作，代码如下：

/**
 * 封装一个函数来读取文件内容
 * @param path 文件内容
 * @returns {Promise<any>} Promise对象
 */
function readFile(path) {
    return new Promise(function (resolve, reject) {
        var fs = require('fs');
        fs.readFile(path, function (err, data) {
            if (!err) {
                resolve(data.toString());
            } else {
                reject(err);
            }
        });
    });
}

// 调用函数
readFile('./text.txt')
    .then(function (data) {
        console.log(data);
    }, function (err) {
        console.log(err);
    });

Promise封装Ajax操作

使用Promise封装Ajax的GET请求，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    /**
     * 封装一个Ajax操作
     * @param method 请求方式GET或POST
     * @param url 请求路径
     * @returns {Promise<any>} Promise对象
     */
    function ajax(method, url) {
        return new Promise(function (resolve, reject) {
            // 1.创建对象
            var xhr = new XMLHttpRequest();
            // 2.初始化
            xhr.open(method, url);
            // 3.发送
            xhr.send();
            // 4.处理响应结果
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 判断响应状态码 2xx
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 当响应成功则调用resolve函数
                        resolve(xhr.response);
                    } else {
                        // 当响应失败则调用reject函数
                        reject(xhr.status)
                    }
                }
            };
        })
    }

    // 发送Ajax请求
    ajax('GET', 'http://poetry.apiopen.top/sentences')
        .then(function (response) {
            // 当异步操作成功后调用的方法，即resolve
            console.log(response);
        }, function (reason) {
            // 当异步操作失败后调用的方法，即reject
            console.log(reason);
        });
</script>
</body>
</html>

Promise的状态

Promise只会发生两种改变：

pending状态变成resolved状态
pending状态变成rejected状态

只有这两种，且一个Promise对象只能改变一次，无论变成成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason。注意：value和reason只是形参的名字，可自定义。

promise实例对象中的一个属性state表示Promise的状态，它有三个值：

pending：表示未决定成功还是失败的状态。
resolved（或fullfilled）：表示成功的状态。
rejected：表示失败的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // pending状态
    var promise1 = new Promise(function (resolve, reject) {
        // 既不调用resolve又不调用reject则是pending状态
    });
    console.log(promise1);
    // resolved（fullfilled）状态
    var promise2 = new Promise(function (resolve, reject) {
        // 调用resolve变成resoled状态
        resolve('Success');
    });
    console.log(promise2);
    // rejected状态
    var promise3 = new Promise(function (resolve, reject) {
        // 调用reject变成rejected状态
        reject('Error');
    });
    console.log(promise3);
</script>
</body>
</html>

在这里插入图片描述

Promise的基本流程

在这里插入图片描述

如何使用Promise？

Promise的API

1、Promise构造函数：`Promise(excutor){}`

executor是一个函数，表示执行器。即function(resolve, reject) {}。
resolve是一个回调函数，当在Promise中成功时则调用该函数。
reject也是一个回调函数，当在Promise中失败时调用该函数。

注：executor会在Promise内部立即同步调用，异步操作在执行器中执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    /*
        new Promise(excutor); 构造函数，返回一个Promise对象
     */
    var promise = new Promise(function (resolve, reject) {
        // 当成功时调用resolve函数
        // 当失败时调用reject函数
    });
</script>
</body>
</html>

2、Promise.prototype.then方法：`promise.then(onResolved, onRejected)`

onResolved函数，即成功时的回调函数。即function(value){}。
onRejected函数，即失败时的回调函数。即function(reason){}。

注：指定用于得到成功value的成功回调和用于得到失败reason的失败回调，返回一个新的Promise对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        // 当成功时调用resolve函数
        // 当失败时调用reject函数
    });
    // 返回一个新的Promise对象
    var newPromise = promise.then(function (value) {
        // 成功的回调函数，即resolve
    }, function (reason) {
        // 失败的回调函数，即reject
    });
</script>
</body>
</html>

4、Promise.prototype.catch方法：`promise.catch(onRejected)`

onRejected函数：失败的回调函数，即function(reason){}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise1 = new Promise(function (resolve, reject) {
        // 修改promise对象的状态
        reject('Error');
    });
    promise1.catch(function (reason) {
        // catch只有在失败状态时才会调用
        console.log(reason);
    });

    var promise2 = new Promise(function (resolve, reject) {
        // 修改promise对象的状态。当修改为成功的状态则不会调用catch的回调函数
        resolve('Success');
    });
    promise2.catch(function (reason) {
        // 因为Promise对象是成功状态，该catch内的回调函数不会被调用
        console.log(reason);
    })
</script>
</body>
</html>

4、Promise.resolve方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 如果传入的参数是非Promise类型的对象，则返回的结果为成功的Promise对象
    var promise1 = Promise.resolve(123);
    console.log(promise1);
    // 如果传入的参数是一个Promise对象，则参数的结果决定了resolve的结果
    var promise2 = Promise.resolve(new Promise(function (resolve, reject) {
        resolve('Success');// 成功的结果
    }));
    console.log(promise2);
    var promise3 = Promise.resolve(new Promise(function (resolve, reject) {
        reject('Fail');// 失败的结果
    }));
    console.log(promise3);
</script>
</body>
</html>

在这里插入图片描述

5、Promise.reject方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 如果传入的参数是非Promise类型的对象，则返回的结果为失败的Promise对象
    var promise1 = Promise.reject(123);
    console.log(promise1);
    // 如果传入的参数是一个Promise对象，则无论参数的结果是成功还是失败都永远返回一个失败的Promise对象
    var promise2 = Promise.reject(new Promise(function (resolve, reject) {
        resolve('Success');// 成功的结果
    }));
    console.log(promise2);
    var promise3 = Promise.reject(new Promise(function (resolve, reject) {
        reject('Fail');// 失败的结果
    }));
    console.log(promise3);
</script>
</body>
</html>

在这里插入图片描述

6、Promise.all方法

该方法传入的参数是一个包含n个Promise对象的数组；该方法返回一个新的Promise对象，只有所有的Promise都成功才表示成功，只要有一个失败了就直接失败。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var p1 = new Promise(function (resolve, reject) {
        resolve('OK');
    });
    console.log(p1);
    var p2 = Promise.resolve('123');
    console.log(p2);
    var p3 = Promise.resolve(new Promise(function (resolve, reject) {
        resolve('Success');
    }));
    console.log(p3);
    // 只有p1、p2和p3都返回成功的结果时才成功
    var result1 = Promise.all([p1, p2, p3]);
    console.log(result1);

    var p4 = Promise.reject('Error');
    console.log(p4);
    var result2 = Promise.all([p1, p3, p4]);
    console.log(result2);
</script>
</body>
</html>

在这里插入图片描述

7、Promise.race方法

该方法传入的参数是包含n个promise对象的数组；该方法的返回值是一个新的Promise对象，第一个完成的promise的结果状态就是最终的结果状态。但并不是数组中的第一个的结果状态，如果第一个promise中有延时操作，那么后面第一个完成的就是最终的结果状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var p1 = Promise.resolve('OK');
    var p2 = Promise.reject('ERROR');
    var p3 = Promise.resolve('SUCCESS');
    var promise1 = Promise.race([p1, p2, p3]);
    console.log(promise1);
    var promise2 = Promise.race([p2, p3]);
    console.log(promise2);
</script>
</body>
</html>

在这里插入图片描述

Promise的关键问题

如何改变pormise的状态

有三种方式可以改变promise的状态：

resolve(value)：如果当前是pending状态，则会变成resolved状态。
reject(reason)：如果当前是pending状态，则变成rejected状态。
throw 异常：使用throws关键字抛出异常，如果当前是pending状态则会变成rejected状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var p1 = new Promise(function (resolve, reject) {
        // 1.使用resolve函数
        resolve('OK');
    });
    console.log(p1);

    var p2 = new Promise(function (resolve, reject) {
        // 2.使用reject函数
        reject('ERROR');
    });
    console.log(p2);

    var p3 = new Promise(function (resolve, reject) {
        // 3.抛出异常
        throw '出错了';
    });
    console.log(p3);
</script>
</body>
</html>

在这里插入图片描述

一个promise指定多个成功/失败回调函数都会调用吗

当promise改变为对应状态时都会调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        resolve('OK');
    });
    promise.then(function (value) {
        console.log(value);
    });
    promise.then(function (value) {
        alert(value);
    });
</script>
</body>
</html>

改变promise状态和指定回调函数谁先谁后

都有可能，正常情况下是先指定回调再改变状态，但也可以改变状态再指定回调。

如何先改变状态再指定回调：在执行器中直接调用resolve()或reject()；或者使用setTimeout()延迟更长时间才调用then()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 同步任务，会先改变状态再执行回调
    var promise1 = new Promise(function (resolve, reject) {
        resolve('OK');
    });
    promise1.then(function (value) {
        console.log(value);
    }, function (reason) {
        console.log(reason);
    });

    // 异步任务，会先执行回调再改变状态
    var promise2 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('OK');
        }, 1000);
    });
    promise2.then(function (value) {
        console.log(value);
    }, function (reason) {
        console.log(reason);
    });
</script>
</body>
</html>

注：如果先指定的回调，那当状态发生改变时，回调函数就会调用然后得到数据；如果先改变状态，那当指定回调时，回调函数就会调用然后得到数据。

`promise.then()`返回的新promise的结果状态由什么决定

由then()指定的回调函数执行的结果决定返回的新promise的结果状态。

如果抛出异常，则新promise变成rejected，reason则为抛出的异常。
如果返回的是非promise对象的任意值，则新promise变成resolved，value为返回的值。
如果返回的是一个新的promise对象，则此promise结果就会变成新promise的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        resolve('OK');
    });
    var result = promise.then(function (value) {
        console.log(value);
        // 1.抛出异常
        // throw '出错啦！';
        // 2.返回结果是非promise对象的任意值
        // return '123';
        // 3.返回结果是promise对象
        return new Promise(function (resolve, reject) {
            // resolve('ok');
            reject('error');
        })
    }, function (reason) {
        console.log(reason);
    });
    console.log(result);
</script>
</body>
</html>

promise如何串联多个操作任务

promise的then()返回一个新的promise对象，可以连接成then()的链式调用。通过then的链式调用来串连多个同步或异步任务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('OK');
        }, 1000);
    });
    promise.then(function (value) {
        console.log(value);// OK
        return new Promise(function (resolve, reject) {
            resolve('success');
        });
    }).then(function (value) {
        console.log(value);// success
    }).then(function (value) {
        console.log(value);// undefined
    });
</script>
</body>
</html>

promise的异常穿透

当使用promise的then链式调用时，可以在最后指定失败的回调，前面任何操作出现了异常，都会传到最后失败的回调中处理，而不需要有一个回调就处理一次异常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            reject('ERROR');
        }, 1000);
    });
    promise.then(function (value) {
        console.log(111);
    }).then(function (value) {
        console.log(222);
        throw '失败啦！';
    }).then(function (value) {
        console.log(333);
    }).catch(function (reason) {
        console.log(reason);
    });
</script>
</body>
</html>

中断promise链式调用

所谓中断链式调用，即当使用promise的then链式调用时，在中间中断，就不再调用后面的回调函数。如果想要中断链式调用只需要在回调函数中返回一个pendding状态的promise对象，即return new Promise(() => {});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('OK');
        }, 1000);
    });
    promise.then(function (value) {
        console.log(111);
    }).then(function (value) {
        console.log(222);
        // 中断链式调用，有且只有这个方法
        return new Promise(() => {});
    }).then(function (value) {
        console.log(333);
    }).catch(function (reason) {
        console.log(reason);
    });
</script>
</body>
</html>

手写Promise

注：手写Promise属于JavaScript高级应用，不是现阶段可以掌握的，所以下面只是提供了每一步的代码，并没有笔记。如果仅是初步学习Promise的使用，不用太过于在意如何手写实现。对于每一步代码的实现可以去看视频，讲解得很清晰。Promise自定义封装

初始结构搭建

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 1 - 初始结构搭建</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            resolve('OK');
        });

        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        })
    </script>
</body>
</html>

promise.js

function Promise(executor){

}

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

}

resolve与reject结构搭建

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 2 - resolve 与 reject </title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            resolve('OK');
        });

        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        })
    </script>
</body>
</html>

promise.js

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

    }
    //reject 函数
    function reject(data){

    }

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

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

}

resolve与reject函数实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 2 - resolve 与 reject </title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            // resolve('OK');
            reject("error");
        });

        console.log(p);

        // p.then(value => {
        //     console.log(value);
        // }, reason=>{
        //     console.warn(reason);
        // })
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }

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

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

}

throw抛出错误改变状态

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 4 - throw 抛出异常改变状态 </title>
    <!-- <script src="./promise.js"></script> -->
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            // resolve('OK');
            // reject("error");
            //抛出异常
            throw "error";
        });

        console.log(p);

        // p.then(value => {
        //     console.log(value);
        // }, reason=>{
        //     console.warn(reason);
        // })
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

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

}

状态只能修改一次

在Promise中再执行resolve或者reject改变状态不会成功，让其状态只能改变一次。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 5 - 状态只能修改一次 </title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            reject("error");
            resolve('OK');
            //抛出异常
            // throw "error";
        });

        console.log(p);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

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

}

then方法执行回调

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 6 - then 方法执行回调 </title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            // resolve('OK');
            // reject("Error");
            throw "ERROR";
        });a

        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        })
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

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

异步任务then方法执行回调

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 7 - 异步任务 then 方法实现 </title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('OK');
                reject("error");
            }, 1000);
        });

        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        });

        console.log(p);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callback = {};
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行回调
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    //调用回调函数  PromiseState
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
    //判断 pending 状态
    if(this.PromiseState === 'pending'){
        //保存回调函数
        this.callback = {
            onResolved: onResolved,
            onRejected: onRejected
        }
    }
}

指定多个回调

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 8 - 指定多个回调 </title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('OK');
                reject('No');
            }, 1000);
        });

        p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        });

        p.then(value => {
            alert(value);
        }, reason=>{
            alert(reason);
        });

        console.log(p);


    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    //调用回调函数  PromiseState
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
    //判断 pending 状态
    if(this.PromiseState === 'pending'){
        //保存回调函数
        this.callbacks.push({
            onResolved: onResolved,
            onRejected: onRejected
        });
    }
}

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 9 - 同步任务 then 返回结果</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            resolve('OK');
        });
        //执行 then 方法
        const res = p.then(value => {
            //抛出异常
            throw "FAIL";
        }, reason=>{
            console.warn(reason);
        });
        console.log(res);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    return new Promise((resolve, reject) => {
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            try{
                //获取回调函数的执行结果
                let result = onResolved(this.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        if(this.PromiseState === 'rejected'){
            onRejected(this.PromiseResult);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: onResolved,
                onRejected: onRejected
            });
        }
    })
}

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 10 - 异步任务 then 返回结果</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('OK');
                reject("Error");
            }, 1000)
        });

        //执行 then 方法
        const res = p.then(value => {
            // return 'oh Yeah';
            throw 'error';
        }, reason=>{
            // console.warn(reason);
            throw 'error';
        });

        console.log(res);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    return new Promise((resolve, reject) => {
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            try{
                //获取回调函数的执行结果
                let result = onResolved(this.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        if(this.PromiseState === 'rejected'){
            onRejected(this.PromiseResult);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    try{
                        //执行成功回调函数
                        let result = onResolved(self.PromiseResult);
                        //判断
                        if(result instanceof Promise){
                            result.then(v => {
                                resolve(v);
                            }, r=>{
                                reject(r);
                            })
                        }else{
                            resolve(result);
                        }
                    }catch(e){
                        reject(e);
                    }
                },
                onRejected: function(){
                    try{
                        //执行成功回调函数
                        let result = onRejected(self.PromiseResult);
                        //判断
                        if(result instanceof Promise){
                            result.then(v => {
                                resolve(v);
                            }, r=>{
                                reject(r);
                            })
                        }else{
                            resolve(result);
                        }
                    }catch(e){
                        reject(e);
                    }
                }
            });
        }
    })
}

then方法代码优化

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 10 - 异步任务 then 返回结果</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('ok');
                // reject('Error');
            }, 100);
        });

        //执行 then 方法
        const res = p.then(value => {
            console.log(value);
        }, reason=>{
            console.warn(reason);
        });

        console.log(res);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejected'){
            callback(onRejected);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

catch方法与异常穿透

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 11 - catch 方法与异常穿透</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //实例化对象
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('OK');
                resolve('OK');
            }, 1000);
        });

        //值传递
        p.then()
        .then(value=>{
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.warn(reason);
        });


    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        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;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejected'){
            callback(onRejected);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

实现Promise.resolve方法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 12 - Promise.resolve 封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        const p = Promise.resolve('OK');
        const p2 = Promise.resolve(new Promise((resolve, reject) => {
            // resolve('Success');
            reject("error");
        }));
        const p3 = Promise.resolve(Promise.resolve('Oh Yeah'));

        console.log(p3);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        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;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejected'){
            callback(onRejected);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function(value){
    //返回promise对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            }, r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    });
}

实现Promise.reject方法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 13 - Promise.reject 封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        //Promise.reject
        const p = Promise.reject('Error');
        const p2 = Promise.reject(new Promise((resolve, reject) => {
            resolve('OK');
        }));

        console.log(p);
        console.log(p2);

    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        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;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejected'){
            callback(onRejected);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function(value){
    //返回promise对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            }, r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    });
}

//添加 reject 方法
Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    });
}

实现Promise.all方法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 14 - Promise.all 封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000)
        })
        let p2 = Promise.reject('Success');
        let p3 = Promise.resolve('Oh Yeah');

        //调用 all 方法
        let result = Promise.all([p1, p2, p3]);

        console.log(result);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        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;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejected'){
            callback(onRejected);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function(value){
    //返回promise对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            }, r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    });
}

//添加 reject 方法
Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    });
}

//添加 all 方法
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 => {
                //得知对象的状态是成功
                //每个promise对象 都成功
                count++;
                //将当前promise对象成功的结果 存入到数组中
                arr[i] = v;
                //判断
                if(count === promises.length){
                    //修改状态
                    resolve(arr);
                }
            }, r => {
                reject(r);
            });
        }
    });
}

实现Promise.race方法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 15 - Promise.race 封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            });
        });
        let p2 = Promise.reject('Success');
        let p3 = Promise.resolve('Oh Yeah');

        //调用 race 方法
        let result = Promise.race([p1, p2, p3]);

        console.log(result);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        self.callbacks.forEach(item => {
            item.onResolved(data);
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        self.callbacks.forEach(item => {
            item.onRejected(data);
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        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;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            callback(onResolved);
        }
        if(this.PromiseState === 'rejected'){
            callback(onRejected);
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function(value){
    //返回promise对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            }, r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    });
}

//添加 reject 方法
Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    });
}

//添加 all 方法
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 => {
                //得知对象的状态是成功
                //每个promise对象 都成功
                count++;
                //将当前promise对象成功的结果 存入到数组中
                arr[i] = v;
                //判断
                if(count === promises.length){
                    //修改状态
                    resolve(arr);
                }
            }, r => {
                reject(r);
            });
        }
    });
}

//添加 race 方法
Promise.race = function(promises){
    return new Promise((resolve, reject) => {
        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                //修改返回对象的状态为 『成功』
                resolve(v);
            },r=>{
                //修改返回对象的状态为 『失败』
                reject(r);
            })
        }
    });
}

then回调函数异步执行的实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 16 - 回调函数『异步执行』</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            reject('OK');
            console.log(111);
        });

        p1.then(value => {
            console.log(222);
        }, reason => {
            console.log(444);
        });

        console.log(333);
    </script>
</body>
</html>

promise.js

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            });
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(data);
            });
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        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;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            setTimeout(() => {
                callback(onResolved);
            });
        }
        if(this.PromiseState === 'rejected'){
            setTimeout(() => {
                callback(onRejected);
            });
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function(value){
    //返回promise对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            }, r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    });
}

//添加 reject 方法
Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    });
}

//添加 all 方法
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 => {
                //得知对象的状态是成功
                //每个promise对象 都成功
                count++;
                //将当前promise对象成功的结果 存入到数组中
                arr[i] = v;
                //判断
                if(count === promises.length){
                    //修改状态
                    resolve(arr);
                }
            }, r => {
                reject(r);
            });
        }
    });
}

//添加 race 方法
Promise.race = function(promises){
    return new Promise((resolve, reject) => {
        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                //修改返回对象的状态为 『成功』
                resolve(v);
            },r=>{
                //修改返回对象的状态为 『失败』
                reject(r);
            })
        }
    });
}

class版本封装

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-封装 | 17 - class版本封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        // let p1 = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         // resolve("OK");
        //         reject("Eror");
        //     })
        // });

        // p1.then(value => {
        //     console.log(value);
        // }, reason => {
        //     console.warn(reason);
        // });

        console.log(Promise.resolve('OK'));
    </script>
</body>
</html>

promise.js

class Promise{
    //构造方法
    constructor(executor){
        //添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        //声明属性
        this.callbacks = [];
        //保存实例对象的 this 的值
        const self = this;// self _this that
        //resolve 函数
        function resolve(data){
            //判断状态
            if(self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'fulfilled';// resolved
            //2. 设置对象结果值 (promiseResult)
            self.PromiseResult = data;
            //调用成功的回调函数
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data);
                });
            });
        }
        //reject 函数
        function reject(data){
            //判断状态
            if(self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'rejected';// 
            //2. 设置对象结果值 (promiseResult)
            self.PromiseResult = data;
            //执行失败的回调
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected(data);
                });
            });
        }
        try{
            //同步调用『执行器函数』
            executor(resolve, reject);
        }catch(e){
            //修改 promise 对象状态为『失败』
            reject(e);
        }
    }

    //then 方法封装
    then(onResolved,onRejected){
        const self = this;
        //判断回调函数参数
        if(typeof onRejected !== 'function'){
            onRejected = reason => {
                throw reason;
            }
        }
        if(typeof onResolved !== 'function'){
            onResolved = value => value;
            //value => { return value};
        }
        return new Promise((resolve, reject) => {
            //封装函数
            function callback(type){
                try{
                    //获取回调函数的执行结果
                    let result = type(self.PromiseResult);
                    //判断
                    if(result instanceof Promise){
                        //如果是 Promise 类型的对象
                        result.then(v => {
                            resolve(v);
                        }, r=>{
                            reject(r);
                        })
                    }else{
                        //结果的对象状态为『成功』
                        resolve(result);
                    }
                }catch(e){
                    reject(e);
                }
            }
            //调用回调函数  PromiseState
            if(this.PromiseState === 'fulfilled'){
                setTimeout(() => {
                    callback(onResolved);
                });
            }
            if(this.PromiseState === 'rejected'){
                setTimeout(() => {
                    callback(onRejected);
                });
            }
            //判断 pending 状态
            if(this.PromiseState === 'pending'){
                //保存回调函数
                this.callbacks.push({
                    onResolved: function(){
                        callback(onResolved);
                    },
                    onRejected: function(){
                        callback(onRejected);
                    }
                });
            }
        })
    }

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

    //添加 resolve 方法
    static resolve(value){
        //返回promise对象
        return new Promise((resolve, reject) => {
            if(value instanceof Promise){
                value.then(v=>{
                    resolve(v);
                }, r=>{
                    reject(r);
                })
            }else{
                //状态设置为成功
                resolve(value);
            }
        });
    }

    //添加 reject 方法
    static reject(reason){
        return new Promise((resolve, reject)=>{
            reject(reason);
        });
    }

    //添加 all 方法
    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 => {
                    //得知对象的状态是成功
                    //每个promise对象 都成功
                    count++;
                    //将当前promise对象成功的结果 存入到数组中
                    arr[i] = v;
                    //判断
                    if(count === promises.length){
                        //修改状态
                        resolve(arr);
                    }
                }, r => {
                    reject(r);
                });
            }
        });
    }

    //添加 race 方法
    static race (promises){
        return new Promise((resolve, reject) => {
            for(let i=0;i<promises.length;i++){
                promises[i].then(v => {
                    //修改返回对象的状态为 『成功』
                    resolve(v);
                },r=>{
                    //修改返回对象的状态为 『失败』
                    reject(r);
                })
            }
        });
    }
}

async和await

aysnc函数

async是一个关键字，用在函数的前面，通常是这样的：async function(){}。使用async关键字后，效果如下：

函数的返回值将会变成Promise对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 普通的函数
    function hello() {

    }
    var h = hello();
    console.log(h);

    // async修饰的函数
    async function world() {

    }
    var w = world();
    console.log(w);
</script>
</body>
</html>

在这里插入图片描述

而Promise对象的结果由async修饰的函数执行的返回值决定。如果返回值是一个非Promise类型的数据则返回的Promise是一个成功的对象；如果返回值是一个Promise对象，则返回值的结果由这个Promise对象的结果决定；如果抛出异常则返回值是一个失败的Promise对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 如果返回值是一个非Promise类型的数据
    async function hello1() {
        return "hello world";
    }
    var h1 = hello1();
    console.log(h1);

    // 如果返回值是一个Promise对象
    async function hello2() {
        return new Promise(function (resolve, reject) {
            resolve('OK');// 成功的
        })
    }
    var h2=hello2();
    console.log(h2);
    async function hello3() {
        return new Promise(function (resolve, reject) {
            reject('NO');// 失败的
        })
    }
    var h3=hello3();
    console.log(h3);

    // 如果是抛出异常
    async function hello4() {
        throw 'ERROR';
    }
    var h4=hello4();
    console.log(h4);
</script>
</body>
</html>

在这里插入图片描述

总结：async关键字的作用就是将一个函数的返回值变成一个Promise对象。

await表达式

await也是一个关键字，通常用在一个 Promise对象的前面，主要用于对Promise对象成功状态的结果进行获取。其使用说明如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<script type="text/javascript">
    // 如果await右侧表达式是Promise对象（成功的状态）
    async function main1() {
        var promise = new Promise(function (resolve, reject) {
            resolve('OK');
        });
        var result = await promise;
        console.log(result);// OK
    }
    main1();

    // 如果await右侧表达式是非Promise对象
    async function main2() {
        var result = await '123';
        console.log(result);// 123
    }
    main2();

    // 如果await右侧表达式是Promise对象（失败的状态）
    async function main3() {
        var promise=new Promise(function (resolve, reject) {
            reject('NO');
        });
        try{
            var result=await promise;
        }catch (e) {
            console.log(e);
        }
    }
    main3();
</script>
</body>
</html>

注意：

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

案例：async与await结合读取文件

使用fs读取hello1.txt、hello2.txt、hello3.txt、hello4.txt四个文件中的内容，然后一起打印输出。
在这里插入图片描述

使用回调函数的方式

var fs = require('fs');

fs.readFile('./hello1.txt', function (err, data1) {
    if (err) throw err;
    fs.readFile('./hello2.txt', function (err, data2) {
        if (err) throw err;
        fs.readFile('./hello3.txt', function (err, data3) {
            if (err) throw err;
            fs.readFile('./hello4.txt', function (err, data4) {
                if (err) throw err;
                console.log(data1 + '\t' + data2 + '\t' + data3 + '\t' + data4);
            });
        });
    });
});

使用async与await的方式

var fs = require('fs');

function readFile(path) {
    return new Promise(function (resolve, reject) {
        fs.readFile(path, function (err, data) {
            if (err) {
                reject(err);
            }
            resolve(data);
        })
    })
}

async function main() {
    try {
        var data1 = await readFile('./hello1.txt');
        var data2 = await readFile('./hello2.txt');
        var data3 = await readFile('./hello3.txt');
        var data4 = await readFile('./hello4.txt');
        console.log(data1 + '\t' + data2 + '\t' + data3 + '\t' + data4);
    } catch (e) {
        console.log(e);
    }
}

main();

案例：async与await结合发送Ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async与await结合发送AJAX</title>
</head>
<body>
<button id="btn">点击获取段子</button>
<script>
    //axios
    function sendAJAX(url){
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'json';
            xhr.open("GET", url);
            xhr.send();
            //处理结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    //判断成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //成功的结果
                        resolve(xhr.response);
                    }else{
                        reject(xhr.status);
                    }
                }
            }
        });
    }

    //段子接口地址 https://api.apiopen.top/getJoke
    let btn = document.querySelector('#btn');

    btn.addEventListener('click',async function(){
        //获取段子信息
        let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
        console.log(duanzi);
    });
</script>
</body>
</html>

总结：将异步操作封装到一个函数中，并且将异步操作的结果设置到Promise对象中，最后在这个函数中返回Promise对象。然后使用async修饰一个函数，在该函数内部使用await关键字读取异步操作返回的Promise对象成功的结果。

二木成林

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Promise学习笔记

Promise可以解决异步编程中回调地狱的问题。Promise的理解和使用Promise是什么Promise是一门新的技术，ES6技术规范。Promise是JavaScript进行异步编程的新解决方案。旧方案是单纯使用回调函数。从语法上来说，Promise是一个构造函数。从功能上来说，promise对象用来封装一个异步操作并可以获取其成功和失败的结果值。JavaScript中常见的异步编程场景有：fs模块文件操作：require('fs').readFile('./test.txt'
复制链接

扫一扫