source

ReadableStream 개체에서 데이터를 검색하시겠습니까?

factcode 2022. 10. 23. 09:57
반응형

ReadableStream 개체에서 데이터를 검색하시겠습니까?

정보를 얻을 수 요?ReadableStream 오브젝트?

Fetch API를 사용하고 있는데 설명서에서 명확하게 알 수 없습니다.

시신은 의자로 반환되고 있다.ReadableStream이 스트림 내의 부동산에 접속하고 싶습니다.브라우저 개발 도구의 응답 아래에 이 정보가 JavaScript 개체 형태로 속성으로 정리되어 있는 것 같습니다.

fetch('http://192.168.5.6:2000/api/car', obj)
    .then((res) => {
        if(!res.ok) {
            console.log("Failure:" + res.statusText);
            throw new Error('HTTP ' + res.status);
        } else {
            console.log("Success :" + res.statusText);
            return res.body // what gives?
        }
    })

에서 , 「」로부터 액세스 합니다.ReadableStream변환 방법 중 하나를 호출해야 합니다(여기서 참조할 수 있습니다.

예를 들어 다음과 같습니다.

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
  });

이게 상황을 정리하는 데 도움이 됐으면 좋겠네요.

async[ ] :

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

json()ReadableStreamobject.json으로 이동합니다.

await 스스로 한다.async사용할 수 있지만, 할 수 있습니다.await크롬.

response.json()약속을 반환합니다.★★★★★★★★★★★…

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

response입니다.fetch(...)

, 한 것을 꺼내는 데 .ReadableStreamSharepoint Framework는 오다타 $batch입니다.

, 제 은 OP와 다른 이었습니다..json() ★★★★★★★★★★★★★★★★★★★★★★★★★..text()아주 잘 작동했어요.그러나 텍스트 파일에서 유용한 JSON을 얻기 위해서는 약간의 조작이 필요했다.

스트림을 읽을 수 있는 것은 1회뿐이므로 반복 읽기를 위해 응답을 복제해야 할 수 있습니다.

fetch('example.json')
  .then(res=>res.clone().json())
  .then( json => console.log(json))

fetch('url_that_returns_text')
  .then(res=>res.clone().text())
  .then( text => console.log(text))

응답을 텍스트로만 변환하고 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);
  });

나는 그 때 쇠사슬을 싫어한다.그러면 두 번째는 상태에 액세스할 수 없습니다.response.json() 앞에 설명된 대로 약속을 반환합니다.그때와 유사한 동작으로 response.json()의 결과를 반환합니다.응답 범위에 포함된다는 추가 보너스가 있습니다.

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

문제를 해결하기 위해 잘못된 질문을 했을 수도 있지만, 실제 질문에 대한 답변은 다음과 같습니다.영감은 Node.js 모듈의 소스 코드일 수 있습니다.

res.bodys로서 덩어리를 방출하는a 입니다.다음 함수는 단일의 모든 청크를 수집합니다.Uint8Array:

export async function streamToArrayBuffer(stream: ReadableStream<Uint8Array>): Promise<Uint8Array> {
    let result = new Uint8Array(0);
    const reader = stream.getReader();
    while (true) { // eslint-disable-line no-constant-condition
        const { done, value } = await reader.read();
        if (done) {
            break;
        }

        const newResult = new Uint8Array(result.length + value.length);
        newResult.set(result);
        newResult.set(value, result.length);
    }
    return result;
}

그런 다음 를 사용하여 배열을 문자열로 변환할 수 있습니다.다음으로 이 문자열을 해석할 수 있습니다.JSON.parse():

const buffer = await streamToArrayBuffer(res.body);
const text = new TextDecoder().decode(buffer);
const json = JSON.parse(text);

향후 브라우저가 이를 지원할 때 를 사용하여 스트림 콘텐츠를 문자열로 직접 수집할 수도 있습니다.

export async function streamToText(stream: ReadableStream<Uint8Array>): Promise<string> {
    let result = '';
    const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
    while (true) { // eslint-disable-line no-constant-condition
        const { done, value } = await reader.read();
        if (done) {
            break;
        }

        result += value;
    }
    return result;
}

12시간 넘게 같은 문제를 겪었어요. 혹시 도움이 될까 봐요._api 페이지 내에서 nextjs를 사용하는 경우 JSON.stringify(전체 응답)를 사용한 후 res.send(JSON.stringify(전체 응답))를 사용하여 페이지로 반송해야 합니다.클라이언트 측에서 수신한 경우 사용할 수 있도록 json 형식으로 변환해야 합니다.연재물 코너를 읽어보면 알 수 있어요도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/40385133/retrieve-data-from-a-readablestream-object

반응형