Vue3Request

Appearance

中止请求 ​

useRequest 返回了 signal参数 和 abort方法，用于中止尚未完成的接口请求

这样可以省去开发者自己定义 new AbortController()和手动定义abort方法的繁琐

ts
const controller = new AbortController(); 
const signal = controller.signal; 
const abort = () => controller.abort(); 
axios.post(url, { signal }); 

const { signal, abort } = useRequest(service); 
axios.post(url, { signal: signal.value });

使用的是 xhr 或 fetch 请求，并添加了signal 参数 (必须)，那么 useRequest 会在以下时机自动调用abort方法：

  • 组件卸载时，还未返回结果的请求
  • 前置请求中止，发起新请求时自动中止前一个未完成的请求并忽略 promise 的响应，但是如果设置了options.abortPrevious = false 则默认不会中止，但是依旧会竞态取消

TIP

  1. 手动点击中止请求按钮请把Network网速设置为 4G 或 3G (网速快接口返回的很快，还没来得及中止就成功了，接口慢可以忽略这条)
  2. 在Network中观察被中止的过期请求

基本使用 ​

Result ​

参数说明类型
signalAbortController 的信号对象，用于传递给 xhr 或 fetchRef<AbortSignal>
abort中止当前请求() => void

贡献者 ☘️ ​

Flame-00

Flame-00

Creator