从0开始学习JavaScript--JavaScript 异步编程

在现代的Web开发中，异步编程变得愈发重要。随着用户期望的提高和网络应用的复杂性增加，有效地处理异步操作成为构建高性能、交互丰富的应用的关键。JavaScript作为一门单线程的语言，采用异步机制来处理并发任务，确保用户体验不受阻塞。

异步编程的重要性

异步编程解决了程序在执行某些耗时操作时不会被阻塞的问题，允许程序在等待操作完成的同时执行其他任务。在Web开发中，异步编程用于处理诸如数据请求、用户输入、定时任务等场景，使应用更加灵活且具备更好的响应性。

JavaScript中的异步机制

JavaScript中的异步编程机制主要包括回调函数、Promise对象、async/await和Generators等。通过这些工具，开发者能够以更清晰、可读性更高的方式处理异步任务，使代码更容易维护和扩展。JavaScript的事件驱动和异步非阻塞I/O的特性使得它成为处理大规模并发的理想语言。

回调函数

什么是回调函数

回调函数是一种被作为参数传递给其他函数的函数，这个函数在某个特定事件发生或者异步操作完成后执行。JavaScript中广泛使用回调函数来处理异步任务，确保在任务完成后执行相应的操作。

回调函数的应用场景

  1. 事件处理： 处理用户的点击、鼠标移动等事件。
  2. 异步请求： 在数据请求完成后执行相应的操作，如更新界面。
  3. 定时任务： 设置定时器，指定一个函数在一定时间后执行。

示例代码：异步操作中的回调函数

// 模拟异步请求
function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: "John Doe" };
    callback(null, data); // 第一个参数为错误对象，第二个参数为结果
  }, 1000);
}

// 使用回调函数处理异步请求结果
function handleData(error, result) {
  if (error) {
    console.error("Error fetching data:", error);
  } else {
    console.log("Data fetched successfully:", result);
  }
}

// 发起异步请求
fetchData(handleData);

在这个例子中，fetchData函数模拟了一个异步请求，在请求完成后调用传入的回调函数handleData。这样的设计使得代码更具灵活性，可以在请求完成后执行各种操作。然而，随着异步代码嵌套层次的增加，可能会导致回调地狱的问题。

Promise对象

Promise的基本概念

Promise是一种用于处理异步操作的对象，它代表了一个异步操作的最终完成或失败，以及它的结果值。Promise有三种状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。

Promise的状态与状态转换

  1. Pending： 初始状态，表示异步操作正在进行中。
  2. Fulfilled： 操作成功完成，表示Promise对象返回了一个结果。
  3. Rejected： 操作失败，表示Promise对象返回了一个错误。

一旦Promise的状态发生变化，就会触发相应的回调函数。

Promise的链式调用

Promise允许通过链式调用的方式处理多个异步任务。每个.then()方法都返回一个新的Promise对象，使得我们可以根据前一个Promise的结果执行下一个异步任务。

示例代码：使用Promise处理异步任务

// 模拟异步请求
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John Doe" };
      resolve(data); // 异步操作成功，返回结果
      // 如果异步操作失败，可以调用 reject(new Error("Failed to fetch data"));
    }, 1000);
  });
}

// 使用Promise处理异步请求
fetchData()
  .then(result => {
    console.log("Data fetched successfully:", result);
    return result.id; // 将结果传递给下一个Promise
  })
  .then(id => {
    console.log("Processing data with id:", id);
  })
  .catch(error => {
    console.error("Error fetching or processing data:", error);
  });

在这个例子中，fetchData函数返回一个Promise对象。通过.then()方法，我们可以在成功时执行相应的操作，并且可以链式调用多个.then()。通过.catch()方法，我们可以捕获Promise链中的任何错误。这样的结构更清晰，避免了回调地狱的问题。

async/await

async/await的概念与用法

async/await是JavaScript中用于处理异步操作的一种现代化的语法糖。通过使用async关键字定义一个返回Promise对象的函数，以及在函数内使用await关键字等待Promise对象的状态，我们可以更清晰、更同步地编写异步代码。

async/await与Promise的关系

  • async函数： 使用async关键字定义的函数会返回一个Promise对象。
  • await表达式： 在async函数中，可以使用await等待一个Promise对象的解决或拒绝。在等待期间，函数会被挂起，不会阻塞其他代码的执行。

错误处理与异常处理

在async/await中，错误处理可以通过try...catch语句来实现。当await后面的Promise对象状态变为拒绝时，会触发catch块。

