JavaScript异步操作详解

文章的更新路线：JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题（HTML基础知识和CSS基础知识已经更新完毕）

正文

异步操作允许在执行其他任务的同时执行耗时操作，当任务完成时，通过回调函数、Promise、async/await或事件监听来处理结果。

• JavaScript是单线程执行的，这意味着一次只能执行一个操作。

• JavaScript中的异步操作，通常指的是那些不会阻塞代码执行的操作。

• 例如网络请求或文件读取，同步执行将导致程序挂起，用户体验变差。

1. 回调函数（Callback）：

   • 回调函数是最基本的异步处理方式。您将一个函数作为参数传递给异步操作，当操作完成时，调用此函数。
   • 示例：

   function fetchData(callback) {
     setTimeout(function() {
       console.log("Data fetched!");
       callback("Data");
     }, 2000);
   }
   
   fetchData(function(data) {
     console.log("Callback executed with data: " + data);
   });
   

2. Promise：

   • Promise是一种更现代、更清晰的异步处理方式。Promise有三个状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。
   • 示例：

   function fetchData() {
     return new Promise(function(resolve, reject) {
       setTimeout(function() {
         console.log("Data fetched!");
         resolve("Data");
       }, 2000);
     });
   }
   
   fetchData().then(function(data) {
     console.log("Promise resolved with data: " + data);
   });
   

3. async/await：

   • async/await是ES2017引入的语法糖，使异步代码看起来更像同步代码，更易于理解。
   • 示例：

   async function fetchData() {
     return new Promise(function(resolve, reject) {
       setTimeout(function() {
         console.log("Data fetched!");
         resolve("Data");
       }, 2000);
     });
   }
   
   async function fetchDataWrapper() {
     const data = await fetchData();
     console.log("Data fetched with async/await: " + data);
   }
   
   fetchDataWrapper();
   

4. 事件监听：

   • 事件监听是一种在异步操作中响应用户交互或浏览器事件的方式。通过监听事件，可以在事件发生时执行相应的处理函数。
   • 示例：

   // HTML
   // <button id="myButton">Click me!</button>
   
   // JavaScript
   const button = document.getElementById('myButton');
   
   button.addEventListener('click', function() {
     console.log('Button clicked!');
   });
   

这些都是常见的异步编程方式，选择其中之一取决于项目的要求和个人偏好。在现代JavaScript中，Promise和async/await是更常用的选择，因为它们提供了更清晰、可读性更好的代码结构。

结束语

今天分享，有需要的自行获取（回复 11）。

本文由 mdnice 多平台发布