Ajax、Fetch 和 Axios 的对比介绍

老婆出轨 · 2025-3-10 01:11:42

一、Ajax、Fetch 和 Axios 的介绍

1. Ajax（Asynchronous JavaScript and XML）

概述: Ajax 是一种用于在不重新加载整个页面的环境下与服务器交换数据的技术。它使网页可以或许向服务器发送哀求并处理响应，从而创建动态和交互性的用户界面。
特点:

异步: Ajax 哀求是异步进行的，这意味着欣赏器可以继承处理用户操作，而不必等待服务器的响应。
支持多种格式: 除了 XML，还可以处理 JSON、HTML 以及纯文本等格式的数据。
利用 XMLHttpRequest: 最初，Ajax 是基于 XMLHttpRequest 对象发起 HTTP 哀求。现今，可以利用 fetch API 作为今世替换方案，提供更友爱的接口。

应用:

动态加载数据（如分页加载、无穷滚动等）
更新部分页面内容（如表单提交后更新数据）
实现自动搜刮建议等功能

2. Fetch API

概述: Fetch API 是新一代的用来发起网络哀求的接口，旨在替换传统的 XMLHttpRequest。它基于 Promise，提供更简洁和易于理解的接口。
特点:

基于 Promise: Fetch API 返回一个 Promise，使得处理异步哀求更加简单和优雅。
简化的语法: 语法更简洁，支持配置哀求的各种选项，如方法、头部等。
可扩展性: 容易与其他今世的 JavaScript 特性（如 async/await）配合利用。

应用:

适用于获取资源、发送数据到服务器、处理响应等。
适适用于前端开辟，如单页面应用（SPA）中的数据哀求。

留意:

Fetch API 不会自动处理 HTTP 错误，需要手动检查响应的状态。

3. Axios

概述: Axios 是一个基于 Promise 的 HTTP 客户端，适用于欣赏器和 Node.js。它封装了 XMLHttpRequest 和 fetch API，提供了简单的 API 进行网络哀求。
特点:

支持防止 CSRF: Axios 提供了自动发送 CSRF token 的功能。
拦截器: 支持哀求和响应的拦截器，可以在哀求发出前或响应到达前进行处理。
支持转换哀求和响应数据: 可以很容易地对哀求和响应进行转换。
哀求和响应的取消: 支持取消哀求的功能。

应用:

适用于大多数基于 JavaScript 的前端框架（如 Vue、React 等）进行网络哀求。
得当需要进行复杂哀求处理的应用场景，如需要处理多个哀求、响应拦截以及错误处理等。

二、对比区别

Ajax 是一种较为早期的技术，提供了很大的灵活性，但也带来了复杂性。
Fetch 作为今世 API，具有更简洁的语法和基于 Promise 的特性，使得处理异步哀求变得更加方便，不过在错误处理上有些不足。
Axios 在这两者之上，提供了一整套高级功能，尤其得当需要处理大量 HTTP 哀求的项目，但需要依赖库的额外引入。

三、哀求的流程

1.Ajax的哀求流程

创建 XMLHttpRequest 对象：利用 JavaScript 创建一个 XMLHttpRequest 对象，这是发送哀求和处理响应的核心。
1. var xhr = new XMLHttpRequest();
复制代码
配置哀求：利用 open 方法配置哀求，包罗哀求的方法（GET 或 POST）、哀求的 URL，以及是否异步。
1. xhr.open('GET', 'https://api.example.com/data', true);
复制代码
设置哀求头（可选）：如果需要，利用 setRequestHeader 方法设置哀求头，例如在发送 POST 哀求时指定内容类型。
1. xhr.setRequestHeader('Content-Type', 'application/json');
复制代码
定义回调函数：利用 onreadystatechange 或 onload 属性定义一个回调函数，当哀求状态改变时会调用这个函数。可以根据 xhr.readyState 和 xhr.status 来判定哀求是否乐成。
1. xhr.onreadystatechange = function() {
2. if (xhr.readyState === 4 && xhr.status === 200) {
3. var response = JSON.parse(xhr.responseText);
4. console.log(response);
5. }
6. };
复制代码
发送哀求：调用 send 方法发送哀求。对于 POST 哀求，可以在 send 方法中传递要发送的数据。
1. xhr.send();
复制代码
处理响应：在回调函数中处理服务器返回的数据。根据需要剖析数据并更新页面的内容。

完备的 Ajax 哀求示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();

复制代码

2.Fetch 的哀求流程

