• await 关键字在 async 函数中确实表现出“等待”的效果,那异步的含义呢,异步指整个不影响主进程


    虽然 await 关键字async 函数中确实表现出“等待”的效果,但它仍然是异步操作的一部分,并不等同于同步操作。以下是一些关键点,解释为什么 await 虽然看起来像同步操作,但实际上仍然是异步的:

    1. 非阻塞的等待

    await 的等待是非阻塞的,这意味着当一个异步函数在等待时,JavaScript 运行时环境不会阻塞整个程序的执行。其他代码仍然可以继续运行。

    async function example() {
      console.log('Before await');
      let result = await new Promise(resolve => setTimeout(() => resolve('Done!'), 1000));
      console.log(result); // 输出: Done!
      console.log('After await');
    }
    
    example();
    console.log('Outside async function');
    '
    运行

    输出:

    Before await
    Outside async function
    Done!
    After await
    

    在这个例子中,虽然 await 看起来像同步等待,但它并没有阻塞 console.log('Outside async function') 的执行。这表明 await 是非阻塞的,允许其他代码继续运行。

    2. 事件循环

    await 是基于 JavaScript 的事件循环模型实现的。当 await 一个 Promise 时,JavaScript 引擎会将异步操作挂起,并在 Promise 被解决(resolved)或拒绝(rejected)时恢复执行。期间,事件循环会继续处理其他任务。

    async function fetchData() {
      let data = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      let json = await data.json();
      return json;
    }
    
    fetchData().then(result => console.log(result));
    console.log('This will log before the fetch completes');
    

    输出:

    This will log before the fetch completes
    { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
    

    在这个例子中,fetchData 函数在等待 fetch 请求完成时,控制权返回到事件循环,允许 console.log('This will log before the fetch completes') 执行。这展示了 await 是基于事件循环的异步行为,而不是传统的同步阻塞。

    3. 简化异步代码

    asyncawait 提供了一种更直观的方式来编写异步代码,使其看起来像同步代码,但实际上底层仍然是异步操作。这种语法糖使得代码更易读和维护,而无需处理复杂的回调函数或 Promise 链。

    4. 异步控制流

    await 允许我们像处理同步代码那样处理异步操作,从而实现更复杂的异步控制流,例如串行执行多个异步操作或捕获异步操作中的错误。

    async function example() {
      try {
        let response1 = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        let data1 = await response1.json();
        console.log(data1);
    
        let response2 = await fetch('https://jsonplaceholder.typicode.com/todos/2');
        let data2 = await response2.json();
        console.log(data2);
      } catch (error) {
        console.error('Error:', error);
      }
    }
    
    example();
    '
    运行

    在这个例子中,多个异步操作按顺序执行,并且错误可以通过 try...catch 块来捕获和处理,这使得代码更加简洁和易于理解。

    总结

    虽然 await 关键字在 async 函数中表现为等待,但它是非阻塞的,并且依赖于 JavaScript 的事件循环机制来管理异步操作。因此,它提供了同步代码的可读性和简洁性,但仍然保持了异步操作的高效性和非阻塞特性。

  • 相关阅读:
    数据结构(高阶)—— 二叉搜索树
    线程安全问题(模拟取钱案例)
    PasteSpider的集群组件PasteCluster(让你的项目快速支持集群模式)的思路及实现(含源码)
    什么是隧道代理,要怎么用?| 实用教程
    Linux常用命令
    kafka 发送文件二进制流及使用header发送附属信息
    Vue接收接口返回的mp3格式数据并支持在页面播放音频
    Allegro Design Entry HDL(OrCAD Capture HDL)工具栏管理详细介绍
    【论文阅读笔记】Revisiting RCAN: Improved Training for Image Super-Resolution
    编码数据未来:Python数据科学的现代工具箱
  • 原文地址:https://blog.csdn.net/liuchenbaidu/article/details/140462174