Promise.resolve和Promise.reject

//Promise.resolve
      //是成功状态Promise 的一种简写模式状态

      // console.log(new Promise((resolve) => resolve("foo")));
      // 简写
      // Promise.resolve("foo");

      // 参数
      //一般参数
      // Promise.resolve().then((data) => console.log(data));

      // 当Promise.resolve()接收的是Promises 对象时，直接返回这个Promise对象什么都不做
      //   const p1 = new Promise((resolve) => {
      //     setTimeout(() => {
      //       resolve("wzxl");
      //     }, 1000);
      //   });
      //   Promise.resolve(p1).then((data) => {
      //     console.log(data);
      //   });

      // 等价于
      //   p1.then((data) => console.log(data));
      // 当resolve 函数接收的是Promise对象时，后面的then会根据传递的Promise 对象的状态变化决定执行那个一个回调

      // 具有then方法的对象

      // 2.Promise.reject()
      // 失败状态 Promise 的一种简写形式
      // console.log(new Promise((reject) => reject("foo")));
      // 简写
      // Promise.reject("foo");

Promise.all方法

// Promise.all()又什么用
      // Promise.all()关注多个Promise对象的状态
      // 传入多个Promise实例，包装成一个新的Promise实例放回

      //基本用法
      // Promise.all()的状态变化与所有传入的Promise实例对象状态有关
      //所有状态都变成 resolved 最终状态才会成resolved
      //只要有一个都变成 rejected 最终状态才会成rejected

      const delay = (ms) => {
        return new Promise((resolve) => {
          setInterval(() => {
            resolve();
          }, ms);
        });
      };

      const p1 = delay(1000).then(() => {
        console.log("p1 完成");
        return new Promise.reject();
      });
      const p2 = delay(2000).then(() => {
        console.log("p2 完成");
      });

      const p = Promise.all([p1, p2])
        .then(() => {
          console.log(123);
        })
        .catch(() => {
          console.log("失败");
        });

Promise.rece 和 Promise.allSettled

 const delay = (ms) => {
        return new Promise((resolve) => {
          setInterval(() => {
            resolve();
          }, ms);
        });
      };
      const p1 = delay(1000).then(() => {
        new Promise.reject();
        console.log("p1 完成");
      });
      const p2 = delay(2000).then(() => {
        console.log("p2 完成");
        return new Promise.reject();
      });

      // Promise.race() 的转态取决于第一个完成的Promise实例对象，
      // 如果第一个完成的成功了，那最终的就成功，如果第一个完成的失败了
      // 那最终就失败了

      const recePromise = Promise.race([p1, p2])
        .then((data) => {
          console.log(data);
        })
        .catch(() => {
          console.log("失败");
        });

      //2. Promise.allSettled()
      // Promise.allSettled() 的状态与传入的Promise 状态无关
      // 永远都是成功
      // 他只会忠实的记录下各个 Promise 的表现
      //   const recePromise = Promise.allSettled([p1, p2]).then((data) => {
      //     console.log(data);
      //   });

Promise的注意事项

//1. resolve 或 reject 函数执行后的代码
      // 推荐在调用 resolve 或reject 函数的时候加上return 不再执行他们后面的代码

      //   const p = new Promise((resolve, reject) => {
      //     return resolve("成功");
      //   });

      //   p.then((data) => {
      //     console.log(data);
      //   });

      //2. Promise.all/race/allSettled的参数问题
      // 参数如果不是 Promise 数组,会将不是Promise 的数组元素变成 Promise
      //   Promise.all([1, 2, 3]).then((data) => {
      //     console.log(data);
      //   });
      // 等价于
      //   Promise.all(() => {
      //     Promise.resolve(1);
      //     Promise.resolve(2);
      //     Promise.resolve(3);
      //   }).then((data) => {
      //     console.log(data);
      //   });
      // 不只是数组，任何可遍历的都可作为参数
      // 数组 字符串 Set Map NodeList arguments

      //3. Promise.all/race/allSettled的错误处理
      const delay = (ms) => {
        return new Promise((resolve) => {
          setInterval(() => {
            resolve();
          }, ms);
        });
      };

      const p1 = delay(1000).then(() => {
        console.log("p1 完成");
        return new Promise.reject();
      });
      const p2 = delay(2000).then(() => {
        console.log("p2 完成");
      });

      Promise.all([p1, p2])
        .then((data) => {
          console.log(data);
        })
        .catch(() => {
          console.log("err");
        });

