前端 JS 调用后端 API：3 种实用方法，轻松搞定前后端数据交互

优质文章学习记录

10 Apr 2026 — 10 min read

前端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 =newXMLHttpRequest();// 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);// 后续业务逻辑：如渲染页面数据}elseif(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('网络错误，请求无法发送');};

优缺点

优点：原生 API，无依赖；兼容性好，支持老旧浏览器（如 IE6+）。
缺点：代码繁琐，需手动处理请求状态、错误和数据解析；不支持 Promise，无法使用 async/await 简化异步代码。

jQuery Ajax

Query 是早期前端开发中常用的 JavaScript 库，它对 XMLHttpRequest 进行了封装，提供了简洁的 Ajax 方法，大幅减少了代码量，让 API 调用更高效。

核心原理

基于 XMLHttpRequest 封装，通过统一的.ajax()方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供.ajax()方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供.ajax()方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供.get()、$.post()等简化方法，降低开发成本。

2. 实现步骤与代码示例

jquary调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

error：请求失败时调用此函数

get请求

<scriptsrc="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引入 <scriptsrc="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);}elseif(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（更简洁的异步写法）asyncfunctiongetUserList(){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=>{// 给所有请求添加Tokenconst 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等状态码仍会 resolveif(!response.ok){// 手动处理HTTP错误thrownewError(`请求失败，状态码：${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){thrownewError(`状态码错误：${response.status}`);}return response.json();}).then(data=>{ console.log('添加成功：', data);}).catch(error=>{ console.error('添加失败：', error);});// 3. 结合async/awaitasyncfunctionaddUser(){try{const response =awaitfetch('https://api.example.com/user/add',{ method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ name:'孙七', age:26})});if(!response.ok){thrownewError(`请求失败：${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 调用的核心逻辑始终是 “发送请求 - 处理响应 - 处理错误”。掌握这三种方法，能让你在不同项目中灵活应对前后端交互需求。你在实际开发中更倾向于使用哪种方法？欢迎在评论区分享你的经验！