【前端学习】—Promise基本知识（十六）

【前端学习】---Promise基本知识（十六）

一、class和function的区别

• 相同点：都可以用作构造函数
• 不同点：class不可以使用call apply bind的方式来改变它的执行上下文

二、Promise

定义：Promise是异步编程的一种解决方案，比传统的解决方案------回调函数和事件更合理和更强大。它是由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象

三、代码演示

<script>

        //3个状态  pending fulfilled rejected
      new Promise(function (resolve, reject) {
        let fullName = "cai";
        if (fullName === "cai") {
          resolve(1);
        } else {
          reject(2);
        }
      }).then(
        function (value) {
          console.log(`resolve-value`, value);//resolve-value 1
        },
        function (value) {
          console.log(`reject-value`, value);
        }
      );
    </script>

<script>
      //Promise.prototype.then
      //可以支持链式调用
      //then接收的两个函数都是参数
      //第一个函数是Promise  状态变成fulfilled时候回调函数
      //第二个函数也是Promise 状态变成rejected的时候调用
      //返回值也是Promise(新的)

      new Promise(function (resolve, reject) {
        let fullName = "lily";
        if (fullName === "lily") {
          resolve(1);
        } else {
          reject(2);
        }
      })
        .then((value) => {
          console.log(`fulfilled value`, value);
          return value + 1;
        })
        .then(
          (fulfilledValue) => {
            console.log(`fulfilled value`, fulfilledValue);
          },
          (rejectedValue) => {
            console.log(`rejectedValue`, rejectedValue);
          }
        );
    </script>

//Promise.prototype.catch()捕获promise错误
      new Promise(function (resolve, reject) {
        let name = "ll";
        if (name === "llu") {
          resolve(1);
        } else {
          reject("promise error");
        }
      })
        .then((value) => {
          console.log(value);
        })
        .catch((error) => {
          console.log(error); //promise error
        });

 //Promise.prototype.finally()用于指定不管promise对象最后状态如何 都会执行的操作


      new Promise(function (resolve, reject) {
        console.log(`loading start......`)
        let name = "ll";
        if (name === "llu") {
          resolve(1);
        } else {
          reject("promise error");
        }
      })
        .then((value) => {
          console.log(value);
        })
        .catch((error) => {
          console.log(error); //promise error
        }).finally(()=>{
            console.log(`loading end......`)
        });

 // Promise.all
    //用于将多个Promise实例包装成一个新的Promise实例
      const promiseArray=[1,2,3,4,5].map((item)=>{
        return new Promise((resolve)=>{
            resolve(item);
        })
      })

      Promise.all(promiseArray).then(res=>{
        console.log(`res`,res);
      })

  // Promise.race方法是将多个promise实例，包装成一个新的Promise实例
      //Promise.race 继发（挨个发送）
      //Promise.all并发（多个一起发送）
       
        const promiseArray=[1,2,3,4,5].map((item)=>{
        return new Promise((resolve)=>{
            resolve(item);
        })
      })
      Promise.race(promiseArray).then(res=>{
        console.log(`res`,res);//res 1
      })

// Promise.resolve将现有对象 转换成Promise对象
Promise.resolve(1).then(res=>{
    console.log(res)//1
})

// Promise.reject 返回一个Promise实例 ------>rejected
Promise.reject('promise error').then(null,rejected=>{
    console.log(`rejected`,rejected)
})

四、ES6扩展运算符...实现原理