promise系列（一）

1.同步回调和异步回调

    <script>
        // 同步回调
        let arr = [1,2,3,4,5];
        //对数组的每一个元素 * 10 返回新数组  forEach filter some every
        let newArr = arr.map(item => {
            // console.log(0);
            return item * 10;
        });


        // 异步回调 promise 回调 $.get(url, data, callback)  fs模块 readFile  readdir 
        setTimeout(() => {
            console.log(0);
        }, 1000);

        console.log(1);


    </script>

2.错误类型

<script>
    /**
     *  1.    Error: 所有错误的父类型
        2.    ReferenceError: 引用的变量不存在
        3.    TypeError: 数据类型不正确的错误
        4.    RangeError: 数据值不在其所允许的范围内
        5.    SyntaxError: 语法错误
     */

    // ReferenceError  引用错误
    //  console.log(abc);

    // TypeError 类型错误
    // let obj = {};
    // obj();

    // RangeError 范围
    // let arr = new Array(-1);//长度
    // console.log(arr);

    // SyntaxError 语法错误
    // abcxxx(xxxxa'*9s);


</script>

3.try...catch 处理错误

   <script>
        /**
         * 语法固定 try...catch   try 尝试的意思  catch 捕获
         * 1. try catch捕获到错误之后, 后续代码可以继续执行
         * 2. catch 可以将错误信息捕获到. e 是一个对象, 有message和stack两个属性
         * 3. 抛出错误之后, 在后续的 try 里面的代码不会执行
         * 4. try 不能捕获语法错误. 其他三种类型错误可以捕获.
         * 5. 允许使用 throw 手动的抛出错误
         * 6. 抛出任意类型的数据
         */

        try {
            // console.log(a;//不能捕获到语法错误
            let a = 100;
            let b = 0;
            if(b === 0) {
                //手动抛出错误对象
                // throw new Error('除数不能为 0');
                throw "除数不能为 0 ";
            }
            let result = a / b;
            console.log("lalala");
        } catch (e) {
            console.log(e);
            console.log(e.message);
            console.log(e.stack);
            //处理错误的方式 
            //1. 写入日志文件
            //2. 错误提醒
        }

        console.log('ok');



    </script>

同步代码和异步代码处理错误

 <script>
        // 同步代码抛出错误  => 可以捕获
        // function fn() {
        //     console.log(a);
        // }

        // try {
        //     fn(); //非手动捕获
        // } catch (e) {
        //     console.log(e.message);
        // }


        // 异步代码抛出错误  => 不能这样捕获
        // function fn() {
        //     setTimeout(() => {
        //         console.log(a);
        //     }, 1000)
        // }
        // try {
        //     fn();
        // } catch (e) {
        //     console.log(e.message);
        // }
        // console.log('test');

        //异步代码捕获错误的方式
        // function fn() {
        //     setTimeout(() => {
        //         try {
        //             console.log(a);
        //         } catch (e) {
        //             console.log(e.message);
        //         }
        //     }, 1000)
        // }
        // fn();

    </script>

Promise基础使用

<script>
    // 2s后 随机生成一个数字  
    // 如果是偶数则成功(弹框数字,中奖啦), 
    // 如果是奇数失败(控制台输出数字)

    // setTimeout(() => {
    //     //获取时间戳
    //     let n = Date.now();
    //     //
    //     if(n % 2=== 0){
    //         //成功  值
    //         alert(n + '中奖啦! 中奖啦! 笔记本和台式机有戏啦!!');
    //     }else{
    //         //失败  值
    //         console.log(n, "下次再接再厉!!");
    //     }
    // }, 2000);

    //Promise 实现
    // let a = new Person("xiaohigh");
    //成功和失败的值, p 对象出了有状态属性(status), 还有一个值的属性(value)
    let p = new Promise(function(resolve, reject){
        //定时器
        setTimeout(() => {
            let n = Date.now();
            if(n % 2 === 0){
                //成功
                resolve(n);
            }else{
                //失败
                reject(n);
            }
        }, 2000)
    });

    // 形参的潜规则名称 value 与 reason
    p.then(function(value){
        alert("中奖啦!! oh year"+n);
    }, function(reason){
        console.log("再接再厉"+n);
    });


