web-dev-qa-db-fra.com

Récupérer des données d'un objet ReadableStream?

Comment puis-je obtenir des informations d'un objet ReadableStream?

J'utilise l'API Fetch et je ne vois pas cela dans la documentation.

Le corps est renvoyé en tant que ReadableStream et je souhaite simplement accéder à une propriété de ce flux. Sous Réponse dans les outils de développement du navigateur, il semble que ces informations soient organisées en propriétés, sous la forme d'un objet Javascript.

fetch('http://192.168.5.6:2000/api/car', obj)
    .then((res) => {
        if(res.status == 200) {
            console.log("Success :" + res.statusText);   //works just fine
        }
        else if(res.status == 400) {
            console.log(JSON.stringify(res.body.json());  //res.body is undefined.
        }

        return res.json();
    })

Merci d'avance.

javascriptnode.jsreactjsfetch
81
noob

Pour accéder aux données à partir d'un ReadableStream, vous devez appeler l'une des méthodes de conversion (documentation disponible ici ).

Par exemple:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    // The response is a Response instance.
    // You parse the data into a useable format using `.json()`
    return response.json();
  }).then(function(data) {
    // `data` is the parsed version of the JSON returned from the above endpoint.
    console.log(data);  // { "userId": 1, "id": 1, "title": "...", "body": "..." }
  });

EDIT: Si votre type de retour de données n'est pas JSON ou si vous ne voulez pas de JSON, utilisez text()

Par exemple:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    return response.text();
  }).then(function(data) {
    console.log(data); // this will be a string
  });

J'espère que cela aide à clarifier les choses.

94
Ashley 'CptLemming' Wilson

Certaines personnes peuvent trouver un exemple async utile:

var response = await fetch("https://httpbin.org/ip");
var body = await response.json(); // .json() is asynchronous and therefore must be awaited

json() convertit le corps de la réponse d'un ReadableStream en un objet json.

Les instructions await doivent être encapsulées dans une fonction async. Toutefois, vous pouvez exécuter des instructions await directement dans la console de Chrome (à partir de la version 62).

28
Noel

res.json() renvoie une promesse. Essayer ...

res.json().then(body => console.log(body));
22
pinoyyid

Un peu tard dans la soirée, mais il était difficile d’obtenir quelque chose d’utile à partir d’un ReadableStream produit à partir d’une demande batch Odata $ à l’aide de Sharepoint Framework.

Avait des problèmes similaires à ceux de OP, mais la solution dans mon cas consistait à utiliser une méthode de conversion différente de celle de .json (). Dans mon cas, .text () a fonctionné comme un charme. Quelques manipulations étaient cependant nécessaires pour obtenir des fichiers JSON utiles à partir du fichier texte.

10
Dan Mehlqvist

Si vous souhaitez simplement obtenir la réponse sous forme de texte et ne souhaitez pas la convertir en JSON, utilisez https://developer.mozilla.org/en-US/docs/Web/API/Body/text puis then pour obtenir le résultat réel de la promesse:

fetch('city-market.md')
  .then(function(response) {
    response.text().then((s) => console.log(s));
  });

ou

fetch('city-market.md')
  .then(function(response) {
    return response.text();
  })
  .then(function(myText) {
    console.log(myText);
  });
5
AlexChaffee

Je n'aime pas l'enchaînement des thens. La seconde n'a alors pas accès au statut. Comme indiqué précédemment, 'response.json ()' renvoie une promesse. Renvoyer le résultat alors de 'response.json ()' dans un acte similaire à un second alors. Il a l'avantage d'être dans la portée de la réponse.

return fetch(url, params).then(response => {
    return response.json().then(body => {
        if (response.status === 200) {
            return body
        } else {
            throw body
        }
    })
})
2
Mardok