TypeError：无法获取和 POST 获取状态 = 已取消

Question

我通过使用 POST fetch api 将用户输入数据从 React js 传递到节点 js 即后端，并将数据成功存储到我的数据库中。但是 fetch api 没有成功返回对象并在谷歌开发工具中向我显示等于 canceled 的网络状态。 我尝试了每件事，但我不知道如何解决它。谢谢。

错误截图

CustomerRegistration.jsx

const onSubmit = async (e) => {

        const { fname, lname, email, password, address } = state;

        await fetch('/customer-registration', {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                fname: fname, lname: lname, email: email, password: password, address: address
            })
        }).then((res)=>{
            console.log(`this is my res ${res}`);
            window.alert('Customer Registration successfull');
        }).catch((error)=>{
            window.alert(error);
            console.log(error);
        })
    }

Routers.js

router.post('/customer-registration',async(req,res)=>{
    
    const {fname,lname,email,password,address}=req.body;
    
    try {
        const valid=await myModel.findOne({email:email});
        if(valid){
            const flag=true;
           console.log('Email already exist');
        }else{

            const finalData=new myModel({fname,lname,email,password,address});
            const data=await finalData.save();
            if(data){
                console.log('Data saved to db');
                console.log(data);
                res.json(data);
            } 
        }
    } catch (error) {
        console.log('Data not saved');
    }

})

Answer 1

您收到该错误是因为您没有确保您的 nodejs 返回响应。

router.post('/customer-registration',async(req,res)=>{
    
    const {fname,lname,email,password,address}=req.body;
    
    try {
        const valid=await myModel.findOne({email:email});
        if(valid){
            const flag=true;
           console.log('Email already exist');
           
        }else{

            const finalData=new myModel({fname,lname,email,password,address});
            const data=await finalData.save();
            if(data){
                console.log('Data saved to db');
                console.log(data);
                return res.json(data);
            } 

           return res.json({ok: false }) //you need to ensure you return something.
        }
    } catch (error) {
        console.log('Data not saved');
        return res.status(400).end() // you need to return something even if it's an error.
    }

})