不使用 `await`：巧用 Vuex 响应式特性管理 API 调用顺序

2024-03-08 19:11:52

Vuex中的API调用顺序管理：无需await

引言

在Vuex中，处理异步API调用通常需要使用await。然而，在某些情况下，我们可能希望避免await带来的延迟，而使用Vuex的响应式特性来实现顺序控制。本文将探讨如何通过Vuex的响应式特性，在不使用await的情况下等待一个API调用完成后再进行另一个API调用。

问题

假设我们在Vuex中管理状态，需要在执行API调用B之前等待API调用A完成。我们希望在不使用await的情况下实现此功能。

解决方案

我们可以利用Vuex的响应式特性来解决这个问题：

创建加载状态标识符： 定义一个响应式变量，如isLoading，用于跟踪API调用的加载状态。
在调用A中更新加载状态： 在API调用A中，将isLoading递增以表示正在加载。
在调用B中监听加载状态： 在API调用B中，使用Vuex的watch方法监听isLoading的变化。当isLoading变为0时，表示所有API调用已完成。
在加载状态为0时执行调用B： 在watch方法中，如果isLoading为0，则执行API调用B。

代码示例

const isLoading = ref(0);

function apiCallA() {
  isLoading.value++;
  // ... API 调用逻辑 ...
  isLoading.value--;
}

function apiCallB() {
  watch(isLoading, (val) => {
    if (val === 0) {
      // ... API 调用逻辑 ...
    }
  });
}

优势

避免使用await的优势包括：