Ajax、Fetch 和 Axios 的对比介绍 - IT评测·应用市场-qidao123.com

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();

复制代码

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); // 处理错误
});

复制代码

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

复制代码

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');

复制代码

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');

复制代码

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');

复制代码