Question

-1

async / await not working in combination with fetch

rated 0 times [ 6] [ 7] / answers: 1 / hits: 20267 / 9 Years ago, mon, september 28, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mikael

Add To Favorites

Follow

Total Points: 73

Total Questions: 115

Total Answers: 86

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 9 Years ago dequant · Accepted Answer

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;

        }

    }

}