如何防止以Watcheffect（）的损坏状态中流产的异步请求（）

Question

假设我们有一个组件，可以通过道具， resourceid 接收资源的ID。该组件应从API中获取相应的资源并显示它，同时还处理加载/错误状态（遵循类似于这个）。

从外部API获取资源的功能还返回中止函数，如果调用，该函数会导致请求立即拒绝。当 ResourceD 更改时，任何飞行中的请求都应中止，而有利于新请求。对于它的价值，我正在使用 fetch（）和 abortController 为此。

使用VUE 3与构图API一起，我想出了一个看起来像这样的实现：

const loading = ref(false);
const data = ref(null);
const error = ref(null);

watchEffect(async (onCancel) => {
    loading.value = true;
    data.value = error.value = null;

    const { response, abort } = fetchResourceFromApi(props.resourceId);
    onCancel(abort);

    try {
        data.value = await (await response).json();
    } catch (e) {
        error.value = e;
    } finally {
        loading.value = false;
    }
});

<div v-if="loading">Loading...</div>
<div v-else-if="error">Error: {{ error }}</div>
<div v-else>{{ data }}</div>

在大多数情况下，这种情况正常，但是每当取消播放时都会断裂。如果 ResourceD 在上次API请求完成之前进行更改，则发生以下事件的顺序：

1. abort（）被称为
2. WatchEffect 呼叫，设置加载，错误和 data
3. catch 和最后 原始请求的块被调用，设置加载和错误
4. 第二API请求完成并设置加载和 data

此导致出乎意料的状态，其中<代码>加载设置为 false 时，第二个请求在飞行中，错误包含通过中止第一个请求而提出的异常， data data < /代码>包含第二个请求中的值。

是否有任何可以解决此问题的设计模式或解决方法？

Answer 1

如果事件的顺序如您所述：

1. 第一个 WATCHEFFECT
2. 中止
3. second
4. catch，最后是第一个 WatchEffect

然后，您可以保留一个计数器并使用它来跟踪飞行请求中的当前内容（实际上是一个请求ID或某些库称为版本）。每次调用 WATCHEFFECT 都被调用，增加计数器并拍摄当前值的快照。检查您的捕获量，最后阻止目前的计数器与您启动的计数器值相同。如果它们不匹配，则意味着您正在处理过时的请求错误，因此您可以跳过错误和加载状态的修改。

const {ref, watchEffect} = Vue;

const App = {
  setup() {
    const resourceId = ref(0);
    const loading = ref(false);
    const data = ref(null);
    const error = ref(null);

    // fake an api fetch method to asynchronously return 
    // a result after 3 seconds.
    const fetchFor = (id) => {
      let abort;
      const response = new Promise((resolve, reject) => {
        abort = () => reject(`request ${id} aborted`);
        setTimeout(() => resolve({msg: "result for " + id}), 3000);
      });
      return {response, abort};
    };


    let version = 0;

    watchEffect(async (onCancel) => {
      version ++;
      const currentVersion = version;
      
      loading.value = true;
      data.value = error.value = null;
      const { response, abort } = fetchFor(resourceId.value);
      onCancel(abort);
      try {
        data.value = await response;
      } catch (e) {
        if (currentVersion === version) {
          error.value = e;
        }
        
      } finally {
        if (currentVersion === version) {
          loading.value = false;
        }
      }
    });

    return {resourceId, loading, data, error};
  }
};
   
const app = Vue.createApp(App);
app.mount("#app");

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
 <button @click="resourceId++">Request</button>
 <div> last request is {{resourceId}} </div>
 <div> loading = {{loading}} </div>
 <div> data = {{data?.msg}} </div>
 <div> error = {{error}} </div>
</div>