web-dev-qa-db-ja.com

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>

それでも機能しません:(ただし、フェッチを置き換えると機能します：

var request = new XMLHttpRequest();
request.open("GET", url, false);
request.send(null);
console.log(request.responseText);
javascriptasync-awaitfetch-apiecmascript-next
14
Jeanluca Scaljeri

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