Menu
I'm trying to use ES7 async / await together with fetch. I know I'm close but I can't get it to work. Here is the code:
class Bar {
async load() {
let url = 'https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
try {
response = await fetch(url);
return response.responseText;
} catch (e) {
return e.message;
}
}
}
which I use as follows:
let bar = new Bar();
bar.load().then(function (val) {
console.log(val);
});
DEMO
For some reason I always get into the catch with the message
response is not defined
Any suggestions what I do wrong ?
UPDATE: As suggested in the comments, it might be an issue with fetch, so I tried a simplified (ES5) version:
<!doctype html>
<html>
<head>
<script>
var url = 'https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
fetch(url, {method: 'get', mode: 'cors'}).then(function (response) {
console.log(response.responseText);
});
</script>
<head>
<body></body>
<html>
And still doesn't work :( However, if I replace fetch it works:
var request = new XMLHttpRequest();
request.open("GET", url, false);
request.send(null);
console.log(request.responseText);
550
Fetch using async/await syntaxFunctions are prepended by the keyword async , which enables the use of the keyword await inside them. Any process that returns a promise is prepended by the keyword await , which halts execution of the code below it until the promise is resolved or rejected.
forEach is synchronous, while fetch is asynchronous. While each element of the results array will be visited in order, forEach will return without the completion of fetch, thus leaving you empty-handed.
The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available. The promise resolves to the Response object representing the response to your request.
You forgot to declare response as a variable. Class code is always strict code, and you won't get away with assigning to implictly global variables. Instead, it throws a ReferenceError.
Apart from that, Response objects don't have a responseText property like a XHR, they do have a .text() method that waits for the body to be received and returns a promise.
class Bar {
async load() {
let url = 'https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
try {
let response = await fetch(url);
// ^^^^
return await response.text();
// ^^^^^^
} catch (e) {
return e.message;
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
