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 = ' 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); }); 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 = ' 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); 1 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 = ' try { let response = await fetch(url); // ^^^^ return await response.text(); // ^^^^^^ } catch (e) { return e.message; } } } 
