js补充6

异步

promise.all then和catch出来都是解决状态的

promise.allSettled 拿到的是所有状态的

promise.race()

• 里面是promise对象数组，哪有promise请求成功快就用哪个

promise队列原理，就是在then里面再new 一个promise然后只有设置resolve的时候，后面的then才可以用

  function query(num) {
      let promise =  Promise.resolve('你好')
      console.log(promise);
      num.map(v => {
        promise = promise.then((e) => {
          console.log(e);
          return new Promise(resolve => {
            setTimeout(() => {
              console.log(v);
              resolve('好呀')   // 只有加了resolve()  后面生成的promise.then才
            }, 1000)
          })
        })
      })
    }
    query([1, 2, 3, 4, 5])

在类中使用aysnc/awit

    class User {
      constructor(name) {
        this.name = name
      }
      // 在类中定义一个then方法，这个类也就相当于promise
      then(resolve, reject) {
        setTimeout(() => {
          resolve(this.name)
        }, 2000)
      }
    }
    async function get() {
      let user = await new User('你是大傻逼')
      console.log(user);
    }
    get()

async函数里面不加awit 的时候，函数是并行的，同时开始执行，下面是实现并行的两种方式

 class User {
      constructor(name) {
        this.name = name
      }
      // 在类中定义一个then方法，这个类也就相当于promise
      then(resolve, reject) {
        setTimeout(() => {
          resolve(this.name)
        }, 2000)
      }
    }
    class User1 {
      constructor(name) {
        this.name = name
      }
      // 在类中定义一个then方法，这个类也就相当于promise
      then(resolve, reject) {
        setTimeout(() => {
          resolve(this.name)
        }, 2000)
      }
    }
    async function get() {
      // 下面同时进行
      let user =  new User('你是大傻逼')
      let user1 =  new User1('你是大傻逼')
      
      // 下面是马上得到的user
      console.log(user);
      console.log(user1);
      
      // 下面使用awit是等待四秒后才得到的
      let name = await user
      let name1 = await user1
      console.log(name);
      console.log(name1);
    }
    get()

    // 实现并行的方式2
    async function get2(){
      let res = await Promise.all([new User('小煞笔'),new User1('大傻逼')])
      console.log(res); // ["小煞笔", "大傻逼"]
    }
    get2()

下面是返回的user

任务处理顺序：正常在时间轮询的情况下，在主线程处理完正常的事件，就处理异步产生的回调事件，把回调函数的事情放到主线程这里进行，但其实中间还有一步，就是promise的异步事件，这就涉及到了宏任务和微任务，微任务的处理顺序是排在宏任务前面的，也就是在处理完正常的事件后就会处理微任务，也就是promise 的回调函数，把promise的回调函数放到 主线程这里，然后就处理宏任务，也就是异步的回调函数

宏任务队列中，比如定时器，当代码往下走时，遇到定时器就会把定时器放到红任务队列，其实这时候他就开始执行了，当主线程的任务和promise的任务执行完之后，就会马上把定时器的回调函数执行，如果有两个定时器的时候，遇到的时候也是立即执行的，然后哪个先执行完毕，当微任务队列执行完后，就优先执行哪个

微任务执行逻辑，其实跟上面定时器的执行逻辑是一样的，也就是new promise里面的东西是同步执行的，马上执行，然后then或者catch里面的是回调函数，会放到微任务队列里面

dom渲染是放在宏任务里面的，也就是说如果如果把script标签放到dom前面的话，会导致只有等js导入完成才会 去 执行dom渲染

使用promise微任务来处理逻辑

// 比如有一段代码需要执行很长的时间，为了不影响后面代码的执行，就可以把他定义打定时器获取promise里面
// 定时器方式
function sum(num) {
  return new Promise(resolve => {
    setTimeout(() => {
      let count = 0
      for (let i = 0; i < num; i++) {
        count = num--
      }
      resolve(count)
    })
  })
}

async function get() {
  let count = await sum(500)
  console.log(count);
}

get()
console.log('大傻逼');

// 微任务方式
async function num1(num){
    let res = await Promise.resolve().then(()=>{
      let count = 0
      for (let i = 0; i < num; i++) {
       count += num--
      }
      return count 
    })
    console.log(res);
}
num1(10000)
console.log('你是傻逼');