<script>

// 1) 创建 promise 对象(pending 状态), 指定执行器函数
  const p = new Promise((resolve, reject) => {
// 2) 在执行器函数中启动异步任务
     setTimeout(() => {
       const time = Date.now()
// 3) 根据结果做不同处理
// 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状 态
         if (time%2===1) {
         resolve('成功的值 '+ time)
          } else { // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
       reject('失败的值' + time) 
    }
}, 2000)
})

// 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then(
   value => { // 成功的回调函数 onResolved, 得到成功的 vlaue
   console.log('成功的 value: ', value)
},
reason => { // 失败的回调函数 onRejected, 得到失败的 reason
   console.log('失败的 reason: ', reason) } )

</script>

二：promise的几种封装

1：promise封装fs模块

/**
 * 封装一个函数 mineReadFile 读取文件内容
 * 参数:  path  文件路径
 * 返回:  promise 对象
 */
function mineReadFile(path){
    return new Promise((resolve, reject) => {
        //读取文件
        require('fs').readFile(path, (err, data) =>{
            //判断
            if(err) reject(err);
            //成功
            resolve(data);
        });
    });
}

mineReadFile('./resource/content.txt')
.then(value=>{
    //输出文件内容
    console.log(value.toString());
}, reason=>{
    console.log(reason);
});

2：promise封装定时器：

<script>
function doDelay(time) {
// 1. 创建 promise 对象
return new Promise((resolve, reject) => {
// 2. 启动异步任务
console.log('启动异步任务')
setTimeout(() => {
console.log('延迟任务开始执行...')
const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
if (time %2=== 1) { // 成功了
// 3. 1. 如果成功了, 调用 resolve()并传入成功的 value
resolve('成功的数据 ' + time) } else { // 失败了
// 3.2. 如果失败了, 调用 reject()并传入失败的 reason
reject('失败的数据 ' + time) }
}, time)
})
}

const promise = doDelay(2000)
promise.then(
value => {
console.log('成功的 value: ', value)
},
reason => {
console.log('失败的 reason: ', reason)
},
)
</script>

3：promise封装AJAX

    <script>
        /**
         * 封装一个函数 sendAJAX 发送 GET AJAX 请求
         * 参数   URL
         * 返回结果 Promise 对象
         */
        function sendAJAX(url){
            //创建promise
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                //初始化
                xhr.open("GET", url);
                //发送
                xhr.send();
                //处理响应结果
                // 判断响应状态码2xx
                // 控制台输出响应体
                // 控制台输出响应状态码
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断成功
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的结果
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }
    
        sendAJAX('https://api.apiopen.top/getJok')
        .then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        });
    </script>

三：promise的相关API

1. Promise 构造函数: Promise (excutor) {}

(1) executor 函数 : 执行器 (resolve, reject) => {}

new Promise((resolve, reject) => {
if (Date.now()%2===0) {
resolve(1)
} else {
reject(2)
}
}).then(value => {
console.log(value)
}).catch(reason => {

console.log(reason)
})

(2) resolve 函数 : 内部定义成功时我们调用的函数 value => {}

(3) reject 函数 : 内部定义失败时我们调用的函数 reason => {}

说明 : executor 会在 Promise 内部立即同步调用 , 异步操作在执行器中执行。

2. Promise.prototype.then 方法: (onResolved, onRejected) => {}

(1) onResolved 函数 : 成功的回调函数 (value) => {}

(2) onRejected 函数 : 失败的回调函数 (reason) => {}

new Promise((resolve, reject) => {
if (Date.now()%2===0) {
resolve(1)
} else {
reject(2)
}
}).then(value => {
console.log('onResolved1()', value)
}).catch(reason => {
console.log('onRejected1()', reason)
})

说明 : 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调

返回一个新的 promise 对象

3. Promise.prototype.catch 方法: (onRejected) => {}

(1) onRejected 函数 : 失败的回调函数 (reason) => {}

 <script>
        //
        let p = new Promise((resolve, reject) => {
            // ** 同步调用
            // console.log(111);
            //修改 promise 对象的状态
            reject('error');
        });

        // console.log(222);

        //执行 catch 方法，只关注错误
        p.catch(reason => {
            console.log(reason);
        });
    </script>

4. Promise.resolve 方法: (value) => {}

(1) value: 成功的数据或 promise 对象

  <script>
        //
        let p1 = Promise.resolve(521);
        //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
        //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
        let p2 = Promise.resolve(new Promise((resolve, reject) => {
            // resolve('OK');
            reject('Error');
        }));
        // console.log(p2);
        p2.catch(reason => {
            console.log(reason);
        })
    </script>

说明 : 返回一个成功 / 失败的 promise 对象

5. Promise.reject 方法: (reason) => {}

(1) reason: 失败的原因

 <script>
        // let p = Promise.reject(521);
        // let p2 = Promise.reject('iloveyou');
        let p3 = Promise.reject(new Promise((resolve, reject) => {
            resolve('OK');
        }));
        
        console.log(p3);
    </script>

说明 : 返回一个失败的 promise 对象

6. Promise.all 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

<script>
        let p1 = new Promise((resolve, reject) => {
            resolve('OK');
        })
        // let p2 = Promise.resolve('Success');
        let p2 = Promise.reject('Error');
        let p3 = Promise.resolve('Oh Yeah');
        
        //
        const result = Promise.all([p1, p2, p3]);

        console.log(result);
    </script>

说明 : 返回一个新的 promise, 只有所有的 promise 都成功才成功 , 只要有一个失败了就

直接失败

7. Promise.race 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

 <script>
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        })
        let p2 = Promise.resolve('Success');
        let p3 = Promise.resolve('Oh Yeah');

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

        console.log(result);
    </script>

