异步javascript

官方文档

简介

异步 JavaScript 是指程序的执行流程不是严格按照代码的顺序进行的,而是允许某些操作在不阻塞主线程的情况下并行执行。这与同步执行模式形成鲜明对比,在同步执行中,程序会一直等待某个操作完成才会继续向下执行。

异步 JavaScript 的主要体现形式

事件监听器

事件监听器允许程序在特定事件发生时执行回调函数,而不需要阻塞主线程。下面是一个简单的事件监听器示例:

// 点击按钮时执行回调函数
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});


console.log('This message will be logged first.');

在这个例子中,即使点击按钮的操作还没有完成,主线程也会继续向下执行,打印出"This message will be logged first."。

定时器函数

setTimeout() 和 setInterval() 函数允许程序在指定的延迟后执行某个函数,而不会阻塞主线程的执行。下面是一个使用 setTimeout() 的示例:

console.log('This message will be logged first.');

setTimeout(function() {
  console.log('This message will be logged after 2 seconds.');
}, 2000);

console.log('This message will be logged second.');

在这个例子中,尽管 setTimeout() 函数需要 2 秒钟才能执行完毕,但主线程仍然可以继续向下执行,打印出"This message will be logged second."。

AJAX 请求

AJAX 技术允许程序在不刷新页面的情况下向服务器发送异步请求并获取数据。下面是一个使用 AJAX 的示例:

// 使用 XMLHttpRequest 对象发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response data:', xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Network error.');
};
xhr.send();

console.log('This message will be logged first.');

在这个例子中,AJAX 请求是异步执行的,主线程不会因为等待请求完成而被阻塞。

Promise 和 async/await

Promise 对象和 async/await 语法糖为异步编程提供了更加优雅和易于管理的方式。下面是一个使用 Promise 的示例:

function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟一个异步操作,如网络请求
    setTimeout(() => {
      resolve({ data: 'Hello, async world!' });
    }, 2000);
  });
}

fetchData()
  .then((result) => {
    console.log(result.data); // 输出: "Hello, async world!"
  })
  .catch((error) => {
    console.error('Error:', error);
  });

console.log('This message will be logged first.');

在这个例子中,fetchData() 函数返回一个 Promise 对象,模拟了一个异步操作。在 Promise 的 then() 方法中,我们处理了异步操作成功的结果,在 catch() 方法中,我们处理了异步操作失败的情况。值得注意的是,尽管异步操作需要 2 秒才能完成,但主线程仍然可以继续执行其他任务,如最后一行的输出。