竞态处理
TIP
为保证体验，请打开开发者工具，选择网络面板，观察网络请求状态。如果请求响应时间过短，可以调到低速3G模式延长响应时间。
竞态是指在上一次请求尚未完成的情况下再次发起请求，但是两次请求的状态是共用的，如果不做特殊处理，会导致状态混乱，如果后发出去的请求比先发出去的请求更早得到响应，就会导致数据混乱。
useRequest中有两种思路来处理竞态问题：
- 以当前请求的状态为准。如果当前请求之前有尚未完成的请求，则取消上一次请求。
- 以前一次请求的状态为准。如果当前请求之前有尚未完成的请求，则取消本次请求的发送。
useRequest默认采用的是第一种思路，这种情况下，cancelLastRequest需要被设置为true，同时 useLastRequest 需要被设置为false。
第二种思路仅需将useLastRequest设置为true。
DANGER
请不要将cancelLastRequest设置为false的同时将useLastRequest也设置为false，这样useRequest将不能够正确处理竞态问题，除非你明确知道你在做什么，并自己处理好竞态问题。
完整示例
result:
loading: false
error:
<template>
<div class="demo-container">
<h3>result: <span>{{ result }}</span></h3>
<h3>loading: <span>{{ loading }}</span></h3>
<h3>error: <span>{{ error }}</span></h3>
<button class="primary" @click="handleRun">run</button>
<button @click="reset">reset</button>
</div>
</template>
<script lang="ts" setup>
import { useRequest } from '@superarale/vue-use-request';
import { request, IParams, correctKey } from './request';
const reset = () => {
result.value = null;
loading.value = false;
error.value = null;
};
const { result, loading, error, run } = useRequest(request, {
useLastRequest: true,
});
const handleRun = () => {
const params: IParams = {
key: correctKey,
};
run(params);
};
</script>