</script>

2

//读取一个文件内容  ./resource/1.html
const fs = require("fs");

// fs.readFile("./resource/1.html", (err, data) => {
//     if(err){
//         console.log(err);
//         return;
//     }
//     console.log(data.toString());
// });

//Promise 的方式
let p = new Promise((resolve, reject) => {
    fs.readFile("./resource/1-33.html", (err, data) => {
        //判断是否出现错误
        if(err) reject(err);
        resolve(data);
    });
});

//then 方法处理成功或失败的值
p.then((value) =>{
    console.log(value.toString());
}, (reason)=>{
    console.error(reason.code);
});

3

//读取 1.html 和 2.html 合并输出到控制台
const fs = require("fs");

//回调函数的形式处理，回调地狱，特点，外层的函数的结果是内层函数的条件
// 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);
//         })
//     });
// });

//Promise 形式
let p = new Promise((resolve, reject) => {
    //读取 1.html 文件内容
    fs.readFile("./resource/1.html", (err, data) => {
        if (err) reject(err);
        resolve(data);
    });
});

//第二个文件读取 value 为 1.html 的文件内容
//p2为返回的新的promise实例化对象
let p2 = p.then(value => {  //value为1.html的内容，//value是buffer类型数据
    //返回一个 新的Promise 对象
    return new Promise((resolve, reject) => {
        fs.readFile("./resource/2.html", (err, data) => {
            if(err) reject(err);
            resolve(value + data);
        });
    });
}, reason => {

});

//读取 3.html 的文件内容
let p3 = p2.then(value => {  //value 为p2中正确状态的值，1.html和2.html的数据
    //value是字符串类型数据,buffer类型相加是字符串类型
    return new Promise((resolve, reject)=>{
        fs.readFile("./resource/3.html", (err, data)=>{
            if(err) reject(err);
            resolve(value + data);
        });
    })
}, reason => {

});

p3.then(value => {  //value 为p3中正确状态的值，1.html和2.html和3.html的数据
    console.log(value); //value是字符串类型数据
},reason => {

})

4

//读取 1.html 和 2.html 3.html 合并输出到控制台
const fs = require("fs");

//Promise 形式
let p1 = new Promise((resolve, reject) => {
    //读取 1.html 文件内容
    fs.readFile("./resource/1.html", (err, data) => {
        if (err) reject(err);
        resolve(data.toString());
    });
});
let p2 = new Promise((resolve, reject)=>{
    //读取 2.html 文件内容
    fs.readFile("./resource/2.html", (err, data) => {
        if (err) reject(err);
        // console.log('dg')  //失败的promise,还是会向下执行代码
        resolve(data.toString());
    });
});
let p3 = new Promise((resolve, reject)=>{
    //读取 3.html 文件内容
    fs.readFile("./resource/3.html", (err, data) => {
        if (err) reject(err);
        resolve(data.toString());
    });
});

//只要有一个状态是失败的，p就是失败的promise
let p = Promise.all([p1, p2, p3]);

p.then(value => {
    // console.log(value)  //value此时是数组，是偏p1,p2,p3的值得累加

     // join()方法将一个数组（或一个类数组对象）的所有元素根据传入的参数连接成一个字符串，并返回这个字符串。
    // 参数：

    // 指定一个字符串来分割数组（类数组）的每个元素

    // 如果省略()，数组元素默认以逗号分隔。默认为","

    // 如果为("")，则表示所有元素之间不存在任何字符
    console.log(value.join(''));
},reason=>{
    console.log(reason)
});

