JavaScript异步操作详解

最新推荐文章于 2025-03-11 11:23:27 发布

吾二胖

最新推荐文章于 2025-03-11 11:23:27 发布

阅读量562

点赞数 7

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Jarvan_I/article/details/137581241

版权

本文介绍了JavaScript中的异步编程概念，包括回调函数、Promise、async/await以及事件监听，强调了它们在处理耗时操作和提高用户体验中的重要性，重点讲解了现代JavaScript中更推荐的Promise和async/await的使用。

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

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

正文

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

JavaScript是单线程执行的，这意味着一次只能执行一个操作。
JavaScript中的异步操作，通常指的是那些不会阻塞代码执行的操作。
例如网络请求或文件读取，同步执行将导致程序挂起，用户体验变差。

回调函数（Callback）：

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

function fetchData(callback) {
  setTimeout(function() {
    console.log("Data fetched!");
    callback("Data");
  }, 2000);
}

fetchData(function(data) {
  console.log("Callback executed with data: " + data);
});

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);
});

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();

事件监听：

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

// HTML
// <button id="myButton">Click me!</button>

// JavaScript
const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('Button clicked!');
});