Vue3 怎么封装一个带自动重试的请求 Composable？

Question

仓乃文 · Accepted Answer

网络请求可能因超时或服务端临时故障失败，手动重试逻辑重复且容易遗漏。封装一个带自动重试的 Composable，失败后按策略重试，成功或达到上限后停止。实现： ```javascript import { ref, shallowRef } from "vue"; export function useRetryRequest(fn, options = {}) { const { maxRetries = 3, delay = 1000, backoff = 2 } = options; const data = shallowRef(null); const error = ref(null); const loading = ref(false); const retryCount = ref(0); const execute = async (...args) => { loading.value = true; error.value = null; retryCount.value = 0; let currentDelay = delay; for (let i = 0; i <= maxRetries; i++) { try { data.value = await fn(...args); loading.value = false; return data.value; } catch (e) { error.value = e; retryCount.value = i; if (i < maxRetries) { await new Promise((r) => setTimeout(r, currentDelay)); currentDelay *= backoff; // 指数退避 } } } loading.value = false; throw error.value; }; return { data, error, loading, retryCount, execute }; } ``` 使用： ```javascript const { data, loading, error, execute } = useRetryRequest( (id) => fetch(`/api/user/${id}`).then((r) => r.json()), { maxRetries: 3, delay: 500, backoff: 2 } ); ``` 补充说明： - backoff 参数实现指数退避，避免短时间大量重试冲击服务端 - 组件卸载时应取消正在进行的请求，可用 AbortController 配合 - 适合网络不稳定环境、支付结果查询、文件上传等场景 - 可扩展 onRetry 回调记录重试日志