JavaScript Promise

JavaScript Promise

函数对象与实例对象

<script>
        /* 
        1.函数对象与实例对象
        函数对象：将函数作为对象使用时，简称为函数对象
        实例对象：new 函数产生的对象，简称为对象 */
        function Person(name,age){//构造函数
            this.name=name;
            this.age=age;
        }
        let p=new Person('张三',21);//p是实例
        console.log(p);
</script>

回调函数的分类

<script>
        /* 
        1. 同步回调：
        理解：立即执行，完全执行完了才结束，不会放入回调队列中
        例子：数据遍历相关的回调函数 / Promise的excutor函数
        2. 异步回调
        理解：不会立即执行，会放入回调队列中将来执行
        例子：定时器回调 / ajax回调 / Promise的成功|失败的回调 */
        // 同步回调
        const arr=[1,3,5,7,9];
        arr.forEach((item)=>{//同步的回调函数，不会放入队列
            console.log(item);
        })
        console.log('forEach之后');
        // 异步回调
        setTimeout(()=>{//异步的回调，放入队列
            console.log('定时器执行了');
        },1000);
        console.log('定时器执行之后');
</script>

错误与错误的捕获

<script>
        /* 
        目标：进一步理解JS中的错误（error）和错误处理
        mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
        1. 错误的类型
            Error：所有的错误的父类型
            ReferenceError：引用的变量不存在
            TypeError：数据类型不正确的错误
            RangeError：数据值不在其所允许的范围内
            SyntaxError：语法错误
        2. 错误处理
            捕获错误：try...catch
            抛出错误：throw error
        3. 错误对象
            message属性：错误相关信息
            stack属性：函数调用栈记录信息 */
        // ReferenceError：引用的变量不存在
        // console.log(a);
        
        //TypeError：数据类型不正确的错误
        /* let b={};
        b(); */
        /* let b=null;
        console.log(b.a); */

        // RangeError：数据值不在其所允许的范围内
        /* function demo(){
            demo();
        }
        demo(); */

        //SyntaxError：语法错误
        // const a="""";

        // 捕获一个错误
        /* try{
            console.log(a);//有可能出现错误的代码
        } catch(err){
            console.log(err);// 如果try中出现了错误，携带错误对象，来到catch中
        }
        console.log(1); */

        // 抛出一个错误
        function demo(){
            // 获取当前时间
            const time=Date.now();
            //若是奇数，逻辑正常执行，若是偶数，抛出异常
            if(time%2===1){
                console.log('奇数，可以执行',time);
            }else{
               /*  let error=new Error('偶数，不执行');
                console.log(error);
                throw error; */
                throw new Error('偶数，不执行');
            }
        }
        try{
            demo();
        } catch(err){
            debugger;
            console.log(err);
        }
        console.log('我可以继续执行，哈哈')
</script>

Error - JavaScript | MDN (mozilla.org)

初始Promise

理解

1. 抽象表达

   1. Promise是一门新的技术（ES6规范）

   2. Promise是JS中进行异步编程的新解决方案

      备注：旧方案是单纯使用回调函数

2. 具体表达

   1. 从语法上来说：Promise是一个构造函数
   2. 从功能上来说：promise对象用来封装一个异步操作并可以取其成功 / 失败的结果值

<script>
        /* let promise1=new Promise(function(resolve,reject){//执行器函数（excutor）同步的回调
            // 当我们new了一个Promise实例后，实例自身的状态是初始化状态（pending）
            // 执行器函数中，写异步代码
            setTimeout(function(){
                // resolve('foo');// 调用resolve，可以将Promise实例对象由 初始化对象（pending） 变为 成功状态（resolved）
                reject('失败了'); // 调用reject，可以将Promise实例对象由 初始化状态（pending） 变为 失败状态（rejected），同时指定失败的原因（reason）
            },3000);
        });
        promise1.then(
            value=>console.log(value),
            reason=>console.log(reason)
        );
        console.log(promise1); */

        // 使用Promise+xhr包装一个ajax请求
        function myAsyncfunction(url){
            return new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest();
                xhr.open('get',url);
                xhr.onload = () => resolve(JSON.parse(xhr.response));
                xhr.onerror = () => reject(xhr.statusText);
                xhr.send();
            });
        }
        let a=myAsyncfunction('https://api.apishop.net/common/joke/getJokesByRandom?apiKey=Q7X8ayL291c5ebc24c1d5e40abffa2377360e2c0229445f&pageSize=6');
        a.then(
            result=>console.log('onResolved',result),
            error=>console.log('onRejected',error)
        )