发起哀求：利用 fetch 函数发起一个哀求。fetch 可以接受一个 URL 字符串和一个可选的配置对象。
1. fetch('https://api.example.com/data')
2. .then(response => {
3. // 处理响应
4. })
5. .catch(error => {
6. // 处理错误
7. });
复制代码
配置哀求（可选）：如果需要带有自定义方法、头部或哀求体的哀求，可以传递一个配置对象。
1. fetch('https://api.example.com/data', {
2. method: 'POST',
3. headers: {
4. 'Content-Type': 'application/json'
5. },
6. body: JSON.stringify({ key: 'value' })
7. })
8. .then(response => {
9. // 处理响应
10. })
11. .catch(error => {
12. // 处理错误
13. });
复制代码
处理响应： Fetch 哀求返回一个 Promise，包含 Response 对象。您可以利用 .then() 方法处理响应。在处理响应时，可以检查 response.ok 属性来确定哀求是否乐成。
1. fetch('https://api.example.com/data')
2. .then(response => {
3. if (!response.ok) {
4. throw new Error('网络响应异常');
5. }
6. return response.json(); // 解析 JSON 数据
7. })
8. .then(data => {
9. console.log(data); // 处理获取到的数据
10. })
11. .catch(error => {
12. console.error('请求失败:', error);
13. });
复制代码
处理错误：利用 .catch() 来捕捉哀求过程中出现的错误，例如网络错误或剖析错误。

完备的 Fetch 哀求示例：

fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
return response.json(); // 将响应解析为 JSON
})
.then(data => {
console.log(data); // 处理获取到的数据
})
.catch(error => {
console.error('请求失败:', error); // 处理错误
});

复制代码

通过以上步调，您可以利用 Fetch API 实现网络哀求，从服务器异步获取数据并处理响应。
3.Axios 的哀求流程

Axios 是一个基于 Promise 的 HTTP 客户端，可以用在欣赏器和 Node.js 中。它简化了发送 HTTP 哀求的过程，并提供了许多功能，例如哀求和响应拦截、取消哀求等。以下是利用 Axios 进行哀求的基本流程：

安装 Axios：起首，确保您已经安装了 Axios。可以利用 npm 或 yarn 安装。
1. npm install axios
复制代码
或
1. yarn add axios
复制代码
导入 Axios：在 JavaScript 文件中导入 Axios。
1. import axios from 'axios';
复制代码
发起哀求：利用 axios 提供的函数（如 axios.get, axios.post 等）发起哀求。可以传入 URL 和可选的配置对象。
1. axios.get('https://api.example.com/data')
2. .then(response => {
3. // 处理响应
4. console.log(response.data);
5. })
6. .catch(error => {
7. // 处理错误
8. console.error('请求失败:', error);
9. });
复制代码
配置哀求（可选）：可以在哀求中添加配置选项，例如哀求方法、哀求头、哀求体等。
1. axios.post('https://api.example.com/data', {
2. key: 'value'
3. }, {
4. headers: {
5. 'Content-Type': 'application/json'
6. }
7. })
8. .then(response => {
9. // 处理响应
10. console.log(response.data);
11. })
12. .catch(error => {
13. // 处理错误
14. console.error('请求失败:', error);
15. });
复制代码
处理响应：在 .then() 中处理响应。Axios 会自动将 JSON 响应剖析为 JavaScript 对象，因此可以直接利用 response.data 获取数据。
处理错误：利用 .catch() 来捕捉哀求过程中的错误，例如网络异常或哀求失败等。

完备的 Axios 哀求示例：

import axios from 'axios';
axios.get('https://api.example.com/data') .then(response => { console.log(response.data); // 处理乐成响应的数据 }) .catch(error => { console.error('哀求失败:', error); // 处理错误 });

复制代码

通过以上步调，您可以利用 Axios 进行网络哀求，从服务器异步获取数据并处理响应。Axios 提供了更丰富的功能，您可以根据需求进一步探索，如哀求拦截、响应拦截等。

四、各自封装案例

1.Ajax 封装示例

class Ajax { // 封装GET哀求 static get(url, params = {}) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); const queryString = this.createQueryString(params); xhr.open('GET', `${url}?${queryString}`, true); xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send();
}); } // 封装POST哀求 static post(url, data = {}) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send(JSON.stringify(data)); }); } // 封装PUT哀求 static put(url, data = {}) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send(JSON.stringify(data)); }); } // 封装DELETE哀求 static delete(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('DELETE', url, true); xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send();
}); } // 封装文件上传 static upload(url, file) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('file', file); xhr.open('POST', url, true); xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send(formData); }); } // 封装文件下载 static download(url) { const link = document.createElement('a'); link.href = url; link.download = ''; document.body.appendChild(link); link.click(); document.body.removeChild(link); } // 创建查询字符串 static createQueryString(params) { const str = []; for (let p in params) { if (params.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p])); } } return str.join('&'); }}// GET哀求示例Ajax.get('https://api.example.com/data', { search: 'test' }) .then(response => console.log(response)) .catch(error => console.error(error));// POST哀求示例Ajax.post('https://api.example.com/data', { name: 'test' }) .then(response => console.log(response)) .catch(error => console.error(error));// 上传文件示例const fileInput = document.querySelector('input[type="file"]');fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; Ajax.upload('https://api.example.com/upload', file) .then(response => console.log(response)) .catch(error => console.error(error));});// 下载文件示例Ajax.download('https://api.example.com/file.zip');

复制代码

2.Fetch 封装示例

