通过维护一个以请求标识为键的状态对象，结合 fetch 的 promise 链式调用，可以实现接口请求状态管理。具体做法是在发起请求前将状态设为 loading，在 .then() 中更新为 success 并保存数据，在 .catch() 中更新为 error 并记录错误信息。
fetch 请求的生命周期如何映射到状态变化
请求从开始到结束会经历三个主要阶段：发送前、进行中、完成（成功或失败）。在发送前，通常需要将相关 UI 组件标记为加载状态；在请求发出后，立即进入加载态；当 Promise 解析时，根据响应结果决定最终状态。这种映射确保了用户界面能实时反映网络请求的进度。
const requestState = {};
function manageRequest(key, url) {
// 1. 初始状态：Loading
requestState[key] = { status: 'loading', data: null, error: null };
console.log(`[${key}] Status: ${requestState[key].status}`);
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
})
.then(data => {
// 2. 成功状态：Success
requestState[key] = { status: 'success', data: data, error: null };
console.log(`[${key}] Status: ${requestState[key].status}, Data:`, data);
return requestState[key];
})
.catch(error => {
// 3. 失败状态：Error
requestState[key] = { status: 'error', data: null, error: error.message };
console.error(`[${key}] Status: ${requestState[key].status}, Error:`, error.message);
return requestState[key];
});
}
// 模拟调用
manageRequest('user-1', '/api/user/1').then(state => {
console.log('Final State:', state);
});
上述代码展示了基本的状态流转逻辑。首先初始化状态对象，设置 status 为 loading。接着调用 fetch，如果响应正常，则在 .then 中将状态更新为 success 并存储数据。如果发生错误或 HTTP 错误码，则在 .catch 中将状态更新为 error 并存储错误消息。这种模式简单直接，适用于大多数单页应用的基础需求。
如何处理并发请求的状态隔离与冲突
当多个请求同时进行时，必须确保每个请求的状态互不干扰。使用唯一的请求键（如 URL 或 ID）作为状态对象的索引是实现隔离的关键。此外，还需要考虑取消请求的场景，例如用户快速切换页面时，旧请求的回调可能会覆盖新请求的状态。通过在状态对象中增加版本号或使用 AbortController 可以解决此类竞态条件问题。
const concurrentRequests = {};
let versionCounter = 0;
function safeFetch(key, url) {
const currentVersion = ++versionCounter;
// 初始化状态
concurrentRequests[key] = {
status: 'loading',
version: currentVersion,
data: null,
error: null
};
const controller = new AbortController();
const signal = controller.signal;
// 模拟取消机制：如果新请求发出，旧请求可被忽略
if (concurrentRequests[key]?.abortController) {
concurrentRequests[key].abortController.abort();
}
concurrentRequests[key].abortController = controller;
return fetch(url, { signal })
.then(res => res.json())
.then(data => {
// 检查版本是否仍为最新，防止旧请求覆盖新状态
if (concurrentRequests[key].version === currentVersion) {
concurrentRequests[key] = {
...concurrentRequests[key],
status: 'success',
data
};
}
return concurrentRequests[key];
})
.catch(err => {
if (err.name !== 'AbortError' && concurrentRequests[key].version === currentVersion) {
concurrentRequests[key] = {
...concurrentRequests[key],
status: 'error',
error: err.message
};
}
return concurrentRequests[key];
});
}
// 测试并发
safeFetch('req-A', '/api/a');
safeFetch('req-B', '/api/b');
该示例引入了版本号机制来防止竞态条件。每次发起请求时，版本号递增。在请求完成的回调中，只有当当前状态对象的版本号与发起时的版本号一致时，才更新状态。这确保了即使旧请求晚于新请求完成，也不会错误地覆盖新请求的结果。同时，使用 AbortController 可以在必要时主动取消未完成的请求，释放资源并避免不必要的状态更新。
基于 status 字段的具体判断逻辑是什么
在状态管理中，status 字段是驱动 UI 渲染的核心依据。常见的取值包括 loading、success 和 error。在组件中，通常通过判断 status 的值来决定显示加载动画、展示数据还是错误提示。这种基于状态的分支逻辑使得代码结构清晰，易于维护。
function renderComponent(state) {
if (!state) return '<div>No Request</div>';
switch (state.status) {
case 'loading':
return '<div>Loading...</div>';
case 'success':
return `<div>Data: ${JSON.stringify(state.data)}</div>`;
case 'error':
return `<div>Error: ${state.error}</div>`;
default:
return '<div>Unknown State</div>';
}
}
// 假设 state 来自之前的 manageRequest 或 safeFetch
const mockState = { status: 'success', data: { id: 1 }, error: null };
console.log(renderComponent(mockState));
这段代码展示了如何根据 status 字段渲染不同的 UI 内容。对于 loading 状态，显示加载指示器；对于 success 状态，渲染实际数据；对于 error 状态，显示错误信息。这种模式不仅适用于简单的 DOM 操作，也适用于 React、Vue 等现代前端框架中的状态驱动视图更新。关键在于保持 status 值的语义一致性，并确保所有可能的状态都有对应的处理逻辑。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