</script>

为什么要用Promise

<script>
    /* 
        优势：
        1. 指定回调函数的方式更加灵活：
            旧的：必须在启动异步任务前指定
            promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务
        2. 支持链式调用，可以解决回调地狱问题
            什么是回调地狱？回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件
            回调地狱的缺点？不便于阅读、不便于异常处理
            解决方案？promise链式调用
            终极解决方案？async/await */

    //1. 纯回调函数形式处理异步任务（伪代码，主要看逻辑）
    /* // 成功的回调函数
      function successCallback(result) {
        console.log("声音文件创建成功：" + result);
      }
      // 失败的回调函数
      function failureCallback(error) {
        console.log("声音文件创建失败：" + error);
      }
      // 使用纯回调函数形式
      createAudioFileAsync(audioSettings,successCallback,failureCallback); */

    // 2. 使用Promise处理异步任务（伪代码，主要看逻辑）
    /* const promise = createAudioFileAsync(audioSettings);
      setTimeout(()=>{
          promise.then(successCallback,failureCallback);
      },3000); */

    //演示回调地狱（伪代码，主要看逻辑）
    /* doSomething(function(result){
          doSomethindElse(result,function(newResult){
              doThirdThing(newResult,function(finalResult){
                  console.log('Got the final result: '+finalResult);
              },failureCallback3);
          },failureCallback2);
      },failureCallback1); */

    // 使用promise的链式调用解决回调地狱（伪代码，主要看结构）
    /* doSomething()
      .then(function(result){
          return doSomethingElse(result);
      })
      .then(function(newResult){
          return doThirdThing(newResult);
      })
      .then(function(finalResult){
          console.log('Got the final result: '+finalResult);
      })
      .catch(failureCallback); */

    // Promise配合async / await：回调地狱的终极解决方案（伪代码，主要看结构）
    /* async function request(){
          try{
              const result=await doSomething();
              const newResult=await doSomethingElse(result);
              const finalResult=await doThirdThing(newResult);
          } catch(error){
              failureCallback(error);
          }
      } */
</script>

Promise基本使用

<script>
        /* 
        1. 重要语法
            Promise（excutor）构造函数
            Promise.prototype.then方法
        2. 基本编码流程
            1. 创建promise对象（pending状态），指定执行器函数
            2. 在执行器函数中启动异步任务
            3. 根据结果做不同处理
                1. 如果成功了，调用resolve()，指定成功的value，变为resolved状态
                2. 如果失败了，调用了reject()，指定失败的reason，变为rejected状态
            4. 能promise指定成功或失败的回调函数来获取成功的value或失败的reason
        3. promise对象的状态
            1. 三个状态：
                pending：未确定的，起始时的状态
                resolved：解决/成功的，调用resolve()后的状态
                rejected：拒绝/失败的，调用reject()后的状态
            2. 2种状态改变
                pending ===> resolved
                pending ===> rejected
            3. 状态只能改变一次 */

        //创建promise对象（pending状态），指定执行器函数
        new Promise((resolve,reject)=>{
            //在执行器函数中启动异步任务
            setTimeout(()=>{
                const time=Date.now();
                //如果成功了，调用resolve()，指定成功的result，变为resolved状态
                if(time%2===1){
                    resolve('奇数，成功了',time);
                }
                //如果失败了，调用reject()，指定失败的reason，变为rejected状态
                else{
                    reject('偶数，失败了',time);
                }
            },2000);
        }).then(
            // 给promise指定成功或失败的回调函数来获取成功的result或失败的reason
            result=>{
                console.log(result);
            },
            error=>{
                console.log(error);
            }
        )