5.promise封装ajax请求

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise封装AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <button id="btn">点击发送 AJAX 请求</button>
    <script>
        // $.get('/server', {}, function(){
        // })
        /*
            封装一个函数 promiseAJAX  只实现 GET 请求
            用来发送 AJAX 请求
            返回 Promise 对象
        */
            //method = "GET", 函数默认参数,promiseAJAX（）就是promise对象
        function promiseAJAX({ url,data={name:'maco'}, method = "GET" }) {  //对象解构
            // console.log(url)
            // console.log(method)
            // console.log(data)
              //返回promise实例对象
            return new Promise((resolve, reject) => {
                // 创建ajax实例对象
                let x = new XMLHttpRequest();
                //初始化
                x.open(method, url);
                //发送
                x.send();
                //绑定事件, 处理响应结果
                //只有ajax的状态改变了，才会触发该事件onreadystatechange 
                x.onreadystatechange = function () {// 1->2 2->3  3-> 4
                    //只有状态为 4 的时候, 才能对 Promise 对象状态进行设置
                    if (x.readyState === 4) {
                        //请求成功 2xx 都标识成功   3 重定向   4 客户端错误  5 服务端错误
                        if (x.status >= 200 && x.status < 300) {
                            //成功的话, 将promise对象的状态设置为成功, 并将响应体设置为 promise 对象成功的值
                            resolve(x.response);
                        } else {
                            //失败的话
                            reject(x.status);
                        }
                    }

                }
            });
        }

        btn.onclick = function () {
            //原生ajax-cors跨域,服务器的响应头设置了可跨域
            let url = 'https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P';
            promiseAJAX({
                url: url
            }).then(value => {
                // 将字符窜转换成对象
                let data=JSON.parse(value)
                console.log(data);
            });
        }


    </script>
</body>

</html>

6.异步API的promsie形态

/*
    封装一个函数 mineReadFile ， 读取文件并返回一个 promise 对象
 */
const fs = require("fs");

function mineReadFile(path) {
    //返回promise对象
    return new Promise((resolve, reject)=>{
        //使用 fs 模块读取文件内容
        fs.readFile(path, (err, data) => {
            //如果失败 则修改promise对象状态为失败
            if(err) reject(err);
            // 如果成功, 则修改promise对象状态为成功
            resolve(data);
        })
    });
}

mineReadFile('./resource/xxx.html').then(value => {
    console.log(value.toString());
}, reason => {
    console.log(reason.code);
});

7.promise的API

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise的API</title>
</head>

