问题 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);
});

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

你忘了申报 response 作为变量。类代码始终是严格的代码，您无法轻松分配隐含的全局变量。相反，它抛出一个 ReferenceError。

除此之外， Response 对象没有 responseText 像XHR这样的财产，他们确实有一个 .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;
        }
    }
}

我认为你使用fetch错误 - 如果fetch是这个 developer.mozilla.org/en-US/docs/Web/API/Fetch_API - Jaromanda X

仍然不确定是什么问题。我试过添加 {method: 'get'} 到了 fetch 打电话但没有工作。 - Jeanluca Scaljeri

看起来你也遇到了CORS问题 - Jaromanda X

我已经使用es5版本+ fetch更新了帖子，这也不起作用。我没有看到任何CORS arros - Jeanluca Scaljeri

我没有说这是一个“获取问题”......我说“我认为你使用取错了” - 除此之外， finance.yahoo.com/webservice/v1/symbols 绝对供应零 CORS标头，因此您遇到了CORS问题 - Jaromanda X

非常感谢，就是这样。你有第二个原因是否有原因？ await ？没有它，代码也可以，因为第一个 await 已经解决了获取承诺。 - Jeanluca Scaljeri

等待第二个承诺意味着它中的错误将被抛入您的try-catch，而不是立即传播以拒绝返回的promise。所以差别不大。如果不存在try-catch，那么有和没有的解决方案应该完全相同。 - Bergi

我非常有兴趣知道为什么这是有效的，因为来自yahoo.com的响应不允许CORS，并且用这个代码替换原始的codepen代码并不能使它工作。 - Jaromanda X

问题 async / await不能与fetch结合使用

答案:

热门问题