web-dev-qa-db-ja.com

ReadableStreamオブジェクトからデータを取得しますか？

ReadableStreamオブジェクトから情報を取得する方法を教えてください。

私はFetch APIを使用していますが、ドキュメントからこれが明確であるとは思われません。

本体はReadableStreamとして返されているので、このストリーム内のプロパティにアクセスしたいだけです。ブラウザ開発ツールのレスポンスの下で、私はこの情報を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();
    })

前もって感謝します。

javascriptnode.jsreactjsfetch
74
noob

ReadableStreamからデータにアクセスするためには、変換方法の1つを呼び出す必要があります（docs available here ）。

例として：

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": "..." }
  });

編集：データの戻り値の型がJSONではない、またはJSONが望ましくない場合はtext()を使用してください。

例として：

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

これが物事を解決するのに役立ちます願っています。

86
Ashley 'CptLemming' Wilson

asyncの例が役に立つと思う人もいるでしょう。

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

json()はレスポンスのボディをReadableStreamからjsonオブジェクトに変換します。

awaitステートメントはasync関数でラップする必要がありますが、awaitステートメントはChromeのコンソールで直接実行できます（バージョン62以降）。

26
Noel

res.json()は約束を返します。試してみる.

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

パーティーには少し時間がかかりましたが、Sharepoint Frameworkを使用してOdata $バッチリクエストから生成されたReadableStreamから何か有用なものを得ることに関していくつかの問題がありました。

OPと同様の問題がありましたが、私の場合の解決策は、.json（）とは異なる変換方法を使用することでした。私の場合、.text（）は魅力的に働きました。ただし、テキストファイルから便利なJSONを取得するには多少の手間がかかります。

10
Dan Mehlqvist

単にレスポンスをテキストとして使用したいがJSONに変換したくない場合は、 https://developer.mozilla.org/en-US/docs/Web/API/Body/text を使用してください。そしてそれをthenで約束の実際の結果を得るために：

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

または

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

連鎖するのが嫌いです。それから2番目はステータスにアクセスできません。前述のとおり、 'response.json（）'は約束を返します。 「response.json（）」のthen結果を2番目のthenに似た動作で返す。それは応答の範囲内にいるという追加のボーナスを持っています。

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