前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await

在前端中，使用XMLHttpRequest进行异步通信是基于事件的编程的一种形式。随后jQuery等库封装了AJAX，使其更易于使用，并引入了Promise来处理异步操作。最后，ES6引入了async/await，这是基于Promise的语法糖，使得异步代码看起来像同步代码。

以下是这些技术的简单概述和示例代码：

1. XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

2. jQuery AJAX

$.ajax({
  url: "url",
  type: "GET",
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error){
    console.error(error);
  }
});

3. Promise

new Promise((resolve, reject) => {
  $.ajax({
    url: "url",
    type: "GET",
    success: resolve,
    error: reject
  });
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

4. async/await (需要Promise支持)

async function fetchData() {
  try {
    let response = await $.ajax({
      url: "url",
      type: "GET"
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

这些方法都可以用来在前端进行异步编程，但async/await提供了更直观和易于使用的语法，特别适合处理多个异步调用和复杂的异步流程。