JavaScript异步操作详解

吾二胖
57 阅读2分钟

文章的更新路线：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多平台发布

avatar
文章
阅读
粉丝