Vue3 调用本地服务接口失败三次提示下载并安装本地服务

Vue3 调用本地服务接口失败三次提示下载并安装本地服务

Vue3 调用本地服务接口，如果失败，则再尝试调用 2 次，如果 3 次都失败了，就提示下载本地服务 exe 安装包，并提供下载链接，请告诉我实现的代码

以下是一个用于调用本地服务接口，并在失败时尝试重新请求，尝试重新请求 2 次，如果仍然失败，则提示用户下载本地服务的 exe 安装包：

<template>
  <div>
    <button @click="callApi">调用接口</button>

    <div v-if="loading">Loading...</div>

    <div v-if="error">
      <p>{{ error }}</p>
      <p v-if="retryCount > 0">正在尝试重新请求（{{ retryCount }}）</p>
      <p v-else>请下载本地服务的 exe 安装包，并安装到本地。</p>
      <p v-if="!retrying">
        安装包下载地址：
        <a href="https://example.com/local-service.exe">
          https://example.com/local-service.exe
        </a>
      </p>
    </div>

    <div v-if="result">{{ result }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        error: null,
        result: null,
        retryCount: 0,
        retrying: false,
      };
    },
    methods: {
      async callApi() {
        this.loading = true;
        this.error = null;
        this.result = null;

        try {
          const response = await fetch("http://localhost:3000/api");
          this.retryCount = 0;
          if (response.ok) {
            const data = await response.json();
            this.result = data;
          } else {
            throw new Error("请求失败");
          }
        } catch (error) {
          this.error = error.message;
          this.retry();
        } finally {
          this.loading = false;
        }
      },
      async retry() {
        if (this.retryCount < 2) {
          this.retryCount++;
          this.retrying = true;
          await new Promise((resolve) => setTimeout(resolve, 1000));
          this.retrying = false;
          await this.callApi();
        } else {
          this.retryCount = 0;
        }
      },
    },
  };
</script>

上述代码的安装包下载链接是直接在界面中提供的，但有些情况不便在界面上直接提供。以下是在界面中未直接提供下载链接，而是在一个按钮的单击事件中进行安装包下载：

function handleDownloadClick() {
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = "https://example.com/local-service.exe";
  link.setAttribute("download", "local-service.exe");
  document.body.appendChild(link);
  link.click();
  // 下载完成移除元素
  document.body.removeChild(link);
}

上述代码通过动态创建a元素，并模拟链接的单击事件以实现安装包文件的下载。