示例代码：使用async/await改善异步代码

// 模拟异步请求
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John Doe" };
      resolve(data); // 异步操作成功，返回结果
      // 如果异步操作失败，可以调用 reject(new Error("Failed to fetch data"));
    }, 1000);
  });
}

// 使用async/await改善异步代码
async function processAsyncData() {
  try {
    const result = await fetchData();
    console.log("Data fetched successfully:", result);

    // 其他同步操作
    const processedData = `${result.name} is processed.`;
    console.log(processedData);
  } catch (error) {
    console.error("Error fetching or processing data:", error);
  }
}

// 调用async函数
processAsyncData();

在这个例子中，processAsyncData函数是一个使用async/await改善的异步代码。通过await fetchData()，我们避免了回调地狱，使得异步代码更具可读性。同时，使用try...catch可以轻松地捕获并处理错误，提高了代码的稳定性。在实际项目中，async/await是处理异步任务的推荐方式之一。

Generators

Generator函数的基本概念

Generator函数是一种可以暂停和继续执行的特殊函数。通过使用function*关键字定义Generator函数，以及在函数内部使用yield关键字产生值，我们可以实现异步操作的流程控制。

yield关键字的作用

yield关键字用于暂停Generator函数的执行，并且可以向调用者（或者调用链）传递一个值。当Generator函数再次被调用时，会从上一次yield的位置继续执行。

使用Generator函数进行异步编程

通过结合Promise和Generator函数，我们可以实现更灵活的异步流程控制。每当遇到异步操作，Generator函数可以暂停执行，等待Promise的结果，然后再继续执行下一步操作。

示例代码：异步流程控制与Generators

// 模拟异步请求
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John Doe" };
      resolve(data); // 异步操作成功，返回结果
      // 如果异步操作失败，可以调用 reject(new Error("Failed to fetch data"));
    }, 1000);
  });
}

// Generator函数
function* asyncFlow() {
  try {
    const result = yield fetchData();
    console.log("Data fetched successfully:", result);

    // 其他同步操作
    const processedData = `${result.name} is processed.`;
    console.log(processedData);
  } catch (error) {
    console.error("Error fetching or processing data:", error);
  }
}

// 执行Generator函数
const generator = asyncFlow();
const promise = generator.next().value;

// 处理Promise结果
promise
  .then(result => generator.next(result))
  .catch(error => generator.throw(error));

在这个例子中，asyncFlow是一个Generator函数，通过调用generator.next().value获取了一个Promise对象。通过.then()和.catch()方法处理了Promise的结果和错误，从而实现了异步流程的控制。Generator函数的特性使得异步代码更具可读性和可控性。

异步编程实例

异步加载数据

在现代Web开发中，异步加载数据是一项常见的任务。通过使用异步请求，我们能够在不阻塞页面加载的情况下获取数据，提高用户体验。

// 异步加载数据的例子
function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

// 使用异步加载数据
fetchData('https://api.example.com/data')
  .then(data => {
    console.log('Data loaded successfully:', data);
  })
  .catch(error => {
    console.error('Error loading data:', error);
  });

在这个例子中，fetchData函数使用了fetch API进行异步数据加载。通过返回一个Promise对象，我们可以使用.then()和.catch()处理异步操作的成功和失败。

定时任务与延迟执行

定时任务和延迟执行是处理异步操作的另一种常见场景。JavaScript提供了setTimeout和setInterval函数，允许我们在一定的时间后执行特定的任务。

// 定时任务与延迟执行的例子
console.log('Start script');

// 定时任务：每隔一秒输出一次
const intervalId = setInterval(() => {
  console.log('Interval execution');
}, 1000);

// 延迟执行：两秒后输出一次
setTimeout(() => {
  console.log('Delayed execution after 2000 milliseconds');
  clearInterval(intervalId); // 清除定时任务
}, 2000);

在这个例子中，我们使用setInterval创建了一个每秒执行一次的定时任务，并使用setTimeout在两秒后执行一次延迟任务。定时任务和延迟执行是处理周期性或延迟操作的有效方式。

事件驱动编程

事件驱动编程是一种通过定义和触发事件来进行异步操作的范式。在浏览器环境中，DOM事件就是一个典型的例子。

// 事件驱动编程的例子
const button = document.getElementById('myButton');

// 定义事件处理函数
function handleClick() {
  console.log('Button clicked');
}