<body>

    <script>
        //  function Promise(executor){

        //  }
        /**
         * 1. Promise 的实例化接收一个 函数类型的参数( 执行器函数 )
         * 2. resolve和 reject 两个形参类型都是 函数.
         * 3. 执行器函数是一个同步的回调函数
         */
        // 1. 执行器函数式同步调用的,但是里头的异步任务是不同步的
        // let p =new Promise((resolve, reject) => {
        //     //同步调用
        //     console.log(111);
        //     //异步调用
        //     setTimeout(()=>{
        //         console.log(333);
        //         // reject("失败的数据");
        //     }, 1000);
        // });
        // console.log(222);
        // 执行顺序， 输出，111， 222， 333

        // 2. Promise.prototype.then
        //成功的回调 onResolved  on 当...时候  resolved 已解决
        //失败的回调 onRejected                rejected 拒绝了的 失败了
        // then方法返回的是一个promise对象，后面还可以加.
        // p.then(value=>{

        // }, reason=>{

        // }).then(value=>{

        // }).then(value=> {

        // });

        // 3. Promise.prototype.catch  实例对象上可以使用 catch 方法
        // p.catch(reason => {
        //     console.error(reason);
        // });

        // 4. Promise.resolve resolve 是一个方法, 返回是一个 Promise 对象

        // 4-1 参数如果为非 Promise 类型的数据, 则返回的 Promise 对象为成功的状态
         // let p10=Promise.resolve('hrllow')
        // console.log(p10)  //Promise { 'hrllow' }
        // p10.then((value)=>{ 
        //     console.log(value)   //hrllow
        // })


        // 4-2 参数如果是成功的 Promise, 则返回的 Promise 对象结果状态也为成功, 
        // 并且返回的成功的promise的值, 为传入参数的成功的值
        // let p1 = new Promise((resolve, reject)=>{
        //     resolve('成功的数据');
        // });
        // let p3 = Promise.resolve(p1); //Promise { '成功的数据' }
        // p3.then(value=>{
        //     console.log(value)  //成功的数据
        // })


        // 4-3 如果参数为失败的 Promise, 则返回的是失败的 Promise 对象
        // 返回的值，报错
        let p11 = new Promise((resolve, reject) => {
            reject("失败的数据111");
        });
        let p4 = Promise.resolve(p11);
        console.log(p4); //Promise { <rejected> '失败的数据111' }
        // p4.then(value=>{
        //     console.log(value)  // Uncaught (in promise) 失败的数据111
        // })

        p4.catch(reason=>{
            console.log(reason)  //失败的数据111
        })
        


        // 5-1. Promise.reject 参数为成功的promise对象，返回失败的 Promise 对象, 返回的值是一个失败原因的对象
        
        // let p0 = new Promise((resolve, reject)=>{
        //     resolve('成功的数据');
        // });
        // let p2 = Promise.reject(p0);
        // console.log(p2);  //Promise {<rejected>: Promise}
        // p2.catch( reason=>{
        //     console.log(reason) //Promise {<resolved>: "成功的数据"}
        // })


        // 5-2. Promise.reject 参数为失败的promise对象，返回失败的 Promise 对象, 返回的值是一个失败原因的对象
        // let p20 = new Promise((resolve, reject)=>{
        //     reject('成功的数据');
        // });
        // let p21 = Promise.reject(p20);
        // console.log(p21);  //Promise {<rejected>: Promise}
        // p21.catch( reason=>{
        //     console.log(reason) //Promise {<rejected>: "成功的数据"}
        // })

        //5-3,Promise.reject 参数为非promise数据，返回失败的 Promise 对象, 返回的值为失败的值
        // let p6=Promise.reject('ABN')
        // console.log(p6)  //Promise {<rejected>: "ABN"}
        // p6.catch(reason=>{
        //     console.log(reason)  //ABN
        // })
      

        // 6. Promise.all， 
        // let one = new Promise((resolve, reject) => {
        //     // reject('数据库用户的数据');
        //     // resolve('数据库用户的数据');

        
        // });
        // let two = Promise.resolve("订单数据");
        // let three = Promise.resolve("商品数据");

        // Promise.all函数的数组参数的promise如果都是成功的状态，那么p1也是成功的promise,而他的返回值是数组
        // 如果有一个参数是失败的promise，那么p1就是失败的promise,
        // let p1 = Promise.all([one, two, three]); 
        // console.log(p1)  //Promise {resolved}
        // p1.then(value=>{
        //     console.log(value) //[ '数据库用户的数据', '订单数据', '商品数据' ]
        // })


        // 7. Promise.race race 赛跑的意思,
        let one = new Promise((resolve, reject) => {
            reject('数据库用户的数据');
            //异步调用
            // setTimeout(() => {
            //     reject('数据库用户的数据');
            // }, 1000);
        });
        let two = Promise.reject("订单数据");
        // let two = Promise.resolve("订单数据");
        let three = Promise.resolve("商品数据");

        //Promise.race函数的数组里头的参数，p1的状态初始是pending默认状态，那个promise状态第一个先改变,p1的状态就会跟着改变
        // 返回的值就是那个引起变化的promise的值，偏
        let p1 = Promise.race([one, two, three]);

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

    </script>
</body>

</html>

8.如何改变promsie的状态

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关键问题</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            //1. resolve  //"pending"状态的promise
            // resolve('数据');  //resolved
            //2. reject
            // reject('错误');   //rejected"
            //3. 抛出错误，会改变promise的状态
            // throw new Error("出错啦!!");   //rejected"
            // throw "出错啦!!";   //"rejected"
            //4. 异步回调 异步回调中抛出错误 不能改变 promise 对象状态
            // 但是里头加入try,catch即可捕获到错误，就能改变promise的状态
            //异步任务
            // setTimeout(()=>{
            //     reject('失败')  //rejected
            // },1000)

            // setTimeout(()=>{
            //     throw '出错了'  // "pending，未改变状态
            // },1000)

            setTimeout(()=>{

                try{
                    throw '出错了' ;
                }catch(e){
                    reject(e)  //"rejected
                }

            },1000)
        })

        console.log(p);

    </script>
