JS 请求处理：从 “回调地狱” 到 “并发控制”，我封装了能复用 10 个项目的请求工具
看着屏幕上密密麻麻全是嵌套的 then—— 为了实现 “先获取用户 Token，再拿用户信息，最后加载购物车”，写了三层 then 嵌套，中间还夹杂着错误处理，代码缩进比面条还乱。
“我也不想这么写啊，但请求得等前一个结束才能发，不然拿不到 Token！” KK 揉着太阳穴说。
那段代码长这样，你眼熟吗？
javascript
运行
// 老周的“面条代码”：嵌套then处理依赖请求
fetch('/api/getToken').then(tokenRes => tokenRes.json()).then(tokenData => {// 第一层then：拿到Token后，请求用户信息fetch('/api/getUserInfo', {headers: { Authorization: `Bearer ${tokenData.token}` }}).then(userRes => userRes.json()).then(userData => {// 第二层then：拿到用户信息后，请求购物车fetch('/api/getCart', {headers: { Authorization: `Bearer ${tokenData.token}` }}).then(cartRes => cartRes.json()).then(cartData => {// 第三层then：终于拿到所有数据renderUser(userData);renderCart(cartData);}).catch(cartErr => console.error('购物车请求错了：', cartErr));}).catch(userErr => console.error('用户信息请求错了：', userErr));}).catch(tokenErr => console.error('Token请求错了：', tokenErr));
这就是前端请求处理的经典痛点：回调地狱、错误处理分散、重复配置冗余。更麻烦的是，这种代码在项目里复制粘贴几次后，一旦后端改了接口地址或请求头格式，就得全局找代码修改，堪称 “维护噩梦”。
今天就结合我在电商、后台系统里踩过的坑，分享一套 “从基础封装到进阶优化” 的请求处理方案 —— 从解决回调地狱，到封装可复用的请求工具，再到处理并发控制、请求取消这些实战场景，每个步骤都有可直接复制的代码，最后还会给一个我用了 10 个项目的请求工具模板。
一、先解决最痛的 “回调地狱”：用 async/await 让代码变 “平”
回调地狱的根源是 “异步请求依赖”—— 后一个请求需要前一个的结果。早期用 then 嵌套解决，代码越写越乱；ES7 的 async/await 就是为这个问题而生的，能把异步代码写成 “同步的样子”，可读性直接拉满。
错误写法（嵌套 then）：
前面那段 “三层嵌套” 代码就是典型反例，这里不再重复 —— 核心问题是 “嵌套层级深、错误处理分散”，想改中间某个请求的逻辑，得一层层扒开代码。
正确写法：用 async/await 重构
把每个请求封装成单独的函数，再用 async/await 按顺序调用，代码瞬间变平：
javascript
运行
// 1. 先封装单个请求函数（返回Promise）
async function getToken() {const res = await fetch('/api/getToken');if (!res.ok) {// 主动抛错，让外面的catch能捕获throw new Error(`Token请求失败：${res.status}`);}const data = await res.json();return data.token; // 直接返回需要的Token，不用外层再解析
}async function getUserInfo(token) {const res = await fetch('/api/getUserInfo', {headers: { Authorization: `Bearer ${token}` }});if (!res.ok) {throw new Error(`用户信息请求失败：${res.status}`);}return res.json();
}async function getCart(token) {const res = await fetch('/api/getCart', {headers: { Authorization: `Bearer ${token}` }});if (!res.ok) {throw new Error(`购物车请求失败：${res.status}`);}return res.json();
}// 2. 用 async/await 按顺序调用，错误统一处理
async function loadAllData() {try {// 按顺序执行：先拿Token，再拿用户信息，最后拿购物车const token = await getToken();const userInfo = await getUserInfo(token);const cartData = await getCart(token);// 所有请求成功后，再渲染页面renderUser(userInfo);renderCart(