async / await 不能与 fetch 结合使用

Question

我正在尝试将 ES7 async / await 与 fetch 一起使用。我知道我很接近，但我无法让它工作。这是代码：

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

我使用如下：

let bar = new Bar();
bar.load().then(function (val) {
    console.log(val);
});

DEMO

出于某种原因，我总是进入catch并收到消息

response is not defined

对我做错了什么有什么建议吗？

更新：正如评论中所建议的，这可能是 fetch 的问题，所以我尝试了一个简化的 (ES5) 版本：

<!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>

仍然无效 :( 但是，如果我替换 fetch 它有效：

var request = new XMLHttpRequest();
request.open("GET", url, false);
request.send(null);
console.log(request.responseText);

Answer 1

您忘记将 response 声明为变量。 Class 代码始终是严格的代码，你不会逃避分配给 implictly global variables。相反，它抛出 ReferenceError.

除此之外，Response 对象没有像 XHR 那样的 responseText 属性，它们确实有一个 .text() 方法来等待正文收到并returns一个承诺。

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

async / await 不能与 fetch 结合使用

async / await not working in combination with fetch

javascript

async-await

fetch-api

ecmascript-next