第一步：先把接口文档“翻译”成大白话，别急着写代码
很多人调不通接口，不是代码写错了，而是一开始就没看懂文档。后端给的接口文档通常长这样：POST /api/user/login，请求体{username: string, password: string}，响应{code: 200, data: {token: string}}。你可能会说“每个字我都认识，连起来就不知道啥意思”，别急，我教你怎么把它“翻译”成你能懂的操作指南。
先看请求地址，比如/api/user/login，完整地址其实是“后端服务器地址+这个路径”。举个例子，如果后端服务器是http://localhost:3000，那完整请求地址就是http://localhost:3000/api/user/login。去年带实习生小张的时候，他直接拿/api/user/login当地址调，结果报404，问我“是不是后端接口没开”，我一看地址就笑了——他把“服务器地址”这茬给忘了。所以第一步，先让后端给你“接口基础地址”，比如开发环境通常是http://localhost:端口号，生产环境是https://域名，把这个基础地址和文档里的路径拼起来，才是能调通的完整地址。
再看请求方法，最常见的就是GET和POST。你不用记复杂概念，记住两个场景就行：如果是“获取数据”（比如列表、详情），就用GET；如果是“提交数据”（比如登录、注册、保存表单），就用POST。就像你去便利店，想买瓶水直接说“要可乐”（GET，拿东西），但点外卖得填地址、电话（POST，提交信息）。MDN文档里也说过，GET请求的参数会拼在URL里，适合简单数据；POST的参数藏在“请求体”里，适合密码、表单这类复杂或敏感数据（MDN关于HTTP方法的说明，nofollow）。之前有个同事做登录功能，用GET传密码，结果URL里直接显示password=123456，差点被测试同事吐槽到离职，这点一定要注意。
然后是参数怎么传，文档里通常会写“路径参数”“查询参数”“请求体参数”，听着复杂，其实就是“参数放在哪儿”的问题。我做了个表格，你一看就明白：
| 参数类型 | 放在哪儿 | 例子 | 适用场景 |
|---|---|---|---|
| 路径参数 | URL路径里，用:标识 | /api/user/:id → /api/user/123 | 获取单个详情（如用户ID=123的信息） |
| 查询参数 | URL末尾，用?和&连接 | /api/list?page=1&size=10 | 分页、筛选（如第1页，每页10条） |
| 请求体参数 | 请求的“身体”里，通常是JSON | {username: “张三”, age: 20} | 提交表单、登录（数据量大或敏感） |
最后看响应格式，文档一般会写“响应示例”，比如{code: 200, data: {name: "张三"}, msg: "成功"}。这里你只需要记住：code是状态码（200通常代表成功，非200就是有问题），data里才是你要的实际数据（比如用户信息、列表数据），msg是错误提示（如果失败了看这里）。之前有个实习生调接口，直接console.log(response)，结果看到一堆headers“config”“status”，还跑来问我“后端是不是返回错了”，其实他只要取response.data就行——这步虽然简单，但80%的新手都会在这里卡壳。
第二步：用Axios发请求，3行代码搞定基础调用
看懂文档后，就可以写代码了。前端调用接口最常用的工具是Axios，比浏览器自带的Fetch API好用10倍（我自己两种都用过，Axios的错误处理和拦截器简直是懒人福音）。如果你用Vue、React这些框架，直接用npm安装就行：npm install axios，然后在代码里引入：import axios from 'axios'，接下来分3步写请求。
第一步：配置基础地址
，这样每次发请求不用重复写服务器地址。比如后端给的基础地址是http://localhost:3000，你可以这样配：
axios.defaults.baseURL = 'http://localhost:3000';我之前接手过一个老项目，每个请求都写完整地址，后来后端换域名，改了30多个文件，差点没疯掉——配个基础地址能省你 无数麻烦。
第二步：写请求代码
，分GET和POST两种情况。先看GET请求，比如获取用户列表，文档里写“GET /api/user?page=1&size=10”，用Axios写就是：
async function getUserList() {
try {
// params里放查询参数，Axios会自动拼到URL后面
const response = await axios.get('/api/user', {
params: { page: 1, size: 10 }
});
// 取data里的实际数据
console.log(response.data);
} catch (error) {
// 出错了看错误信息
console.error('请求失败：', error.message);
}
}
这里用了async/await，比then/catch的嵌套写法清爽多了。我带的实习生小李一开始用then嵌套，3个请求下来代码缩进像楼梯，后来教他用async/await，他自己都说“像解开了缠在一起的耳机线”。
再看POST请求，比如登录接口“POST /api/user/login，请求体{username, password}”，代码这样写：
async function login() {
try {
const response = await axios.post('/api/user/login', {
username: '张三',
password: '123456'
});
// 登录成功后存token（后面会讲）
localStorage.setItem('token', response.data.data.token);
} catch (error) {
// 失败时提示后端返回的msg
alert(error.response.data.msg || '登录失败');
}
}
注意POST的第二个参数直接放请求体对象，不用像GET那样包在params里。之前有个同事把POST参数也放params里，结果后端说“没收到数据”，查了半天才发现这个低级错误——记住：GET用params，POST直接传对象。
第三步：处理响应和错误
。Axios的响应对象里，response.data是后端返回的JSON，response.status是HTTP状态码（200、404这些）。如果请求失败，错误会被catch捕获，error.response里有后端返回的错误信息（比如error.response.data.msg）。我见过有人不写try/catch，结果接口一报错整个页面白屏，用户还以为网站崩了——加个错误处理，至少能给用户弹个“加载失败，请重试”的提示，体验好10倍。
第三步：避坑指南，90%的问题都能自己解决
就算按上面的步骤来，你还是可能遇到各种报错，别慌，我 了4个最常见的“坑”，告诉你怎么识别和解决，以后遇到问题不用再问后端。
第一个坑：跨域报错
，控制台显示“Access to XMLHttpRequest at ‘http://xxx’ from origin ‘http://localhost:8080’ has been blocked by CORS policy”。简单说，就是前端运行的地址（比如localhost:8080）和后端接口地址（比如localhost:3000）的“域名+端口”不一样，浏览器出于安全不让调。解决办法有两个：要么让后端在接口响应头里加Access-Control-Allow-Origin: *（开发环境用，生产环境别这样，不安全），要么前端配代理。比如Vue项目在vue.config.js里这样配：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后端接口地址
changeOrigin: true, // 告诉后端请求来自哪里
pathRewrite: { '^/api': '' } // 去掉URL里的/api前缀
}
}
}
};
配完重启项目，请求地址直接写/api/user/login就行，代理会帮你转发到后端地址。我之前帮一个React项目配代理，5分钟就解决了跨域问题，比等后端改代码快多了。
第二个坑：404错误
，提示“Request failed with status code 404”。90%的原因是请求地址错了：要么基础地址没配，要么路径拼错了，要么后端接口路径改了没告诉你。解决办法：打开浏览器“网络”面板（按F12），找到那个404的请求，看“请求URL”是不是你预期的地址。比如你以为是/api/user/login，结果实际发的是/api/login，那就是路径少了user——对着文档核对地址，通常5分钟就能找到问题。 第三个坑：参数类型不匹配，后端说“没收到你的参数”或“参数格式不对”。比如文档里要求age是数字，你传了字符串"20"；或者日期格式后端要YYYY-MM-DD，你传了MM/DD/YYYY。解决办法：在axios.post或axios.get前，console.log一下你要传的参数，看看类型对不对。我之前遇到个接口，后端要求phone是纯数字字符串，我传了带空格的" 13800138000 "，结果一直报错，后来把空格去掉就好了——这种细节不注意，能卡你一下午。 第四个坑：token认证失败，报错“401 Unauthorized”。现在大部分接口都需要登录后用token认证，通常放在请求头里。正确做法是登录成功后，把后端返回的token存在localStorage里，然后用Axios拦截器统一加到头里：
// 添加请求拦截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = Bearer ${token}; // 注意Bearer后面有空格
}
return config;
});
之前有个实习生忘了加Bearer ，直接把token放进去，结果后端说“token无效”，查了半天发现是少了个空格——这种细节文档里可能没写，你得自己多留意。
其实前端调用接口就像搭积木，看懂图纸（接口文档）、用好工具（Axios）、避开常见的坑，基本上就能搞定。你下次调接口的时候，先花10分钟把文档“翻译”清楚，再按“配地址→写请求→处理错误”的步骤来，遇到问题先看浏览器“网络”面板和控制台报错，90%的问题都能自己解决。如果试了还是不行，欢迎在评论区告诉我你遇到的错误信息，我来帮你分析分析！
你肯定遇到过这种情况：调试接口时明明地址和方法都对，一点提交按钮，控制台突然跳出个400错误，红通通的特别扎眼。别慌，400错误其实是后端在“吐槽”你——“我收到你的请求了，但你给的数据不对劲儿啊！” 它跟404（找不到接口）、500（后端自己出错）不一样，400是明明白白告诉你：问题出在你传的参数上，可能少了必填项，或者格式不对，再或者类型搞错了。比如上次我帮实习生看代码，他调用户注册接口报400，查了半天才发现，后端要求“phone”字段是纯数字字符串，他传的时候多打了个空格，变成“ 13800138000 ”，后端校验直接没过。
排查400错误其实有套路，先别急着喊后端。第一步，按F12打开浏览器的“网络”面板，找到那个标红的请求，点进去看“请求体”或者“查询参数”。比如你调的是POST接口，就看“Request Payload”里的JSON数据，对着接口文档一条一条核对：是不是少了文档里标“必填”的字段？比如文档写着“username（必填）”，你光顾着传password忘了传username，这就会400。第二步，检查参数类型和格式对不对。后端要number类型的age，你传了字符串“25”；要“YYYY-MM-DD”格式的birthday，你传了“2023/12/01”；或者传数组的时候写成了字符串，这些都会触发400。我之前遇到个更绝的，后端要求传对象数组，结果前端传了个字符串数组，每个元素都是JSON字符串，后端解析直接懵了。第三步，看看后端返回的错误信息，大部分情况下，response.data.msg里会写得很清楚，比如“手机号格式错误”“邮箱不能为空”，照着提示改就行。要是没msg字段，就把你传的参数截图发给后端，问一句“哥，你看我这参数哪不对？”——毕竟他们最清楚自己写的校验规则，总比你自己瞎猜快。
接口调用时，GET和POST请求有什么区别？什么时候该用哪个？
GET请求主要用于“获取数据”，比如获取列表、详情等，参数会拼在URL里（如?page=1&size=10），适合数据量小、不敏感的场景；POST请求用于“提交数据”，比如登录、保存表单，参数放在请求体中（通常是JSON格式），适合数据量大或敏感的场景（如密码）。简单记：查数据用GET，发数据用POST。
跨域错误除了文章提到的方法，还有其他解决方式吗？
除了后端配置CORS和前端代理，还可以用“JSONP”（只支持GET请求，通过动态创建script标签实现），但现在已较少使用；开发环境也可临时用浏览器插件（如Allow CORS: Access-Control-Allow-Origin）绕过跨域限制（仅开发调试用，生产环境不 ）。最推荐的还是后端正确配置CORS头或前端配代理，兼容性和安全性更好。
不用Axios，只用浏览器自带的Fetch API能调用接口吗？
可以。Fetch是浏览器原生API，无需安装依赖，语法类似：
fetch(‘http://localhost:3000/api/user’, { method: ‘GET’ })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
但Fetch需要手动处理JSON解析、HTTP错误状态（如404不会进入catch，需自己判断response.ok），且没有拦截器功能，复杂场景还是Axios更方便。
接口返回400错误是什么意思？该怎么排查？
400错误通常是“请求参数错误”，说明后端收到了请求，但认为参数不符合要求（比如必填字段缺失、格式错误、类型不匹配）。排查步骤：
token过期了怎么办？前端需要怎么处理？
token过期会返回401错误，前端可通过Axios拦截器统一处理：
