避免JavaScript Fetch请求重复发送的常见陷阱-js教程-PHP中文网

避免JavaScript Fetch请求重复发送的常见陷阱

聖光之護

发布： 2025-12-03 12:08:38

原创

675人浏览过

避免JavaScript Fetch请求重复发送的常见陷阱

本文旨在探讨javascript中fetch api请求意外重复发送的常见原因及解决方案。通过分析将异步请求逻辑错误地放置在循环内部的场景，并结合实际代码示例，详细阐述如何重构代码以确保fetch请求按预期执行，从而避免服务器端重复处理和客户端潜在的网络错误。

在现代Web开发中，JavaScript的Fetch API是进行网络请求的强大工具。然而，开发者有时会遇到Fetch请求意外地被重复触发的问题，这不仅可能导致服务器端数据处理异常，还可能在客户端引发诸如“NetworkError”之类的错误。本文将深入分析这类问题的一个常见根源，并提供专业的解决方案。

Fetch请求重复触发的典型场景

当一个按钮被点击时，我们通常期望与之关联的JavaScript函数只执行一次，并且其中的Fetch请求也只发送一次。然而，在某些情况下，即使按钮只点击了一次，Fetch请求却可能在后台被多次发送。

考虑以下一个使用Django 后端和JavaScript前端的场景：

前端JavaScript代码：

立即学习“Java免费学习笔记（深入）”；

function post_db() {
  // 其他初始化代码
  async function postData() {
    const url = "fetchnewseq";
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'X-CSRFToken': csrftoken,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(comandi_json)
    });
    return await response.json();
  }

  postData().then((data) => {
    window.location.replace(data.url);
  });
}

登录后复制

HTML按钮调用：

<button onclick="post_db()" class="btn btn-success">确认</button>

登录后复制

后端Django视图：

def fetch_new_seq(request):
    json_ricevuto = json.loads(request.body.decode("utf-8"))
    print(json_ricevuto) # 可能会在此处看到两次打印
    messages.success(request, "收到")
    redirect_url = reverse('newSeq')
    return JsonResponse({'url': redirect_url})

登录后复制

在这种设置下，如果后端打印了两次json_ricevuto，则表明Fetch请求被重复发送。同时，客户端浏览器控制台可能会出现Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.的错误。

问题根源分析：异步函数在循环中的不当使用

经过排查，Fetch请求重复发送的根本原因往往在于异步请求逻辑被错误地放置在一个循环内部。当循环的每次迭代都满足某个条件时，Fetch请求就会被重复触发。

Cutout.Pro

AI驱动的视觉设计平台

331

查看详情

以下是一个导致Fetch重复触发的典型错误代码结构：

function post_db() {
  // ... 其他代码
  for (var i = 0; i < len_array; i++) {
    if (
      comandi_json["lista_comandi"][i]["comando"] == "" ||
      comandi_json["lista_comandi"][i]["tempo"] == null
    ) {
      console.log("Error: 校验失败");
      return; // 如果校验失败，则提前退出函数
    } else {
      // 错误示范：将异步请求函数定义并调用在循环内部的else块中
      async function postData() {
        const url = "fetchnewseq";
        const response = await fetch(url, {
          method: "POST",
          headers: {
            "X-CSRFToken": csrftoken,
            "Content-Type": "application/json",
          },
          body: JSON.stringify(comandi_json),
        });
        return await response.json();
      }
      postData().then((data) => {
        window.location.replace(data.url);
      });
    }
  }
}

登录后复制

在这个错误示例中，postData 异步函数及其调用被放置在 for 循环的 else 块中。这意味着，只要 comandi_json["lista_comandi"][i] 中的某个元素通过了校验（即 if 条件不满足），else 块就会执行，从而触发一次新的Fetch请求。如果 len_array 大于1，并且有多个元素通过了校验，那么Fetch请求就会被发送多次。

至于NetworkError，它很可能是在第一个成功的Fetch请求完成并执行window.location.replace(data.url)后发生的。页面重定向会导致浏览器终止所有当前正在进行或即将进行的网络请求。因此，如果循环触发了多个Fetch请求，第一个请求成功后页面重定向，后续的Fetch请求就会因页面卸载而被中止，从而抛出NetworkError。

解决方案：分离校验逻辑与异步请求

解决此问题的关键在于将数据校验逻辑与异步网络请求逻辑清晰地分离。循环应该只负责完成所有必要的校验，而Fetch请求则应该在所有校验通过后，作为一次性操作来执行。

以下是修正后的代码结构：

function post_db() {
  // ... 其他代码

  // 步骤1：首先，完成所有的数据校验。
  // 循环只用于检查数据完整性，不触发任何网络请求。
  for (var i = 0; i < len_array; i++) {
    if (
      comandi_json["lista_comandi"][i]["comando"] == "" ||
      comandi_json["lista_comandi"][i]["tempo"] == null
    ) {
      console.log("Error: 校验失败，缺少必要数据。");
      // 如果任何一个元素校验失败，则立即退出函数，不发送请求。
      return; 
    }
  }

  // 步骤2：如果所有校验都通过，则在循环外部定义并执行异步请求。
  // 确保Fetch请求只被调用一次。
  async function postData() {
    const url = "fetchnewseq";
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "X-CSRFToken": csrftoken,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(comandi_json),
    });
    // 检查响应状态码，处理可能的HTTP错误
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  }

  // 步骤3：执行异步请求，并处理响应。
  postData()
    .then((data) => {
      // 请求成功后，进行页面重定向或其他操作
      window.location.replace(data.url);
    })
    .catch((error) => {
      // 捕获并处理Fetch请求过程中可能发生的错误
      console.error("Fetch请求失败:", error);
      // 可以显示用户友好的错误消息
    });
}

登录后复制

通过将postData函数的定义和调用移到循环之外，我们确保了：

校验先行： 循环首先完成所有必要的输入数据校验。
单次请求： 只有当所有数据都通过校验后，postData函数才会被调用一次，从而发送一次Fetch请求。
避免重复： 彻底杜绝了Fetch请求被多次触发的问题。

总结与最佳实践

分离职责： 在编写涉及异步操作和数据校验的代码时，始终牢记分离职责的原则。循环应专注于数据处理或校验，而异步请求应作为独立的操作，在满足所有前置条件后执行。
异步操作的生命周期： 理解fetch等异步操作的生命周期。当页面发生重定向或卸载时，正在进行的网络请求可能会被中断，导致NetworkError。
调试技巧： 遇到类似问题时，利用浏览器的开发者工具（Network Tab）是定位问题的关键。它可以清晰地显示所有发出的网络请求，包括请求的次数、状态和响应。同时，在代码中合理使用console.log进行日志输出，可以帮助追踪代码执行路径。
错误处理： 对于Fetch请求，始终添加.catch()块来捕获和处理可能发生的网络错误或其他异常，提高应用的健壮性。

遵循这些最佳实践，可以有效避免Fetch请求重复发送的问题，构建更稳定、高效的Web应用程序。

以上就是避免JavaScript Fetch请求重复发送的常见陷阱的详细内容，更多请关注php中文网其它相关文章！