说明 : 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

四：promise的关键问题

1如何修改对象的状态

1：resolve(value):如果当前是pending就会变成resolved

2：reject(reason)：如果当前是pending就会变成rejected

3：抛出异常：如果当前是pending就会变成rejected

 <script>
        let p = new Promise((resolve, reject) => {
            //1. resolve 函数
            // resolve('ok'); // pending   => fulfilled (resolved)
            //2. reject 函数
            // reject("error");// pending  =>  rejected 
            //3. 抛出错误
            // throw '出问题了';
        });

        console.log(p);
    </script>

2能否执行多个回调。

只要状态发生变化，就会执行回调

  <script>
        let p = new Promise((resolve, reject) => {
             resolve('OK');
        });

        ///指定回调 - 1
        p.then(value => {
            console.log(value);
        });

        //指定回调 - 2
        p.then(value => {
            alert(value);
        });
    </script>

3改变状态与指定回调的顺序问题

(1) 都有可能, 正常情况下是先指定回调再改变状态 , 但也可以先改状态再指定回调

(2) 如何先改状态再指定回调?

① 在执行器中直接调用 resolve()/reject()

② 延迟更长时间才调用 then()

(3) 什么时候才能得到数据?

① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

 <script>

        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

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

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

(1) 简单表达: 由 then() 指定的回调函数执行的结果决定

(2) 详细表达:

① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

<script>
        let p = new Promise((resolve, reject) => {
            resolve('ok');
        });
        //执行 then 方法
        let result = p.then(value => {
            // console.log(value);
            //1. 抛出错误
            // throw '出了问题';
            //2. 返回结果是非 Promise 类型的对象
            // return 521;
            //3. 返回结果是 Promise 对象
            // return new Promise((resolve, reject) => {
            //     // resolve('success');
            //     reject('error');
            // });
        }, reason => {
            console.warn(reason);
        });

        console.log(result);
    </script>

5. promise 如何串连多个操作任务?（链式调用）

(1) promise 的 then() 返回一个新的 promise, 可以开成 then() 的链式调用

(2) 通过 then 的链式调用串连多个同步 / 异步任务

 <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            return new Promise((resolve, reject) => {
                resolve("success");
            });
        }).then(value => {
            console.log(value);
        }).then(value => {
            console.log(value);
        })
    </script>

6.异常穿透

(1) 当使用 promise 的 then 链式调用时 , 可以在最后指定失败的回调 ,

(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

<script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
                // reject('Err');
            }, 1000);
        });

        p.then(value => {
            // console.log(111);
            throw '失败啦!';
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.warn(reason);
        });
    </script>

7，如何中断promise链

(1) 当使用 promise 的 then 链式调用时 , 在中间中断 , 不再调用后面的回调函数

(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

<script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            console.log(111);
            //有且只有一个方式
            return new Promise(() => {});
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.warn(reason);
        });
    </script>

五：async 和 await

一：async函数

1. 函数的返回值为 promise 对象

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

  <script>
        //then
        async function main(){
            //1. 如果返回值是一个非Promise类型的数据
             //return 521;
            //2. 如果返回的是一个Promise对象
            // return new Promise((resolve, reject) => {
            //     // resolve('OK');
            //     reject('Error');
            // });
            //3. 抛出异常
            throw "Oh NO";
        }

        let result = main();

        console.log(result);
    </script>

二：await

1. await 右侧的表达式一般为 promise 对象 , 但也可以是其它的值

2. 如果表达式是 promise 对象 , await 返回的是 promise 成功的值

3. 如果表达式是其它值, 直接将此值作为 await 的返回值

 <script>
        async function main(){
            let p = new Promise((resolve, reject) => {
                // resolve('OK');
                reject('Error');
            })
            //1. 右侧为promise的情况
            // let res = await p;
            //2. 右侧为其他类型的数据
            // let res2 = await 20;
            //3. 如果promise是失败的状态
            try{
                let res3 = await p;
            }catch(e){
                console.log(e);
            }
        }

        main();
    </script>

注意：

1. await 必须写在 async 函数中 , 但 async 函数中可以没有 await

2. 如果 await 的 promise 失败了 , 就会抛出异常 , 需要通过 try...catch 捕获处理

三：async与await结合

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

/**
 * resource  1.html  2.html 3.html 文件内容
 */

const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);

//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });

//async 与 await
async function main(){
    try{
        //读取第一个文件的内容
        let data1 = await mineReadFile('./resource/1x.html');
        let data2 = await mineReadFile('./resource/2.html');
        let data3 = await mineReadFile('./resource/3.html');
        console.log(data1 + data2 + data3);
    }catch(e){
        console.log(e.code);
    }
}

main();

这里需要再讲一下promisify方法以及fs模块和util模块。

promisify方法是用来进行promise风格转换的。

/**
 * util.promisify 方法
 */
//引入 util 模块
const util = require('util');
//引入 fs 模块
const fs = require('fs');
//返回一个新的函数
let mineReadFile = util.promisify(fs.readFile);

mineReadFile('./resource/content.txt').then(value=>{
    console.log(value.toString());
});

fs模块和util模块是node.js中的模块。

其中fs模块是提供本地文件的读写能力。

util模块主要用于支持 Node.js 内部 API 的需求。

六：结尾

其实还有自定义promise我没有分享，事实上我对此理解的不够透彻，希望能得到小伙伴们分享的心得。

以上是关于promise的主要内容，如果未能解决你的问题，请参考以下文章

前端面试题之手写promise

澄清 node.js + promises 片段

什么时候然后从Promise.all（）的子句运行？

Typescript编译器无法从Promise resolve调用中推断类型

前端片段整理

在javascript承诺中执行的顺序是什么