时间戳

首页 > 解决方案 > 从 fetch 返回的值 undefined (promise)

javascript - 从 fetch 返回的值 undefined (promise)

问题描述

我认为我没有正确理解承诺。我的理解是fetch()返回一个承诺，我尝试使用.then()返回承诺中的值，但我总是不确定。另外让我感到困惑的是，我可以console.log()并且它显示数据，但是当我尝试在其他地方使用它时，它会返回undefined. 我在这里做错了什么？

var getData = function(){

    var getRaceData = function()
    {
        fetch('http://ergast.com/api/f1/2008.json')
        .then(function(response) {
            response.json().then(function(data) {
                var raceSeason = data.MRData.RaceTable; 
                var raceData = raceSeason.Races;
                console.log(raceData);
                // Not returning racedata here, always get undefined
                return raceData;
            });
            }
        )
        .catch(function(err) {
            return;
        });
    }


}

标签： javascripthtmlpromise

解决方案

您需要返回调用的结果response.json().then(...)。通常，您会通过链接 firstthen的结果而不是嵌套来做到这一点（嵌套有其用途，但可能不在这里）。您还需要返回整个链（假设数据应该离开getRaceData）：

var getData = function(){

    var getRaceData = function()
    {
        return fetch('http://ergast.com/api/f1/2008.json')
        .then(function(response) {
            return response.json();
        }).then(function(data) {
            var raceSeason = data.MRData.RaceTable; 
            var raceData = raceSeason.Races;
            console.log(raceData);
            return raceData;
        })
        .catch(function(err) {
            return;
        });
    }
}

不过，还有一些其他注意事项：

  1. 您没有检查 HTTP 错误。这是fetchAPI 中的枪，它只拒绝网络错误，而不是 HTTP 错误。相反，您必须添加支票。

  2. 理想情况下，您会报告或以其他方式处理拒绝，而不是让它默默地失败。:-)

  3. 中的代码getData只创建一个函数，它不调用它。但我假设您是在未显示的代码中调用它。

所以：

var getData = function(){
    var getRaceData = function()
    {
        fetch('http://ergast.com/api/f1/2008.json')
        .then(function(response) {
            if (!response.ok) {
                throw new Error("HTTP error " + response.status);
            }
            return response.json();
        }).then(function(data) {
            var raceSeason = data.MRData.RaceTable; 
            var raceData = raceSeason.Races;
            console.log(raceData);
            return raceData;
        })
        .catch(function(err) {
            // ...report/handle the error...
        });
    };
    // Presumbly use `getRaceData` here; the code above only *defines* it.
};

推荐阅读