// 注册事件监听器
button.addEventListener('click', handleClick);

在这个例子中，我们通过addEventListener方法注册了一个点击事件的监听器。当按钮被点击时，事件处理函数handleClick将被触发。

异步编程的最佳实践

1. 避免回调地狱

回调地狱是指在异步代码中嵌套过多的回调函数，导致代码难以维护和理解。为了避免回调地狱，可以使用Promise、async/await等方式。

// 回调地狱的例子
fetchData('url1', (data1, error1) => {
  if (error1) {
    console.error('Error fetching data1:', error1);
  } else {
    fetchData('url2', (data2, error2) => {
      if (error2) {
        console.error('Error fetching data2:', error2);
      } else {
        // 处理数据
        console.log('Data1:', data1);
        console.log('Data2:', data2);
      }
    });
  }
});

重构为Promise和async/await：

// 使用Promise和async/await的例子
async function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 异步操作...
  });
}

async function fetchDataAndProcess() {
  try {
    const data1 = await fetchData('url1');
    const data2 = await fetchData('url2');
    // 处理数据
    console.log('Data1:', data1);
    console.log('Data2:', data2);
  } catch (error) {
    console.error('Error fetching or processing data:', error);
  }
}

fetchDataAndProcess();

2. 使用Promise.all处理多个异步任务

Promise.all可以同时处理多个Promise对象，等待所有的Promise都完成后才执行后续操作。这对于并行执行多个异步任务非常有用。

// 使用Promise.all的例子
const promise1 = fetchData('url1');
const promise2 = fetchData('url2');

Promise.all([promise1, promise2])
  .then(([data1, data2]) => {
    // 处理数据
    console.log('Data1:', data1);
    console.log('Data2:', data2);
  })
  .catch(error => {
    console.error('Error fetching or processing data:', error);
  });

3. 性能优化与异步编程

在性能优化方面，合理使用异步编程可以提高程序的响应速度。例如，通过在页面加载后异步加载资源、延迟执行非关键性任务等方式可以优化用户体验。

// 异步加载资源的例子
function loadAsyncResource(url) {
  const script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}

// 页面加载后异步加载资源
window.addEventListener('load', () => {
  loadAsyncResource('https://example.com/async-script.js');
});

在实际应用中，根据具体场景选择合适的异步编程方式，并结合性能优化策略，可以使程序更加高效和可维护。

异步编程的未来

1. 引入Async Hooks的Node.js异步编程

Node.js引入了Async Hooks API，这是一种用于跟踪和监控异步操作的机制。通过Async Hooks，开发者可以追踪异步操作的生命周期，包括异步调用的开始、完成和错误。这使得在Node.js中进行更高级的异步调试和性能分析成为可能。

// 示例：使用Async Hooks追踪异步操作
const async_hooks = require('async_hooks');

const asyncHook = async_hooks.createHook({
  init(asyncId, type, triggerAsyncId, resource) {
    console.log(`Async operation started: ${type}`);
  },
  before(asyncId) {
    console.log(`Async operation about to run with id: ${asyncId}`);
  },
  after(asyncId) {
    console.log(`Async operation completed with id: ${asyncId}`);
  },
  destroy(asyncId) {
    console.log(`Async operation destroyed with id: ${asyncId}`);
  }
});

asyncHook.enable();

// 异步操作示例
setTimeout(() => {
  console.log('Timeout completed');
}, 1000);

2. ECMAScript中对异步编程的发展

在ECMAScript中，异步编程的发展也在不断演进。新的语言特性和API使得异步代码更加容易编写和维护。

Promise.allSettled： 引入了Promise.allSettled方法，它接收一组Promise对象并返回一个新的Promise对象，该对象在所有传入的Promise都已解决或拒绝时解决。

// 示例：Promise.allSettled
const promises = [
  Promise.resolve('Resolved'),
  Promise.reject('Rejected'),
  Promise.resolve('Resolved again')
];

Promise.allSettled(promises)
  .then(results => {
    console.log(results);
  });

Top-Level Await： 在模块的顶层直接使用await，使得在模块顶层进行异步操作变得更加方便。

// 示例：Top-Level Await
// 在支持的环境中（如Node.js 14+），可以直接在模块的顶层使用await
const result = await fetchData('https://example.com/data');
console.log('Data fetched:', result);

异步编程的未来将继续关注于提供更强大、更直观的工具和语法，以便更好地应对复杂的异步任务。

总结

