你的TS文件里也应该来一个Ajax！

2023-01-11 07:51:09

AJAX：提升网页交互性的革命性技术

什么是 AJAX？

AJAX，全称 Asynchronous JavaScript and XML，是一种变革性的网页开发技术，彻底改变了用户与网站之间的互动方式。它允许网页在不重新加载整个页面的情况下，与服务器进行实时通信。这显著提高了网页的响应速度和动态性，为用户带来了更流畅、更身临其境般的体验。

异步编程：XMLHttpRequest 和 fetch

AJAX 的核心是异步编程，它允许网页在后台处理与服务器的通信，同时页面继续响应用户的输入。这使得网页能够执行复杂的任务，例如更新部分内容、验证输入或进行实时通信，而不会中断用户体验。

XMLHttpRequest 和 fetch 都是浏览器提供的 API，用于执行异步编程。XMLHttpRequest 是一种传统的技术，而 fetch 则是一种较新的、更现代的替代方案。

XMLHttpRequest

XMLHttpRequest 是一个内置于浏览器的对象，它可以发送和接收 HTTP 请求。它支持各种请求方法（例如 GET、POST 和 PUT），并且可以设置请求头和请求体。

fetch

fetch 是 ES6 中引入的异步编程 API。它比 XMLHttpRequest 更简单、更易用，并且支持更丰富的功能。fetch 可以发送和接收 HTTP 请求，并支持各种请求方法。此外，fetch 还支持设置请求头和请求体，以及对响应数据进行解析。

将 AJAX 封装到 TypeScript 中

TypeScript 是一种强大的语言，可以帮助我们简化复杂的任务。我们可以利用 TypeScript，将 AJAX 请求封装成一个通用的函数，从而降低异步数据传输的复杂性。

function ajax(url: string, options?: RequestInit) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options?.method || "GET", url);
    if (options?.timeout) {
      xhr.timeout = options.timeout;
    }
    if (options?.body) {
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(JSON.stringify(options.body));
    } else {
      xhr.send();
    }
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
  });
}