class FetchAPI {
// 封装GET请求
static async get(url, params = {}) {
const queryString = this.createQueryString(params);
const response = await fetch(`${url}?${queryString}`);
if (!response.ok) {
throw new Error(`请求失败: ${response.statusText}`);
}
return await response.json();
}
// 封装POST请求
static async post(url, data = {}) {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(`请求失败: ${response.statusText}`);
}
return await response.json();
}
// 封装PUT请求
static async put(url, data = {}) {
const response = await fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(`请求失败: ${response.statusText}`);
}
return await response.json();
}
// 封装DELETE请求
static async delete(url) {
const response = await fetch(url, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error(`请求失败: ${response.statusText}`);
}
return await response.json();
}
// 封装文件上传
static async upload(url, file) {
const formData = new FormData();
formData.append('file', file);
const response = await fetch(url, {
method: 'POST',
body: formData,
});
if (!response.ok) {
throw new Error(`请求失败: ${response.statusText}`);
}
return await response.json();
}
// 封装文件下载
static download(url) {
const link = document.createElement('a');
link.href = url;
link.download = '';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 创建查询字符串
static createQueryString(params) {
const str = [];
for (const key in params) {
if (params.hasOwnProperty(key)) {
str.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
}
}
return str.join('&');
}
}
// GET请求示例
FetchAPI.get('https://api.example.com/data', { search: 'test' })
.then(response => console.log(response))
.catch(error => console.error(error));
// POST请求示例
FetchAPI.post('https://api.example.com/data', { name: 'test' })
.then(response => console.log(response))
.catch(error => console.error(error));
// 上传文件示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
try {
const response = await FetchAPI.upload('https://api.example.com/upload', file);
console.log(response);
} catch (error) {
console.error(error);
}
});
// 下载文件示例
FetchAPI.download('https://api.example.com/file.zip');

复制代码

3.Axios 封装示例

import axios from 'axios';
class AxiosAPI { // 配置默认的 Axios 实例 static instance = axios.create({ baseURL: '', // 填写你的底子 URL timeout: 10000, // 哀求超时 }); // 封装GET哀求 static async get(url, params = {}) { try { const response = await this.instance.get(url, { params }); return response.data; } catch (error) { throw new Error(`哀求失败: ${error.response ? error.response.statusText : error.message}`); } } // 封装POST哀求 static async post(url, data = {}) { try { const response = await this.instance.post(url, data); return response.data; } catch (error) { throw new Error(`哀求失败: ${error.response ? error.response.statusText : error.message}`); } } // 封装PUT哀求 static async put(url, data = {}) { try { const response = await this.instance.put(url, data); return response.data; } catch (error) { throw new Error(`哀求失败: ${error.response ? error.response.statusText : error.message}`); } } // 封装DELETE哀求 static async delete(url) { try { const response = await this.instance.delete(url); return response.data; } catch (error) { throw new Error(`哀求失败: ${error.response ? error.response.statusText : error.message}`); } } // 封装文件上传 static async upload(url, file) { const formData = new FormData(); formData.append('file', file); try { const response = await this.instance.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); return response.data; } catch (error) { throw new Error(`哀求失败: ${error.response ? error.response.statusText : error.message}`); } } // 封装文件下载 static download(url) { const link = document.createElement('a'); link.href = url; link.download = ''; document.body.appendChild(link); link.click(); document.body.removeChild(link); }}// GET哀求示例AxiosAPI.get('/api/example', { search: 'test' }) .then(response => console.log(response)) .catch(error => console.error(error));// POST哀求示例AxiosAPI.post('/api/example', { name: 'test' }) .then(response => console.log(response)) .catch(error => console.error(error));// 上传文件示例const fileInput = document.querySelector('input[type="file"]');fileInput.addEventListener('change', async (event) => { const file = event.target.files[0]; try { const response = await AxiosAPI.upload('/api/upload', file); console.log(response); } catch (error) { console.error(error); }});// 下载文件示例AxiosAPI.download('/api/file.zip');

复制代码

四、实际开辟留意事项

错误处理：在利用 Ajax、Fetch 或 Axios 时，确保公道捕捉和处理错误，以便给用户清晰的反馈。
安全性：确保利用 HTTPS 进行数据传输，掩护用户数据不被盗取。
跨域哀求：如果你的哀求涉及跨域，确保服务器端的 CORS 配置允许当前哀求的源进行访问。
哀求头管理：在哀求中公道配置哀求头，例如设置 Content-Type、添加认证信息等。
网络性能优化：公道利用哀求的缓存机制、归并哀求等手段，减少服务器负担和用户等待时间。
数据验证和清洗：在发送哀求的同时，对用户输入的数据进行验证和清洗，避免不必要的错误。

通过公道利用和封装这些工具，可以显着提拔网络哀求的开辟效率和用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

用户名		自动登录	找回密码
密码			立即注册

Ajax、Fetch 和 Axios 的对比介绍

0 个回复

快速回复

楼主热帖

标签云