Re: Connexion asynchrone en javascript

Top Page

Reply to this message
Author: Edgar Bonet
Date:  
To: guilde
Subject: Re: Connexion asynchrone en javascript
Patrice a écrit :
> Received {}


Ça veut dire que `text` est un objet, ce qui n'est pas normal : on
s'attendait à du texte.

> "[object Response]" is not valid JSON


JSON.parse() s'attendait à recevoir du texte en entrée. À la place de
ça, il a reçu on objet, qui a été implicitement converti dans le texte
"[object Response]". C'est donc un objet de type Response qu'il a reçu
en entrée.

Je ne comprends pas d'où vient le problème. Avec

    .then(response => response.text())
    .then(text => { ...})


la deuxième lambda aurait dû recevoir le texte, et non l'objet
réponse...

J'ai essayé de reproduire ton problème, mais sans succès. Voici mon code
serveur (c'est du Node.js) :

-- server.js -----------------------------------------------------------
const http = require("http"),
      fs = require("fs"),
      data = { foo: 42, bar: true };


http.createServer((req, res) => {
    switch (req.url) {
    case "/":  // Static HTML page
        res.statusCode = 200;
        res.setHeader("Content-Type", "text/html");
        fs.createReadStream("index.html").pipe(res);
        break;
    case "/connect":  // Dynamic JSON content
        res.statusCode = 200;
        res.setHeader("Content-Type", "application/json");
        res.end(JSON.stringify(data));
        break;
    default:  // Error
        res.statusCode = 404;
        res.setHeader("Content-Type", "text/plain");
        res.end("Not found\n");
    }
})
.listen(3000, "127.0.0.1", () => {
    console.log("Server listening on http://localhost:3000/");
});
-- Fin de server.js ----------------------------------------------------


et voici la page Web :

-- index.html ----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script>

const submitConnectAsync2 = async () => {
    return fetch("connect")
    .then(response => response.json())
    .then(json => {
        console.log("Received:", json);
    })
    .catch(error => {
        console.log("Error:", error);
    });
};


window.onload = () => {
    document.querySelector("button").onclick = submitConnectAsync2;
};


</script>
</head>
<body>

<button>Test</button>

</body>
</html>
-- Fin de index.html ---------------------------------------------------

Quand je clique sur le bouton, la console Firefox me montre

    Received: ▶ Object { foo: 42, bar: true }


où l'objet est cliquable, donc bien reconnu comme un objet.

Est-ce que tu pourrais essayer de créer un exemple minimal qui reproduit
ton problème ?

À+,

Edgar.