【无标题】

Promise.all([ .. ]) 接受一个或多个值的数组(比如,立即值、promise、thenable)。它返回一个promise。

如果所有的值都完成,这个promise 的结果是完成;

一旦它们中的某一个被拒绝,那么这个promise 就立即被拒绝。


Promise.all([p1, p2, p3])
        .then((res) => {
          console.log(res) 
        })
        .catch((err) => {
          console.log(err)
        })

 Promise.allSettled()所有的Promise对象均出现结果(无论成功或失败)后才会执行allSettled中的then回调(只会进入then回调)    在所有 Promise 对象都 settle 后返回一个新的 Promise 对象,该对象的 Fulfill 状态的值是一个数组,包含每个 Promise 对象的 settle 状态信息(即不管 resolve 还是 reject 都会被处理)注意:若有错误抛出,则抛出错误信息,并终止函数

Promise.allSettled([p1, p2, p3])
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })

Promise.race() 函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成( resolves),也可以是失败(rejects),这要取决于第一个完成的方式是两个中的哪个。

Promise.race([p1, p2, p3])
        .then((res) => {
          console.log(res) //
        })
        .catch((err) => {
          console.log(err)
        })

 Promise.any()所有的Promise对象均失败后才会执行any中的失败回调,否则当任意一个Promise对象成功就会直接进入then回调


      Promise.any([p1, p2, p3])
        .then((res) => {
          console.log(res) //
        })
        .catch((err) => {
          console.log(err)
        })

async的概念

Async/Await 代码看起来简洁一些,使得异步代码看起来像同步代码     

async function getInfo() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

getInfo().then(data => console.log(data));

  async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。sync await是基于Promise实现的,不能用于普通的回调函数

function showInfo () {
  return 'hello'
}

function queryData () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('nihao')
    }, 2000)
  })
}


async function getResult () {
  let ret = await queryData()
  return ret
async function testData () {
  
  getResult().then(res => {
    console.log(res)
  })

}

testData()

JS事件循环(事件环、eventloop)

S代码执行机制JS是单线程,同一时间只能做一件事,为了避免耗时任务阻塞代码,JS通过事件循环来处理这种耗时任务(异步)

1 先同步 后异步2 异步分微任务(then,catch方法),宏任务(ajax、定时器、事件回调、script标签)

JS事件循环

      1 先执行宏任务(解析script标签)

      2 从上往下执行,遇到同步代码,立刻放入js调用栈执行

       遇到宏任务放到宿主环境(浏览器),遇到微任务放入微任务队列

       当宿主环境的时间到或事件触发,对应的回调进入宏任务队列

      3 当JS调用栈空闲时,会清空微任务队列,然后在执行宏任务队列

console.log(1) // 同步
    // 异步
    setTimeout(() => {
      console.log(2)
    }, 100)
    setTimeout(() => {
      console.log(6)
    }, 0)
    setTimeout(() => {
      console.log(8)
    }, 200)
    // then是异步
    Promise.resolve(123).then(() => {
      console.log(4)
    })
    Promise.resolve(123).then(() => {
      console.log(9)
    })
    // 同步
    console.log(3)

你可能感兴趣的:(前端,javascript,开发语言)