Ajax 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），它是一种创建交互式网页的技术。Ajax 可以让你在不重新加载网页的情况下更新网页的部分内容。
在这个问题中，我们将使用 XMLHttpRequest 对象和 Promise 来创建一个简单的 Ajax 请求，并将其封装到一个 axios 插件库中。
- 使用 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);
});
- 封装上述的 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 库要复杂得多。