Я делал довольно простую задачу по получению информации из API, но потом получил ответ как ReadableStream, и все начало темнеть, как всегда. Я пытаюсь использовать API Cat-Facts.

URL: https://alexwohlbruck.github.io/cat-facts/docs/

и представить результаты с VueJS. То, что я нашел в интернете, но этот код просто возвращает случайные числа.

Вот код:

created() { this.getFacts(); }, methods: { getFacts() { let vm = this; fetch('http://localhost:8080/facts') .then(response ={amp}gt; { const reader = response.body.getReader(); return new ReadableStream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) ={amp}gt; { // When no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // Enqueue the next data chunk into our target stream vm.facts = value; controller.enqueue(value); return pump(); }); } } }) }) .catch(err ={amp}gt; console.error(err)); }, } 

Я использую vue.config.js для управления ошибкой Cors:

 module.exports = { devServers = { proxy: 'https://cat-fact.herokuapp.com/' } } 

Я сделал запрос с POSTMAN и работал просто хорошо.

Что произойдет, если вы сделаете это так:

 async getFacts() { let vm = this; const response = await fetch('http://localhost:8080/facts'); const myJson = await response.json(); console.log(JSON.stringify(myJson)); } 

Просто удивляйтесь, если вам вообще понадобится pump .

РЕДАКТИРОВАТЬ

Без async/await

 fetch('http://localhost:8080/facts') .then(response ={amp}gt; response.json()) .then(data ={amp}gt; console.log(data)); 

Я попытался с ajax и прокси, сделанным с php, используя gulp для связи с API, и это сработало! Просто простая строка. Но я очень озадачен тем, как работает метод fetch!