异步/伺机没有结合工作与取 [英] async / await not working in combination with fetch

查看:101
本文介绍了异步/伺机没有结合工作与取的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图用ES7 异步 / 等待一起取。我知道我接近,但我不能让它工作。这里是code:

 类吧{
    异步负载(){
        让URL ='https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
        尝试{
            响应=等待获取(URL);
            返回response.responseText;
        }赶上(E){
            返回e.message;
        }
    }
}

这是我使用方法如下:

 让巴=新的酒吧();
bar.load()。然后(功能(VAL){
    的console.log(VAL);
});

演示

由于某种原因,我总是进入的消息

 没有定义响应

任何建议我做什么错了?

更新:由于在评论中暗示,它可能是与问题获取,所以我尝试简化(ES5)版本:

 <!DOCTYPE HTML>< HTML和GT;
    < HEAD>
        <脚本>
            VAR URL ='https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
            取(URL,{方法:'得到',模式:CORS'}),然后(功能(响应){
                       的console.log(response.responseText);
               });
        < / SCRIPT>
    < HEAD>   <身体GT;< /身体GT;
< HTML和GT;

和仍然没有工作:(不过,如果我更换取它的工作原理:

  VAR要求=新XMLHtt prequest();
request.open(GET,网址,虚假的);
request.send(NU​​LL);
的console.log(request.responseText);


解决方案

您忘了申报响应作为一个变量。类code是始终严格code,并且不会分配给的 implictly全局变量的。相反,它抛出一个的ReferenceError

除此之外, 响应 对象没有像XHR一个的responseText 财产,他们有一个的.text()方法该等待要接收的身体,并返回一个承诺

 类吧{
    异步负载(){
        让URL ='https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
        尝试{
            让我们响应=的await获取(URL);
// ^^^^
            返回伺机response.text();
// ^^^^^^
        }赶上(E){
            返回e.message;
        }
    }
}

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 =  'https://finance.yahoo.com/webservice/v1/symbols/goog/quote?format=json';
        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);
});

DEMO

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 =  '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>

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

解决方案

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

这篇关于异步/伺机没有结合工作与取的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