使用Fetch发送Post请求遇NetworkError报错求助

问题原因分析 #

你遇到的Uncaught (in promise) TypeError: NetworkError主要有两个核心原因：

1. 表单默认提交行为未阻止：当表单验证通过时，你没有调用e.preventDefault()，导致浏览器触发默认的表单提交（页面刷新），直接中断了正在进行的Fetch请求，引发网络错误。而验证不通过时你已经调用了e.preventDefault()，所以页面不会刷新，也就不会出现报错。
2. 未处理Fetch的Promise错误：Fetch返回的Promise没有被正确处理（没有.then()/.catch()或try/catch），导致未捕获的Promise异常抛出。

修复步骤及代码示例 #

以下是修正后的完整JavaScript代码，同时优化了部分逻辑：

submitValidation.addEventListener('click', async (e) => {
    // 正则验证规则配置
    const nameRegEx = /^[a-zA-ZéèîïÉÈÊÎÏ][a-zéèêàçîïüöô]+([-\'\s][a-zA-ZéèîïÉÈÎÏ]+)?/;
    const mailRegEx = /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
    let noProblem = true;

    // 表单字段验证
    formInputs.forEach(el => {
        const errorMsg = document.getElementById(`${el.id}ErrorMsg`);  

        if (el.validity.valueMissing) {
            e.preventDefault();   
            errorMsg.textContent = 'Donnée Manquante';
            errorMsg.style.color = "red";
            noProblem = false;
        } else {
            switch (el.id) {
                case 'firstName':
                    if (!nameRegEx.test(firstName.value)) {
                        e.preventDefault();
                        firstNameError.textContent = 'Format incorrect';
                        firstNameError.style.color = "orange";
                        noProblem = false;
                    }
                    break;
                
                case 'lastName':
                    if (!nameRegEx.test(lastName.value)) {
                        e.preventDefault();
                        lastNameError.textContent = 'Format incorrect';
                        lastNameError.style.color = "orange";
                        noProblem = false;    
                    }
                    break;
                
                case 'email':
                    if (!mailRegEx.test(email.value)) {
                        e.preventDefault();
                        emailError.textContent = 'Format incorrect';
                        emailError.style.color = "orange";
                        noProblem = false;
                    }
                    break;
            }
        }  
    });

    // 验证通过才执行请求逻辑
    if (noProblem) {
        e.preventDefault(); // 关键：阻止表单默认提交，避免页面刷新

        // 准备请求数据
        const products = [];
        cart.forEach(item => products.push(item.id));
        
        const contact = {
            firstName: firstName.value,
            lastName: lastName.value,
            address: address.value,
            city: city.value,
            email: email.value
        };

        const sendToServer = { contact, products };

        // 处理Fetch请求并捕获错误
        try {
            const response = await fetch('http://localhost:3000/api/products/order', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(sendToServer)
            });

            // 检查响应状态是否正常
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }

            const result = await response.json();
            console.log('订单提交成功:', result);
            // 这里可以添加跳转订单成功页面、清空购物车等逻辑
        } catch (error) {
            console.error('订单提交失败:', error);
            // 可以在这里给用户显示友好的错误提示
        }
    }
});

关键修改点说明 #

1. 阻止默认提交行为：在验证通过的分支中添加e.preventDefault()，彻底避免页面刷新中断请求。
2. 异步处理Fetch请求：使用async/await语法简化Promise处理，并用try/catch捕获所有可能的错误（包括网络错误、服务器错误等）。
3. 初始化products数组：每次请求时重新初始化数组，避免多次点击按钮导致重复添加商品ID。
4. 响应状态检查：通过response.ok判断请求是否成功，避免将服务器返回的错误响应当作成功处理。
5. 代码简洁性优化：用!代替==false，textContent代替innerText（性能更优），使用const声明常量。

额外检查项 #

• 确认本地服务器http://localhost:3000处于运行状态，且/api/products/order端点配置正确。
• 确保cart变量已正确获取购物车数据，每个商品对象包含有效的id属性。
• 检查formInputs、firstNameError等DOM元素变量是否已正确声明并获取。

内容的提问来源于stack exchange，提问作者Dimah