Ajax_3 Ajax原理+ （XMLHttpRequest + Promise ）+ 封装一个axios插件库，实现功能。

Ajax 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），它是一种创建交互式网页的技术。Ajax 可以让你在不重新加载网页的情况下更新网页的部分内容。

在这个问题中，我们将使用 XMLHttpRequest 对象和 Promise 来创建一个简单的 Ajax 请求，并将其封装到一个 axios 插件库中。

1. 使用 XMLHttpRequest + Promise 创建一个简单的 Ajax 请求：

function ajax(url, method = 'GET', data = null) {
  const promise = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => reject(new Error("Network Error"));
    if (method === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  });
  return promise;
}
 
// 使用示例
ajax('https://api.example.com/data', 'GET').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

2. 封装上述的 Ajax 请求到一个 axios 插件库中：

// 封装 axios 插件
const axios = {
  get: function(url) {
    return ajax(url, 'GET');
  },
  post: function(url, data) {
    return ajax(url, 'POST', data);
  }
};
 
// 使用示例
axios.get('https://api.example.com/data').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});
 
axios.post('https://api.example.com/data', 'key1=value1&key2=value2').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

在这个示例中，我们创建了一个简单的 axios 对象，它有 get 和 post 方法用来发送 HTTP 请求。这个示例只是为了说明如何封装一个简单的 Ajax 请求库，实际的 axios 库要复杂得多。