</script>

Promise封装ajax

<script>
        function sendAjax(url){
            return new Promise((resolve,reject)=>{//执行器函数，同步的问题
                //开启异步任务
                const xhr=new XMLHttpRequest();
                xhr.onreadystatechange=()=>{
                    if(xhr.readyState!==4)
                        return;
                    if(xhr.status>=200 && xhr.status<=299){
                        resolve(JSON.parse(xhr.response));
                    }
                    else{
                        reject(new Error('请求失败'));
                    }
                }
                xhr.open('get',url);
                xhr.send();
            })
        }
        sendAjax('https://api.apishop1.net/common/joke/getJokesByRandom?apiKey=登录后获取&pageSize=6')
        .then(
            result=>console.log(result),
            error=>console.log(error.message)
        )
</script>

Promise的API

<script>
        /* 
        1. Promise构造函数：Promise(excutor){}
            excutor函数：同步执行 (resolve,reject)=>{}
            resolve函数：内部定义成功时我们调用的函数 result=>{}
            reject函数：内部定义失败时我们调用的函数 error=>{}
            说明：excutor会在Promise内部立即同步回调，异步操作在执行器中执行
        2. Promise.prototype.then方法：(onResolved,onRejected)=>{}
            onResolved函数：成功的回调函数 (result)=>{}
            onRejected函数：失败的回调函数 (error)=>{}
            说明：指定用于得到成功result的成功回调和用于得到失败error的失败回调，返回一个新的promise对象
        3. Promise.ptorotype.catch方法：(onRejected)=>{}
            onRejected函数：失败的回调函数(error)=>{}
            说明：then()的语法糖，相当于：then(undefined,onRejected)
        4. Promise.resolve方法：(result)=>{}
            result：成功的数据或promise对象
            返回一个成功/失败的promise对象
        5. Promise.reject方法：(error)=>{}
            error：失败的原因
            说明：返回一个失败的promise对象
        6. Promise.all方法：(promises)=>{}
            promises：包含n个promise的数组
            说明：返回一个新的promise，只有所有的promise都成功，只要有一个失败了就直接失败
        7. Promise.race方法：(promises)=>{}
            promises：包含n个promise的数组
            说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态 */

        /* new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(1);
            },1000);
        }).then(
            result=>console.log(result),
            error=>console.log(error)
        ) */

        /* new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject(1);
            },1000);
        }).catch(error=>{
            console.log(error);
        }) */

        /* new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(1);
                reject(0);//不执行，说明两个方法只能执行一个
            },1000);
        })
        .then(result=>console.log(result))
        .catch(error=>console.log(error)); */

        /* let p1=new Promise((resolve,reject)=>{
            // setTimeout(()=>{
            //     reject(1);
            // },1000);
            reject(1);
        });
        console.log(p1);

        let p2=Promise.reject(2);
        console.log(p2);

        let p3=Promise.resolve(3);
        console.log(p3); */

        let p1=new Promise((resolve,reject)=>{
            reject(1);
        });
        let p2=Promise.resolve(2);
        let p3=Promise.resolve(3);

        let p4=Promise.all([p1,p2,p3]);
        // console.log(p4);
        p4.then(
            result=>console.log('成功了',result),
            error=>console.log('失败了',error)
        )

        let p5=Promise.race([p2,p1,p3]);
        p5.then(
            result=>console.log('成功了',result),
            error=>console.log('失败了',error)
        )
</script>

一个Promise实例指定多个成功与失败的回调

<script>
        /* 
        1. 如何改变promise的状态？
            1. resolve(result)：如果当前是pendding就会变为resolved
            2. reject(error)：如果当前是pendding就会变为rejected
            3. 抛出异常：如果当前是pendding就会变为rejected
        2. 一个promise指定多个成功/失败回调函数，都会调用吗？
            当promise改变为对应状态时都会调用 */

        let p=new Promise((resolve,reject)=>{
            throw new Error('失败了');
            /* setTimeout(()=>{
                // resolve(1);
                throw new Error('失败了');
            },1000); */
        });
        p.then(
            result=>console.log('成功1',result),
            error=>console.log('失败1',error)
        );
        p.then(
            result=>console.log('成功2',result),
            error=>console.log('失败2',error)
        );
        p.then(
            result=>console.log('成功3',result),
            error=>console.log('失败3',error)
        );
