setTimeout,promise,promise.then, async,await执行顺序问题

本文详细解析了JavaScript中setTimeout、Promise、async/await等异步操作的执行顺序,并通过具体示例展示了宏任务与微任务的运行机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

setTimeout,promise,promise.then, async,await执行顺序问题

请看下面题目:

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('asnyc1 end');
  }
  async function async2() {
    console.log('async2');
  }
  console.log('script start');
  setTimeout(() => {
    console.log('setTimeOut');
  }, 0);
  async1();
  new Promise(function (reslove) {
    console.log('promise1');
    reslove();
  }).then(function () {
    console.log('promise2');
  })
  console.log('script end');

结果打印输出结果如下:

script start

  async1 start

  async2

  promise1

  script end

  async1 end

  promise2

  setTimeout

下面是个人理解:

 js事件分两种: 宏任务(macro task) 和 微任务(micro task)

    宏任务包括: script(读取 执行script代码也算一种任务)  setTimeout  setInterval

    微任务包括:promise.then(注意是promise.then)  , process.nextTick

    事件执行顺序: 先执行宏任务, 然后执行微任务

  任务执行顺序:先执行同步代码,后执行异步代码

    上述代码的同步代码有哪些呢:

      console.log('script start');

      async1();

      console.log('async1 start');

      console.log('async2');

      console.log('promise1');

      console.log('script end');

      值得注意的是

      1. async声明的函数 

        如果没有await 跟普通函数一样 

        如果存在await  await之前的代码包括await紧跟的这个函数都是同步执行的

        await执行async2这个函数之后await让出了线程,把返回的promise加入了微任务异步队列,所以async1()下面的代码也要等待上面完成后继续执行;

       

          上述代码中  由于在执行async2之前  还没有执行new Promise  所以不会把promise.then这个微任务添加到异步队列中

          善于动手的小伙伴可以试着  把 new Promise那段代码放到async1();之前  会返现执行顺序不一样  

        

      2. new Promise()是声明就立即执行的, promise.then才是异步;

    然后是异步代码:promise.then    setTimeout

          3.3 微任务 & 宏任务

       常见的宏任务、微任务分别有哪些
      宏任务:setTimeout、setInterval、Ajax、DOM事件
     微任务:Promise.then()、async/await

### JavaScript 中 `Promise` 的 `.then()` 方法执行顺序 在 JavaScript 中,`.then()` 方法用于处理由 `Promise` 对象返回的结果。当一个 `Promise` 被创建并进入完成状态(fulfilled 或 rejected),相应的回调函数会被加入到微任务队列中等待执行。 对于给定的例子: ```javascript const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('success'); // 这里的reject不会被执行因为一旦调用了resolve就不会再调用reject reject('error'); }, 1000); }); promise.then( (res) => { console.log(res); }, (err) => { console.log(err); } ); ``` 在这个例子中,由于 `setTimeout` 设置的时间为 1 秒,在这段时间过去后会触发 `resolve('success')` 函数调用[^1]。这使得 `Promise` 变成 fulfilled 状态,并且将 `'success'` 参数传递给了第一个参数位置定义的成功回调 `(res)`。需要注意的是在同一时间内的 `reject('error')` 不会产生任何效果,因为它是在已经通过 `resolve` 完成了的状态下调用的。 另外一段代码展示了如何结合 `async/await` 使用 `Promise` `.then()`: ```javascript const bar = () => { console.log('foo') }; const foo = async () => { try { let response = await axios.get('endpoint'); console.log(response.data); } catch(error){ console.error(error); } finally{ bar(); } }; foo(); ``` 这里使用了 `async/await` 来简化异步操作流程控制。当 `axios.get('endpoint')` 请求成功完成后,它所返回的数据被赋值给变量 `response` 并打印出来;如果发生错误则被捕获并在 `catch` 块内处理。无论结果怎样都会继续运行 `finally` 下面的内容即调用 `bar()` 函数[^2]。 总结来说,`.then()` 方法会在 `Promise` 结束其 pending 阶段变为 resolved 或者 rejected 后立即排队等候执行相应注册好的回调函数[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值