JavaScript大前端
前端 JS 调用后端 API 的三种常用方法
前端 JavaScript 调用后端 API 的三种主流方法：原生 XMLHttpRequest、jQuery Ajax 以及现代方案 axios 和 fetch。详细对比了它们的原理、代码实现及优缺点。XMLHttpRequest 兼容性好但代码繁琐；jQuery 简化了开发但需引入库；axios 功能强大支持拦截器，fetch 为原生轻量级选择。开发者应根据项目需求、浏览器兼容性要求及框架环境选择合适的方案。
前端 JavaScript 调用后端 API 的三种主流方法：原生 XMLHttpRequest、jQuery Ajax 以及现代方案 axios 和 fetch。详细对比了它们的原理、代码实现及优缺点。XMLHttpRequest 兼容性好但代码繁琐；jQuery 简化了开发但需引入库；axios 功能强大支持拦截器，fetch 为原生轻量级选择。开发者应根据项目需求、浏览器兼容性要求及框架环境选择合适的方案。
在 Web 开发中，前端与后端的协同是实现功能的核心环节，而前端通过 JavaScript 调用后端 API 接口，更是实现数据交互、完成业务逻辑的关键步骤。无论是用户登录时的信息验证，还是页面数据的动态加载，都离不开 API 调用。本文将详细介绍三种主流的前端 JS 调用后端 API 的方法，包括传统的 XMLHttpRequest、简化开发的 jQuery Ajax，以及现代项目常用的 axios 与 fetch，帮助开发者根据项目需求选择合适的方案。
XMLHttpRequest（简称 XHR）是浏览器提供的原生 API，也是前端调用后端 API 的'鼻祖'级方案。它不依赖任何第三方库，兼容性极强，能在几乎所有主流浏览器中运行，适合需要兼顾老旧浏览器的项目。
通过创建 XMLHttpRequest 对象，配置请求方式（GET、POST 等）、请求 URL、是否异步等参数，然后发送请求；同时监听对象的状态变化，当请求完成且响应成功时，获取后端返回的数据并进行处理。
Post 请求与 Get 请求主要有两点不同：
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 2. 配置请求（请求方法、URL、是否异步）
// GET 请求：若需传参，可在 URL 后拼接（如"?id=1&name=test"）
xhr.open('GET', 'https://api.example.com/user/list', true);
// 3. 设置请求头（可选，根据后端要求配置，如 POST 请求传 JSON 需设置）
// 若为 POST 请求，需添加：xhr.setRequestHeader('Content-Type', 'application/json');
// 4. 监听请求状态变化，处理响应
xhr.onreadystatechange = function() {
// readyState=4 表示请求已完成，status=200 表示响应成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析后端返回的 JSON 数据（若返回非 JSON 则直接用 xhr.responseText）
const responseData = JSON.parse(xhr.responseText);
console.log('请求成功，返回数据：', responseData);
// 后续业务逻辑：如渲染页面数据
} else if (xhr.readyState === 4) {
// 请求完成但响应失败（如 404、500 错误）
console.error('请求失败，状态码：', xhr.status);
}
};
// 5. 发送请求（POST 请求需传参，如 xhr.send(JSON.stringify({id: 1}))）
xhr.send();
// 6. 处理网络错误
xhr.onerror = function() {
console.error('网络错误，请求无法发送');
};
jQuery 是早期前端开发中常用的 JavaScript 库，它对 XMLHttpRequest 进行了封装，提供了简洁的 Ajax 方法，大幅减少了代码量，让 API 调用更高效。
基于 XMLHttpRequest 封装，通过统一的 .ajax() 方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供 .get()、.post() 等简化方法，降低开发成本。
jQuery 调用 ajax 方法：
$.ajax({})type：请求方式 GET/POSTurl：请求地址async：是否异步，默认是 true 表示异步data：发送到服务器的数据dataType：预期服务器返回的数据类型contentType：设置请求头error：请求失败时调用此函数引入 jQuery 库：
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
完整调用示例：
$.ajax({
url: 'https://api.example.com/user/add', // 请求 URL
type: 'POST', // 请求方法（GET/POST/PUT/DELETE 等）
contentType: 'application/json', // 发送数据的格式
data: JSON.stringify({ // 发送给后端的数据
name: '张三',
age: 25
}),
dataType: 'json', // 预期后端返回的数据格式（自动解析）
success: function(response) { // 请求成功回调
console.log('添加用户成功：', response);
},
error: function(xhr, status, error) { // 请求失败回调
console.error('添加用户失败：', status, error);
},
complete: function() { // 请求完成（无论成功/失败）回调
console.log('请求结束');
}
});
简化方法：.get() 与 .post()
适用于简单的 GET/POST 请求，无需复杂配置：
// GET 请求：获取用户列表
$.get('https://api.example.com/user/list', { page: 1, size: 10 }, function(response) {
console.log('用户列表：', response);
}, 'json').fail(function(error) {
console.error('获取失败：', error);
});
// POST 请求：添加用户
$.post('https://api.example.com/user/add', { name: '李四', age: 30 }, function(response) {
console.log('添加成功：', response);
}, 'json').fail(function(error) {
console.error('添加失败：', error);
});
随着前端技术的发展，Promise 成为异步编程的标准，axios 和 fetch 应运而生。它们基于 Promise，支持 async/await 语法，更符合现代前端开发习惯，是 Vue、React、Angular 等框架项目的首选。
axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境，提供了拦截请求 / 响应、取消请求、自动转换 JSON 数据等丰富功能。
使用步骤：首先需安装 axios（npm/yarn）或通过 CDN 引入。
# npm 安装
npm install axios
# 或 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
基础请求示例：
// 1. 基础 GET 请求（带参数）
axios.get('https://api.example.com/user/list', {
params: { page: 1, size: 10 } // 自动拼接为 URL 参数
}).then(function(response) {
console.log('请求成功：', response.data); // response.data 直接是解析后的 JSON
}).catch(function(error) {
// 统一处理错误（包括网络错误、404、500 等）
if (error.response) {
// 有响应但状态码错误
console.error('响应错误，状态码：', error.response.status);
console.error('错误数据：', error.response.data);
} else if (error.request) {
// 无响应（网络错误）
console.error('网络错误，无响应：', error.request);
} else {
// 请求配置错误
console.error('请求配置错误：', error.message);
}
});
// 2. 基础 POST 请求（传 JSON 数据）
axios.post('https://api.example.com/user/add', {
name: ,
:
}, {
: {
:
}
}).( {
.(, response.);
}).( {
.(, error);
});
() {
{
response = axios.(, {
: { : , : }
});
.(, response.);
response.;
} (error) {
.(, error);
error;
}
}
();
axios...( {
token = .();
(token) {
config.. = ;
}
config;
}, {
.(error);
});
fetch 是 ES6 引入的浏览器原生 API，基于 Promise，无需依赖第三方库，设计更简洁，是现代浏览器的原生选择。但需注意其部分'特殊行为'（如不默认拦截 HTTP 错误状态码）。
// 1. 基础 GET 请求
fetch('https://api.example.com/user/list?page=1&size=10')
.then(function(response) {
// 注意：fetch 仅在网络错误时 reject，404、500 等状态码仍会 resolve
if (!response.ok) {
// 手动处理 HTTP 错误
throw new Error(`请求失败，状态码：${response.status}`);
}
// 解析响应数据（支持 json()、text()、blob() 等）
return response.json();
})
.then(function(data) {
console.log('用户列表：', data);
})
.catch(function(error) {
console.error('请求错误：', error.message);
});
// 2. 基础 POST 请求（传 JSON 数据）
fetch('https://api.example.com/user/add', {
method: 'POST', // 请求方法
headers: {
'Content-Type': 'application/json' // 数据格式
},
body: JSON.stringify({ name: '赵六', age: 32 }), // 发送的数据（需转为字符串）
credentials: 'include'
})
.( {
(!response.) {
();
}
response.();
})
.( {
.(, data);
})
.( {
.(, error);
});
() {
{
response = (, {
: ,
: {
:
},
: .({ : , : })
});
(!response.) {
();
}
data = response.();
.(, data);
data;
} (error) {
.(, error);
error;
}
}
();
fetch 的特殊注意点：
response.ok（true 表示 200-299 状态码）手动判断。credentials: 'include' 配置，同域请求需添加 credentials: 'same-origin'。Promise.race() 实现超时控制。| 特性 | axios | fetch |
|---|---|---|
| 依赖 | 需安装第三方库 | 浏览器原生，无依赖 |
| HTTP 错误处理 | 自动拦截（404、500 等会 reject） | 需手动通过 response.ok 判断 |
| 数据解析 | 自动解析 JSON 数据 | 需手动调用 response.json() |
| 超时控制 | 内置 timeout 配置 | 需手动实现 |
| 拦截器 | 支持请求/响应拦截器 | 需手动封装 |
| 兼容性 | 支持 IE8+（需配合 es6-promise） | 仅支持现代浏览器（IE 不支持） |
三种前端 JS 调用后端 API 的方法各有优劣，选择时需结合项目场景、浏览器兼容性要求和开发效率：
前端技术不断迭代，但 API 调用的核心逻辑始终是'发送请求 - 处理响应 - 处理错误'。掌握这三种方法，能让你在不同项目中灵活应对前后端交互需求。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online