</script>

改变状态与指定回调先后顺序问题

<script>
        /* 
        3. 改变Promise状态和指定回调函数谁先谁后？
            1. 都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
            2. 如何先改状态再指定回调？
                1. 在执行器中直接调用resolve()/reject()
                2. 延迟更长时间才调用then()
            3. 什么时候才能得到数据？
                1. 如果先指定的问题，那当状态发生改变时，回调函数就会调用，得到数据
                2. 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据 */

        //正常写法：先指定了成功与失败的回调，后改变的状态
        let p=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(1);
            },1000);
        });
        p.then(
            result=>console.log(result),
            error=>console.log(error)
        )

        //先改变状态，后指定回调
        let p=new Promise((resolve,reject)=>{
            resolve(1);
        });
        p.then(
            result=>console.log(result),
            error=>console.log(error)
        )
</script>

then方法返回值问题

<script>
        /* 
        4. promise.then()返回的新promise的结果状态由什么决定？
            1. 简单表达：由then()指定的回调函数执行的结果决定
            2. 详细表达：
                1. 如果抛出异常，新promise变为rejected，error为抛出的异常
                2. 如果返回的是非promise的任意值，新promise变为resolved，result为返回的值
                3. 如果返回的是另一个新promise，此promise的结果就会成为新promise的结果 */
        
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(1);
                // reject(1);
            },1000);
        }).then(
            result=>{
                console.log('成功了1',result);
                // return '你成功了';
                throw new Error('出错了');
            },
            error=>{
                console.log('失败了1',error);
                // return '你失败了';
                return Promise.reject('你失败了');
            }
        ).then(
            result=>console.log('成功了2',result),
            error=>console.log('失败了2',error)
        )
</script>

then的链式调用

<script>
      /* 
        promise如何串联多个操作任务？
            1. promise的then()返回一个新的promise，可以开成then()的链式调用
            2. 通过then的链式调用串连多个同步/异步任务 */

      new Promise((resolve, reject) => {
        console.log("开启了第1个异步任务");
        setTimeout(() => {
          resolve("数据1");
        }, 1000);
      })
        .then((result) => {
          console.log("第1个异步任务成功了，值为：" + result);
          return result;
        })
        .then((result) => {
          console.log("开启了第2个同步任务");
          let a = "数据2";
          console.log("第2个同步任务成功了，值为：" + a);
          return a;
        })
        .then((result) => {
          console.log("开启了第3个异步任务，使用第2个任务的值：" + result);
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              let data = "数据3";
              resolve(data);
            }, 1000);
          });
        }).then(
            result=>{
                console.log('第3个异步任务成功了，值为：'+result);
            }
        )
</script>

Promise错误穿透与中断Promise链

<script>
        /* 
        6. promise错误穿透？
            1. 当使用promise的then链式调用时，可以在最后指定失败的回调
            2. 前面任何操作出了错误，都会传到最后失败的回调中处理
        7. 中断promise链？
            1. 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
            2. 办法：在回调函数中返回一个pendding状态的promise对象 */
        
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // reject(1);
                resolve(1);
            },1000);
        })
        .then(
            result=>console.log('成功了1',result),
            /* error=>{
                throw error;//如果编码人员没有在then方法里面指定失败的回调，相当于写了该行代码
            } */
        )
        .then(
            result=>console.log('成功了2',result)
        )
        .then(
            result=>{
                console.log('成功了3',result);
                throw new Error('我失败了');
            }
        )
        .then(
            result=>console.log('成功了4',result)
        )
        .catch(
            error=>{
                console.log('失败了',error);
                return new Promise(()=>{});//中断Promise链
            }
        )
        .then(
            result=>console.log('我是一个不太和谐的输出，值为：'+result)
        )
</script>