前端如何调用后端接口：主流方案与实操步骤
前端如何调用后端接口，主流分为Fetch原生调用、Axios库调用、XHR原生AJAX三种实现方式，前后端分离项目优先选择Axios，轻量化无依赖场景选用Fetch，老旧维护项目保留XHR；操作流程统一分为确认接口文档、处理跨域、组装请求参数、发起网络请求、捕获异常、接收解析返回数据这6步；边界条件为：浏览器同源策略会拦截跨域请求，仅GET请求可使用JSONP方案，POST请求必须依靠后端开启CORS跨域配置，同时前端直接调用接口会暴露密钥，不适用于需要保护密钥的线上生产环境，这类场景需要搭建中间服务层中转请求。
前端如何调用后端接口：三种请求方式对比
| 请求方式 | 是否需要安装依赖 | 自动JSON解析 | 内置请求拦截器 | 适用场景 |
|---|---|---|---|---|
| FetchAPI | 不需要，浏览器原生支持 | 不支持，需要手动调用.json()方法 | 无，需要自行封装 | 小型项目、纯静态页面、追求零打包体积 |
| Axios | 需要通过npm安装 | 支持，自动把响应转为JSON对象 | 自带请求与响应拦截器 | 中大型前后端分离项目、统一管理请求头与token |
| XHR(AJAX) | 不需要，浏览器原生支持 | 不支持，需要手动JSON.parse解析 | 无 | 维护老旧jQuery项目，新项目不推荐使用 |
Axios是当下多数业务项目的首选。
前端如何调用后端接口：完整操作流程
第一步核对接口文档，确认请求地址、请求方法（GET/POST/PUT/DELETE）、请求头、请求入参、返回字段，这一步出错会直接导致请求无法成功。
第二步处理跨域问题，这是前后端联调最容易卡住的环节。浏览器同源策略会拦截协议、域名、端口不一致的请求，你可以让后端开启W3CCORS跨域资源共享配置，这是最稳妥的标准方案；如果仅调用第三方GET接口，也可以临时使用JSONP方案，但JSONP无法发送POST请求。
第三步组装请求内容，GET请求把参数拼接到URL地址后面，POST请求把参数放在请求体中，同时在请求头添加Content-Type:application/json；如果接口需要登录鉴权，在请求头带上Authorization令牌。
第四步编写请求代码，使用async+await语法简化异步回调，避免回调地狱。
第五步捕获网络异常，区分网络中断、4xx客户端错误、5xx服务端错误，不要只捕获成功回调，否则接口报错时页面会无响应。
第六步解析后端返回的JSON数据，把拿到的数据渲染到页面DOM节点上。
前端如何调用后端接口：两种主流代码示例
先给出Fetch原生调用代码，无需安装任何包，直接在浏览器运行。
asyncfunctiongetApiData(){try{constres=awaitfetch('https://api.example.com/user',{method:'GET',headers:{'Content-Type':'application/json'}});if(!res.ok)thrownewError('接口请求失败');constdata=awaitres.json();console.log(data);}catch(err){console.error(err);}}
再给出Axios调用示例，先执行npminstallaxios完成安装，再编写请求代码。
importaxiosfrom'axios';asyncfunctiongetUserInfo(){try{constresult=awaitaxios.post('https://api.example.com/add',{name:'测试'},{headers:{Authorization:'Bearertoken值'}});console.log(result.data);}catch(err){console.error(err.response);}}
前端如何调用后端接口：线上环境的限制条件
前端代码会完整暴露在浏览器中，如果你直接把密钥、签名明文写在前端请求代码里，很容易被抓包窃取。
线上正式环境不能直接由前端调用第三方接口，必须新增一层Node.js中间服务，由前端请求自家后端服务，再由后端服务去调用第三方接口，把敏感密钥保存在服务端，降低信息泄露风险。
同时还要控制请求频率，短时间内高频发起请求容易触发后端接口限流机制，造成请求被拒绝。
