GET http://localhost:14532/[object%20Object]/ 404 (Not Found) when using await fetch post requests in JQuery

Question

I am using JQuery for sending async POST requests to the server and getting response values and seems to work well. However, I am getting the error you see in my question title and I do not know why since I do not do any GET request anywhere.

Client-side code:

async startGame(username) { 
        await fetch ($.post("/startGame", {username: username}, (data) => {
            data = JSON.parse(data);
            this.idPlayer = data[0];
            this.idGame = data[1]
            console.log("data1:");
            console.log(data) 
        }));

        await fetch ($.post("/lookingForAPlayer", (data) => {
            data = JSON.parse(data);
            console.log("data2:");
            console.log(data)
        }));
    }

Server-side code (node.js):

app.post('/startGame', function(req, res) {
    dbConnection.getIdPlayer(req.body.username).then(data1 => {
        dbConnection.addGame(data1).then(data2 => {
            res.end(JSON.stringify([data1, data2]));
        });
    });
});

app.post('/lookingForAPlayer', function(req, res) {
    dbConnection.lookingForAPlayer().then(data => {
        res.end(JSON.stringify(data));
    });
});

Result:

Error is there:

As you can see, both requests have been made asynchronously, so it does what I need, but I do not think the error I am having is normal.

You are calling `fetch` with the returned value of `$.post(...)` as an argument.. You need to use one of them (either fetch or `$.post`) — Hamza El Aoutar, May 18 '20 at 22:49

Ahmed Hammad · Accepted Answer · 2020-05-18T23:03:14.127

0

It's either you use fetch, or jQuery POST calls, but not both.

What is happening is that you're doing POST requests using jQuery, but it's all wrapped with a fetch requests that has a default method of GET, so that's why it's trying to make GET requests.

async startGame(username) { 
    await $.post("/startGame", {username: username}, (data) => {
        data = JSON.parse(data);
        this.idPlayer = data[0];
        this.idGame = data[1]
        console.log("data1:");
        console.log(data) 
    });

    await $.post("/lookingForAPlayer", (data) => {
        data = JSON.parse(data);
        console.log("data2:");
        console.log(data)
    });
}

If you prefer to use fetch, rather than jQuery (which I recommend), you can use this

async startGame(username) { 
    await fetch("/startGame", {
        method: 'post',
        body: JSON.stringify({username: username})
    }).then(function(data) {
        data = JSON.parse(data);
        this.idPlayer = data[0];
        this.idGame = data[1]
        console.log("data1:");
        console.log(data)
    });

    await fetch("/lookingForAPlayer", {
        method: 'post',
    }).then(function(data) {
        data = JSON.parse(data);
        console.log("data2:");
        console.log(data)
    });
}

edited May 18 '20 at 23:03

answered May 18 '20 at 22:51

Ahmed Hammad

2,798
4
18
35

Ok, that makes sense. I didn't know that. I have been told to use `fetch` but doing it with native JavaScript but apparently, it works different with JQuery. Thanks. It's fixed now :) – May 18 '20 at 22:55
@Adrian2895 you are welcome, you may also want to check the fetch way of doing it if you were told to do so. – Ahmed Hammad May 18 '20 at 23:03
Well, I prefer to use JQuery because it's much clearer and shorter code. The reason of why I've been told to use `fetch` is because I posted my previous question with jQuery code, but their answers were with native javascript. I'm not sure why. Do you recommend using `fetch` instead? Why? – May 18 '20 at 23:08
My previous question was this, by the way: https://stackoverflow.com/questions/61877644/how-to-wait-until-the-previous-post-request-is-completed-in-javascriptnode-js (if you want to check it out) – May 18 '20 at 23:10
@Adrian2895 Yes I recommend `fetch` because it's built-in, you don't need to load any extra libraries. So, Unless you are already relying on jQuery for many things, I would suggest you use the built-in ways and avoid the *unnecessary* latency. – Ahmed Hammad May 18 '20 at 23:51

GET http://localhost:14532/[object%20Object]/ 404 (Not Found) when using await fetch post requests in JQuery

1 Answers1