从XHR、Promise到手动封装简易axios

**从XHR、Promise到手动封装简易Axios**

在前端开发中，Ajax请求是必不可少的组成部分。随着技术的进步，我们逐渐使用了XMLHttpRequest（XHR）、Promise等方式来处理异步请求。但是，当我们需要对这些请求进行统一管理、错误处理和缓存时，就会遇到一些问题。因此，我们需要手动封装一个简易Axios库来解决这些问题。

###1. XHR首先，让我们回顾一下XMLHttpRequest（XHR）的基本使用方式：

javascript// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 打开 URL 和方法xhr.open('GET', ' true);

// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求xhr.send();

虽然XHR可以实现基本的Ajax请求，但它存在一些问题，如：

* 每次发送请求都需要创建一个新的XHR对象。
* 需要手动设置请求头和参数。

###2. Promise随着Promise的出现，我们可以使用then()方法来链式调用异步操作。例如：

javascript// 创建 Promise 对象var promise = new Promise((resolve, reject) => {
 // 发送请求 var xhr = new XMLHttpRequest();
 xhr.open('GET', ' true);
 xhr.onload = function() {
 if (xhr.status ===200) {
 resolve(xhr.responseText);
 } else {
 reject(xhr.statusText);
 }
 };
 xhr.onerror = function() {
 reject(xhr.statusText);
 };
 xhr.send();
});

// 使用 then() 方法链式调用promise.then(function(data) {
 console.log('成功:', data);
}, function(error) {
 console.error('失败:', error);
});

虽然Promise可以实现异步请求的链式调用，但它仍然存在一些问题，如：

* 每次发送请求都需要创建一个新的Promise对象。
* 需要手动设置请求头和参数。

###3. 手动封装简易Axios为了解决上述问题，我们可以手动封装一个简易Axios库。例如：

javascript// 创建 Axios 对象var axios = function(config) {
 return new Promise((resolve, reject) => {
 // 发送请求 var xhr = new XMLHttpRequest();
 xhr.open(config.method || 'GET', config.url, true);
 xhr.setRequestHeader('Content-Type', 'application/json');
 xhr.onload = function() {
 if (xhr.status ===200) {
 resolve(xhr.responseText);
 } else {
 reject(xhr.statusText);
 }
 };
 xhr.onerror = function() {
 reject(xhr.statusText);
 };
 xhr.send(config.data || null);
 });
};

// 使用 Axios 对象发送请求axios({
 method: 'GET',
 url: ' />}).then(function(data) {
 console.log('成功:', data);
}, function(error) {
 console.error('失败:', error);
});

通过手动封装一个简易Axios库，我们可以实现以下功能：

* 统一管理Ajax请求。
* 自动设置请求头和参数。
* 支持链式调用异步操作。

###4. 错误处理在实际开发中，错误处理是非常重要的。我们可以通过try-catch语句来捕捉异常：

javascript// 使用 Axios 对象发送请求axios({
 method: 'GET',
 url: ' />}).then(function(data) {
 console.log('成功:', data);
}, function(error) {
 console.error('失败:', error);
});

try {
 axios({
 method: 'GET',
 url: ' /> }).then(function(data) {
 console.log('成功:', data);
 }, function(error) {
 console.error('失败:', error);
 });
} catch (error) {
 console.error('错误:', error);
}

通过try-catch语句，我们可以捕捉异常并进行错误处理。

###5. 缓存在实际开发中，缓存也是非常重要的。我们可以通过localStorage或sessionStorage来实现缓存：

javascript// 使用 Axios 对象发送请求axios({
 method: 'GET',
 url: ' />}).then(function(data) {
 console.log('成功:', data);
}, function(error) {
 console.error('失败:', error);
});

try {
 axios({
 method: 'GET',
 url: ' /> }).then(function(data) {
 console.log('成功:', data);
 }, function(error) {
 console.error('失败:', error);
 });
} catch (error) {
 console.error('错误:', error);
}

// 使用 localStorage 缓存localStorage.setItem('data', '缓存数据');

try {
 axios({
 method: 'GET',
 url: ' /> }).then(function(data) {
 console.log('成功:', data);
 }, function(error) {
 console.error('失败:', error);
 });
} catch (error) {
 console.error('错误:', error);
}

// 使用 sessionStorage 缓存sessionStorage.setItem('data', '缓存数据');

try {
 axios({
 method: 'GET',
 url: ' /> }).then(function(data) {
 console.log('成功:', data);
 }, function(error) {
 console.error('失败:', error);
 });
} catch (error) {
 console.error('错误:', error);
}

通过localStorage或sessionStorage，我们可以实现缓存功能。

###6. 总结在本文中，我们从XMLHttpRequest（XHR）到Promise再到手动封装简易Axios库，介绍了Ajax请求的基本使用方式、链式调用异步操作和错误处理。同时，我们也介绍了缓存功能的实现。通过这些内容，我们可以更好地理解Ajax请求的原理和实践。

###7. 参考* [XMLHttpRequest]( />* [Promise]( />* [Axios](