Async / await不能与fetch一起工作

我试图使用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);
});

演示

出于某种原因，我总是带着消息

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

您忘记将response声明为变量了。类代码始终是严格的代码，您将无法对隐式全局变量进行赋值。相反，它抛出一个ReferenceError .

除此之外，Response对象没有像XHR那样的responseText属性，它们有一个.text()方法，等待主体被接收并返回一个承诺。

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

相关内容

最新更新

热门标签：