async / await not working in combination with fetch

Question

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

I think you're using fetch wrong - if fetch is this developer.mozilla.org/en-US/docs/Web/API/Fetch_API — Jaromanda X
– Jaromanda X, Commented Sep 28, 2015 at 12:45
Still not sure what is wrong. I've tried adding {method: 'get'} to the fetch call but didn't work. — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Sep 28, 2015 at 12:55
I've updated the post with a es5 version + fetch which also doesn't work. I don't see any CORS arros — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Sep 28, 2015 at 13:07
I didn't say it was an "issue with fetch" ... I said "I think you are using fetch wrong" - that aside, finance.yahoo.com/webservice/v1/symbols definitely supplies zero CORS headers, so you are having a CORS issue — Jaromanda X
– Jaromanda X, Commented Sep 28, 2015 at 13:10

Bergi · Accepted Answer · 2015-09-28 13:18:30Z

15

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

answered Sep 28, 2015 at 13:18

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jeanluca Scaljeri Over a year ago

thanks a lot, thats it. Is there a reason why you have the second await ? Without it the code also works because the first await already resolved the fetch promise.

Bergi Over a year ago

Awaiting the second promise means that errors in it would be thrown into your try-catch, not propagated right away to reject the returned promise. So not much of a difference. If the try-catch wasn't there, the solutions with and without should be exactly equivalent.

Jaromanda X Over a year ago

I'd be very interested to know why this works as the responses from yahoo.com do not allow CORS, and replacing the original codepen code with this code doesn't make it work.

Collectives™ on Stack Overflow

async / await not working in combination with fetch

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related