前端JS调用后端API的3种实用方法(轻松搞定前后端数据交互)
作者：霁月的小屋
前端js调用后端API的三种方法
在 Web 开发中，前端与后端的协同是实现功能的核心环节，而前端通过 JavaScript 调用后端 API 接口，更是实现数据交互、完成业务逻辑的关键步骤。无论是用户登录时的信息验证，还是页面数据的动态加载，都离不开 API 调用。本文将详细介绍三种主流的前端 JS 调用后端 API 的方法，包括传统的 XMLHttpRequest、简化开发的 jQuery Ajax，以及现代项目常用的 axios 与 fetch，帮助开发者根据项目需求选择合适的方案。
下面主要介绍三种方法来实现前端js对后端API接口的调用：
方法一： XMLHttpRequest
方法二： jQuery和Ajax
方法三： axios、fetch
XMLHttpRequest
XMLHttpRequest（简称 XHR）是浏览器提供的原生 API，也是前端调用后端 API 的 “鼻祖” 级方案。它不依赖任何第三方库，兼容性极强，能在几乎所有主流浏览器中运行，适合需要兼顾老旧浏览器的项目。
（1）创建XMLHttpRequest对象；
（2）建立http连接；
（3）发送请求；
（4）获取返回数据。
1.核心原理
通过创建 XMLHttpRequest 对象，配置请求方式（GET、POST 等）、请求 URL、是否异步等参数，然后发送请求；同时监听对象的状态变化，当请求完成且响应成功时，获取后端返回的数据并进行处理。
Post请求与Get请求主要有两点不同：
①post请求需要设置请求头的格式内容：xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
②post请求参数放在send里面，即请求体
2.实现步骤与代码示例
// 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('网络错误，请求无法发送');
};
3. 优缺点
优点：原生 API，无依赖；兼容性好，支持老旧浏览器（如 IE6+）。
缺点：代码繁琐，需手动处理请求状态、错误和数据解析；不支持 Promise，无法使用 async/await 简化异步代码。
jQuery Ajax
Query 是早期前端开发中常用的 JavaScript 库，它对 XMLHttpRequest 进行了封装，提供了简洁的 Ajax 方法，大幅减少了代码量，让 API 调用更高效。
1. 核心原理
基于 XMLHttpRequest 封装，通过统一的.ajax()方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供.ajax()方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供.ajax()方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供.get()、$.post()等简化方法，降低开发成本。
2. 实现步骤与代码示例
jquary调用ajax方法：
格式：$.ajax({});
参数：
type：请求方式GET/POST
url：请求地址
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
error：请求失败时调用此函数
get请求
<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('请求结束');
}
});
（2）简化方法：.get()与.get()与.get()与.post()
适用于简单的 GET/POST 请求，无需复杂配置：
$.get();
语法：
$.get("请求地址"，"请求参数",function(形参){
})；
$.post();
语法：
$.post("请求地址"，"请求参数",function(形参){
})；
// 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);
});
3. 优缺点
优点：代码简洁，封装完善；内置错误处理和数据解析；支持链式调用。
缺点：需引入 jQuery 库，增加页面加载体积；现代单页应用（如 Vue、React 项目）中，通常不依赖 jQuery，易造成冗余。
axios fetch
随着前端技术的发展，Promise 成为异步编程的标准，axios 和 fetch 应运而生。它们基于 Promise，支持 async/await 语法，更符合现代前端开发习惯，是 Vue、React、Angular 等框架项目的首选。
1. axios：功能强大的 Promise 库
axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境，提供了拦截请求 / 响应、取消请求、自动转换 JSON 数据等丰富功能。
（1）使用步骤
首先需安装 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: '王五',
age: 28
}, {
headers: { 'Content-Type': 'application/json' } // 可选，默认已支持JSON
})
.then(response => {
console.log('添加成功：', response.data);
})
.catch(error => {
console.error('添加失败：', error);
});
// 3. 结合async/await（更简洁的异步写法）
async function getUserList() {
try {
const response = await axios.get('https://api.example.com/user/list', {
params: { page: 1, size: 10 }
});
console.log('用户列表：', response.data);
return response.data;
} catch (error) {
console.error('获取失败：', error);
throw error; // 抛出错误供上层处理
}
}
// 调用函数
getUserList();
// 4. 高级功能：请求拦截器（添加Token等）
axios.interceptors.request.use(
config => {
// 给所有请求添加Token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
2. fetch调用API接口使用方法
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' // 跨域时携带Cookie（可选）
})
.then(response => {
if (!response.ok) {
throw new Error(`状态码错误：${response.status}`);
}
return response.json();
})
.then(data => {
console.log('添加成功：', data);
})
.catch(error => {
console.error('添加失败：', error);
});
// 3. 结合async/await
async function addUser() {
try {
const response = await fetch('https://api.example.com/user/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '孙七', age: 26 })
});
if (!response.ok) {
throw new Error(`请求失败：${response.status}`);
}
const data = await response.json();
console.log('添加成功：', data);
return data;
} catch (error) {
console.error('错误：', error);
throw error;
}
}
// 调用函数
addUser();
fetch 的 “特殊注意点”
不默认拦截 HTTP 错误：即使状态码为 404、500，fetch 仍会进入then回调，需通过response.ok（true表示 200-299 状态码）手动判断。
不自动携带 Cookie：跨域请求时需添加credentials: 'include’配置，同域请求需添加credentials: ‘same-origin’。
无内置超时处理：需手动通过Promise.race()实现超时控制。
3. axios 与 fetch 的优缺点对比
特性axiosfetch依赖需安装第三方库浏览器原生，无依赖HTTP 错误处理自动拦截（404、500 等会 reject）需手动通过 response.ok 判断数据解析自动解析 JSON 数据需手动调用 response.json ()超时控制内置 timeout 配置需手动实现拦截器支持请求 / 响应拦截器需手动封装兼容性支持 IE8+（需配合 es6-promise）仅支持现代浏览器（IE 不支持）
总结与选择建议
三种前端 JS 调用后端 API 的方法各有优劣，选择时需结合项目场景、浏览器兼容性要求和开发效率：
若需兼容老旧浏览器（如 IE6+），或项目无第三方库依赖，XMLHttpRequest是唯一选择；
若项目已引入 jQuery，或需快速实现简单 API 调用，jQuery Ajax能简化代码；
若为现代单页应用（Vue/React/Angular），或需丰富功能（如拦截器、超时控制），axios是最优解；
若项目追求 “零依赖” 且仅支持现代浏览器，fetch可作为轻量选择（需处理其特殊行为）。
前端技术不断迭代，但 API 调用的核心逻辑始终是 “发送请求 - 处理响应 - 处理错误”。掌握这三种方法，能让你在不同项目中灵活应对前后端交互需求。你在实际开发中更倾向于使用哪种方法？欢迎在评论区分享你的经验！