I was doing a pretty easy task of getting information from an API but then i got the response as ReadableStream and things start to turn dark as always. I am trying to use the cat-facts API.
URL : https://alexwohlbruck.github.io/cat-facts/docs/
and render the results with VueJS. What i found on the internet but this code just return some random numbers.
Here is the code:
created() {
this.getFacts();
},
methods: {
getFacts() {
let vm = this;
fetch('http://localhost:8080/facts')
.then(response => {
const reader = response.body.getReader();
return new ReadableStream({
start(controller) {
return pump();
function pump() {
return reader.read().then(({ done, value }) => {
// 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 => console.error(err));
},
}
I am using vue.config.js to manage cors error:
module.exports = {
devServers = {
proxy: 'https://cat-fact.herokuapp.com/'
}
}
I made the request with POSTMAN and worked just well.