Promise,async和js的事件循环机制

Promise

Promise有等待,已成功,失败,三种状态,状态的改变会触发then回调函数和catch回调函数。
当执行一个Promise时,它会立刻返回一个Promise对象,并且不会阻塞后续代码执行。

当Promise的状态发生改变后,相应的回调函数会被放入微任务队列。

Js的事件循环机制

通过js 的事件循环机制,从而执行promise以及DOM事件,Ajax请求,而不会阻塞。
js引擎的事件循环,使得js单线程的同时可以执行非阻塞任务。
流程如下:

while (true) {  
  // 执行同步任务()  
  while (stack.isNotEmpty()) {  
    executeSyncTask();  
  }  
  
  // 执行微任务队列的所有微任务  
  while (microtaskQueue.isNotEmpty()) {  
    executeMicrotask();  
  }  
  
  // 执行宏任务: 从宏任务中取出一个任务放入执行栈中执行。
  if (taskQueue.isNotEmpty()) {  
    macroTask = taskQueue.dequeue();  
    executeMacroTask(macroTask);  
  }  
}

同步任务:即主线程代码。

微任务:通常是用于处理Promise的回调函数(Promise的then和catch方法)。即当Promise的状态改变后,会将其回调函数放到微任务队列。

异步任务(宏任务):是由浏览器环境提供的任务,包括整体代码块,定时器,事件监听器,AJAX请求回调等。如果遇到异步任务,就将其添加到异步任务队列中。

async和awaite

用于更简洁地处理异步代码。async 关键字用于声明一个函数是异步的,该函数会返回一个 Promise 对象。await 关键字用于暂停异步函数的执行,等待 Promise 对象的解决或拒绝,并且只能在 async 函数内部使用。

在使用 await 关键字时,它会暂停异步函数的执行,等待 Promise 对象的解决或拒绝。如果异步函数没有返回(例如,没有返回 Promise 对象),那么 await 关键字后面的代码将不会执行。

Async func(){
const response=await fetch(“http://…”);//会等待fetch请求返回
const response=await fetch(“http://…”);//串行执行,等待第一个fetch执行完成后才执行

}
async func(){
const response1 =fetch(“http://…”)
const response2 =fetch(“http://…”)
const [a,b] = await Promise.all([response1,response2]);//会同步发起fetch请求,效率提高一倍
}

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值