JavaScript异步编程是现代Web开发中不可或缺的一部分。通过回调函数、Promise、async/await、Generators等机制，JavaScript提供了多种方式来处理异步任务，使得代码更具可读性和可维护性。从回调地狱的问题中脱身，使用Promise和async/await提高了代码的清晰度和可控性。

同时，异步编程的最佳实践包括避免回调地狱、使用Promise.all处理多个异步任务以及注意性能优化，这些都是提高开发效率和用户体验的重要手段。异步编程的未来展望着更强大的工具和语法，如Node.js的Async Hooks、ECMAScript的新特性，这些将进一步简化异步操作的跟踪和编写，使得开发者能够更好地处理异步任务的挑战。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/151177.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Typora使用教程

Typora使用教程

文章目录 markdown的使用说明一、标题 这是一级标题这是二级标题二、段落1、换行2、分割线 三、文字显示1、字体2、上下标 四、列表1、无序列表2、有序列表3、任务列表 五、区块显示六、代码显示1、行内代码2、代码块 七、链接八、脚注九、图片插入十、表格十一、流程图1、横向…
阅读更多...
php快速排序法

php快速排序法

快速排序是一种常用的排序算法，也是最快的排序算法之一。其基本思想是通过一趟排序将待排序的数据分割成两部分，其中一部分的所有数据都比另一部分的所有数据小，然后再对这两部分分别进行快速排序，递归地重复这个过程，…
阅读更多...
RT-Thread STM32F407 ADC

RT-Thread STM32F407 ADC

ADC(Analog-to-Digital Converter) 指模数转换器。是指将连续变化的模拟信号转换为离散的数字信号的器件。真实世界的模拟信号，例如温度、压力、声音或者图像等，需要转换成更容易储存、处理和发射的数字形式。模数转换器可以实现这个功能，在各…
阅读更多...
Windows10配置深度学习环境

Windows10配置深度学习环境

一、Anaconda安装与虚拟环境创建 Anaconda的出现极大的方便了研究人员的Python开发工作，anaconda可以创建多个虚拟环境，这些虚拟环境就像一间间教室一样，虚拟环境彼此之间、虚拟环境与基础环境（base）之间互不影响&…
阅读更多...
__builtin_expect(x,0)

__builtin_expect(x,0)

As opposed to the C code, above we can see bar case precedes foo case. Since foo case is unlikely, and instructions of bar are pushed to the pipeline, thrashing the pipeline is unlikely. This is a good exploitation of a modern CPU
阅读更多...
C/C++---------------LeetCode第1394.找出数组中的幸运数

C/C++---------------LeetCode第1394.找出数组中的幸运数

找出数组中的幸运数 题目及要求暴力算法哈希算法在main里使用 题目及要求 在整数数组中，如果一个整数的出现频次和它的数值大小相等，我们就称这个整数为「幸运数」。 给你一个整数数组 arr，请你从中找出并返回一个幸运数。 如果数组中存在…
阅读更多...
Java排序算法之贪心算法

Java排序算法之贪心算法

贪心算法是一种优化问题的解决方法，它在每一步选择中都采取在当前状态下最好或最优（即最有利）的选择，从而希望导致结果是全局最优的。贪心算法常用于最优化问题，比如最小生成树、哈夫曼编码、最短路径等。贪心算法是一…
阅读更多...
Java排序算法之希尔排序

Java排序算法之希尔排序

希尔排序（Shell Sort）又称“缩小增量排序”，是直接插入排序算法的一种更高效的改进版本。它的基本思想是：首先将整个数组按照一定的间隔分成若干个子序列，然后对每个子序列分别进行插入排序，减小间隔&#…
阅读更多...
day28_JQuery

day28_JQuery

今日内容 零、 复习昨日 一、正则表达式 二、JQuery 零、 复习昨日 js已经学完,js是让页面动态变化 1) 基本语法(变量,运算,逻辑,函数) 2) 事件(给标签绑定不同的事件) 3) dom(改变标签内容,属性,样式)一、引言 1.1 jQuery概述 原生js获得dom对象: var obj document.getElem…
阅读更多...
李宏毅机器学习入门笔记——第三节

李宏毅机器学习入门笔记——第三节

Convolutional Neural Network（CNN） 卷积神经网络 padding表示超过图片矩阵的距离 stride表示步长 常见的卷积都是3*3，同时可以知道图片的组成就是rgb也就是三个矩阵组成 使用卷积就是共用参数，减少参数量，不需要看整张…
阅读更多...
Opengauss到Oracle增量同步， 使用debezium

