前端框架前置学习 AJAX 同步代码和异步代码,async和await,事件循环,宏任务和微任务

在JavaScript中，AJAX请求可以是同步的或异步的。同步代码会阻塞执行，直到得到结果，而异步代码则不会。async和await关键字是用于编写异步代码的简单方法。事件循环、宏任务和微任务是JavaScript引擎处理异步代码的方式。

AJAX同步代码示例（不推荐，因为它会阻塞UI）:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", false);  // 第三个参数为false表示同步
xhr.send();
var response = xhr.responseText;
console.log(response);

AJAX异步代码示例（推荐使用）:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);  // 第三个参数为true表示异步
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    console.log(response);
  }
};
xhr.send();

async和await示例（异步等待响应）:

async function fetchData() {
  let response = await fetch('http://example.com/data');
  let data = await response.json();
  console.log(data);
}
fetchData();

事件循环: JavaScript运行时包括一个事件循环，用于执行代码、处理事件和执行异步函数的回调。

宏任务和微任务: 宏任务（macrotask）如 setTimeout, setInterval, I/O操作等，微任务（microtask）如 Promise 的回调等，它们被放入相应的队列中，在当前宏任务执行结束后，事件循环会先执行所有微任务，然后再处理下一个宏任务。

console.log('1');
Promise.resolve().then(() => console.log('2'));
setTimeout(() => console.log('3'), 0);
console.log('4');
// 输出顺序为 1, 4, 2, 3