Promise的应用

• 异步图片加载

// 异步加载图片
      const loadimgAsync = (url) => {
        return new Promise((resolve, reject) => {
          const aImg = new Image();
          aImg.src = url;

          aImg.onload = () => {
            resolve(aImg);
          };
          aImg.onerror = () => {
            reject("图片加载失败");
          };
        });
      };
      const img1 = document.getElementById("img1");
      loadimgAsync(
        "https://pics1.baidu.com/feed/d6ca7bcb0a46f21fd0eb58633196b76b0d33ae65.jpeg@f_auto?token=347358c07b35aad03724daaf9b75c479"
      ).then((image) => {
        setTimeout(() => {
          img1.src = image.src;
        }, 2000);
      });

class是什么

cript>
      //1. 认识Class
      // 类可以可能做是对象的模板，用一个类可以创建出许多不同的对象

      //2.Class的基本用法
      // 类名一般首字母大写

      //   class Person {
      //     // 实例化时执行构造方法，所以必须有构造方法，但可以不写出来
      //     constructor(name, age) {
      //       this.name = name;
      //       this.age = age;
      //       // 一般构造方法中定义属性，方法不在构造方法中定义
      //     }
      //     speak() {}
      //   }
      // 3.class 与构造函数
      class Person {
        // 实例化时执行构造方法，所以必须有构造方法，但可以不写出来
        constructor(name, age) {
          this.name = name;
          this.age = age;
          // 一般构造方法中定义属性，方法不在构造方法中定义
        }
        speak() {}
      }

class 的两种形式

      // 1. 声明形式
      //   class Person {
      //     constructor() {}
      //   }

      //2.表达式形式

      //   const Person = class {
      //     constructor() {
      //       console.log(1);
      //     }
      //   };
      //   new Person();

      new (class {
        constructor() {
          console.log(11);
        }
      })();

将时间戳化为天数

 function getTime(s) {
        let day = Math.floor(s / (3600 * 24 * 1000));
        s %= 3600 * 1000 * 24;
        let hours = Math.floor(s / (3600 * 1000));
        s %= 3600 * 1000;
        let f = Math.floor(s / (60 * 1000));
        let m = Math.floor((s % (1000 * 60)) / 1000);
        console.log(day, hours, f, m);
        let daet = `${day}天:${hours}小时${f}分钟${m}秒`;
        document.body.innerHTML = daet;
      }

      getTime(new Date().getTime());

      setInterval(() => {
        getTime(new Date().getTime());
      }, 1000);

Moudule的两种导出和导入

// 1.认识导出和导入
      // 导入的东西可以被导入（import） 病房问到
      // 一个模块没有导出也可以导入
      // 被导入的代码都会执行一遍，也近会执行一遍
      //   import "./dombl.js";
      //2.基本用法
      // 可以随便起名
      // import seintw from "./dom.js";

      // 一个模块只有一个expot default
      // expot default sex
      // Promise.reject()
      //   .then(() => {
      //     console.log(1);
      //   })
      //   .catch(() => {
      //     console.log(2);
      //     throw new Error();
      //   })
      //   .then(() => {
      //     console.log(3);
      //   })
      //   .catch(() => {
      //     console.log(4);
      //   });
      console.log("start");
      setTimeout(() => {
        console.log("settimeout");
      }, 0);
      Promise.resolve().then(() => {
        console.log("promise");
        throw new Error();
      });
      setInterval(() => {
        console.log("setinterval");
      }, 500);
      console.log("end");