Opengauss到Oracle增量同步， 使用debezium

一、概述 PG到Oracle的同步方案使用debezium kafka kafka-connect-jdbc。debezium是一款开源的变更捕获软件，它以kafka的connector形式运行，可以捕获PostgreSQL、MySQL、Oracle中的变更数据，保存到kafka。kafka-connect-jdbc是confluent公…
阅读更多...
第一型曲面积分的第二型曲面积分的区别与联系【从几何知识的角度思考】

第一型曲面积分的第二型曲面积分的区别与联系【从几何知识的角度思考】

此处为曲线积分------>【问题思考总结】第一型曲线积分和第二型曲线积分的区别与联系【从几何知识的角度思考】 一二型曲面积分有什么区别？（了解） 一型曲面积分： 由dS进行表示。可以想像，dS是一个面积微元&#x…
阅读更多...
MySQL数据库清理Relay_Log_File日志

MySQL数据库清理Relay_Log_File日志

背景 “Relay_Log_File” 是 MySQL 中用于复制的参数之一。在 MySQL 复制中，当一个服务器作为主服务器（master）时，它会将其更改写入二进制日志文件（binary log file）。而另一个服务器作为从服务器&#xf…
阅读更多...
阿里云99元VS腾讯云88元，双11云服务器价格战，谁胜谁负？

阿里云99元VS腾讯云88元，双11云服务器价格战，谁胜谁负？

在2023年的双十一优惠活动中，阿里云推出了一系列令人惊喜的优惠活动，其中包括99元一年的超值云服务器。本文将带您了解这些优惠活动的具体内容，以及与竞争对手腾讯云的价格对比，助您轻松选择最适合的云服务器。 99元一年服务器优…
阅读更多...
每日汇评：积极的数据可能会推动澳元/美元的上涨

每日汇评：积极的数据可能会推动澳元/美元的上涨

继 9 月份增加 6700 个就业岗位之后，澳大利亚 10 月份预计将增加 18000 个就业岗位； 失业率预计将从 3.6% 升至 3.7%，维持在历史低点附近； 澳元/美元在美元疲软的支撑下维持看涨基调， 其面临关键阻力位0.6520&#xff…
阅读更多...
【Linux】初识网络

【Linux】初识网络

目录 背景 协议 什么是协议 协议分层 OSI七层模型 TCP/IP模型 网络协议栈与 OS 的关系 网络传输 局域网中直接通信 数据的封装与分用 局域网通信原理 数据碰撞 跨路由器进行远端通信 IP的介绍 传输演示 背景 🧊一开始，计算机都是一台台独…
阅读更多...
Java实现拼图游戏

Java实现拼图游戏

拼图游戏是一种智力类游戏，玩家需要将零散的拼图块按照一定的规律组合起来，最终拼成完整的图案。拼图游戏的难度可以根据拼图块数量、拼图的形状、图案的复杂程度等因素来调整。这种游戏适合各个年龄层的玩家，能够提高大脑的观察力、空间感知…
阅读更多...
WPF xaml Command用法介绍

WPF xaml Command用法介绍

WPF (Windows Presentation Foundation) 中的命令设计模式是一种用于分离用户界面逻辑和业务逻辑的方法。在WPF中，这种模式通过命令接口（如 ICommand）实现，使得用户界面组件（如按钮、菜单项等）可以触发不直…
阅读更多...
工厂自动化中DCS软件

工厂自动化中DCS软件

概述 Monitor.Analog是新一代运行监控系统，是物联网时代数据驱动的智能工厂的神经中枢。通过连接到阿自倍尔专有的在线故障预测系统（该系统利用 AI（人工智能））以及利用来自各个智能设备的监控和诊断数据的系统&#x…
阅读更多...
Unity Meta Quest 一体机开发（六）：HandGrabInteractor 和 HandGrabInteractable 知识点

Unity Meta Quest 一体机开发（六）：HandGrabInteractor 和 HandGrabInteractable 知识点

文章目录 📕教程说明📕HandGrabInteractor⭐HandGrabAPI⭐HandWristPoint⭐GripPoint⭐PinchPoint⭐PinchArea⭐HandGrabVisual⭐HandGrabGlow 📕HandGrabInteractable⭐Support Grab Type⭐Pinch Grab Rules 和 Palm Grab Rules⭐Unselect M…
阅读更多...
最新文章

Copyright @ 2022~2023