</body>

</html>

9、改变状态和与指定回调谁先谁后

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关键问题</title>
</head>

<body>
    <script>

    // 改变promise状态和指定回调函数谁先谁后?
    // 1.如果promise中有异步任务,那么先调用then()指定里头的回调，然后在改变promise状态,
    // 然后返回改变状态的值。这种居多，因为promise里头就是封装异步任务的。

    // 2.如果promise中有没有异步任务,那么先改变promise状态,然后调用then()指定里头的回调，
    // 然后返回改变状态的值

    //3.then()方法里头的回调函数也是异步任务
    


        let p = new Promise((resolve, reject) => {
            //异步任务
            // setTimeout(() => {
            //     console.log(111);
            //     resolve("OK");
            // }, 2000);
            //同步任务
            console.log(111);
            resolve("OK");
        });

        console.log(222);
        p.then(value => {
            console.log(value);
        })

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

</html>

10.then 方法返回结果特点

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关键问题</title>
</head>
<body>
<script>
    let p = new Promise((resolve, reject)=>{
        // resolve('成功')
        reject('失败');
    });

    //由then()指定的回调函数执行的结果决定 
    let result = p.then(value => {
        //1. 抛出错误 ，返回的就是reject状态的promise
        // throw "错误!!";  //"rejected"状态的promise

        //2. 返回非 Promise 类型的对象，如果没有return结果，也是resolved状态
        // return 123;  //"resolved状态的promise，

        //3. 返回 Promise 类型的对象
        return new Promise((resolve, reject)=>{
            // 成功的情况
            // resolve("OK");  //resolved状态的promise,值就是result的值
            // 失败的情况 
            reject('Error');  //rejected状态的promise
        });
    }, reason => {
        console.log(reason) //失败
        return 444  //resolved状态的promise,值就是444，没有return结果，也是resolved状态的promise
    });

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

11.then方法链式调用

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关键问题</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject)=>{
            // resolve('000');
            reject('出错')
        });

        let p2= p.then(value => {
            console.log(value);  //000
            return 111;   //返回状态为resolve,值为111的promise
        },reason => {
            console.error(reason);  //出错
            return 222;  ////返回状态为resolve,值为222的promise
        })
        .then(value => {
            console.log(value);  //111  /222
            return 333;  //返回状态为resolve,值为333的promise
        },reason=>{
            console.error(reason) 

        })
        .then(value => {
            console.log(value);  //333
            return 444;  //返回状态为resolve,值444的promise
        });

        console.log(p2)  //Promise {<resolve>},值为444
    </script>
</body>

</html>

12.异常穿透

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关键问题</title>
</head>

<body>
    <script>
        // 如果出现了状态为rejcet的promise,调用then方法，如果没有写明第二个回调函数，会忽略，
        // 直到遇到catch(),才会执行。异常穿透

        let p = new Promise((resolve, reject) => {
            resolve('000');
            // reject('失败ooo');
        });

        p.then(value => {
            console.log(value);
            throw "Error";
        }).then(value => {
            console.log(value);
            return 333;
        }).then(value => {
            console.log(value);
            return 444;
        }).then(value=> {
            console.log(value);
        }).catch(reason => {
            console.log(reason);
        });
    </script>
</body>

</html>

13.中断promise链

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关键问题</title>
</head>

<body>
    <script>

//     如何当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
//     办法: 在回调函数中返回一个pendding状态的promise对象

        let p = new Promise((resolve, reject) => {
            resolve('000');
            // reject('失败ooo');
        });

        p.then(value => {
            console.log(value);
            return 111;
        }).then(value => {
            console.log(value);
            return 222;
        }).then(value => {
            console.log(value);
            // 在回调函数中返回一个pendding状态的promise对象
            return new Promise((resolve, reject)=>{});
        }).then(value => {
            console.log(value);
        }).catch(reason => {
            console.log(reason);
        });
    </script>
</body>

</html>