提取后Javascript无法读取未定义的属性'forEach'

Question

我尝试查看其他问题，但找不到合适的解决方案。我正在检索一个 GET 响应并将其存储到一个变量中，然后我解析该数组以查找每日发生的事件。该代码有效，但一旦到达 forEach 就会抱怨：

Cannot read property 'forEach' of undefined

。这是我的代码：

var myObj;
fetch('https://blashblashblash.com?param1')
.then(res=>res.json())
.then(data=>myObj= data)
.then(() => console.log(myObj));

var myRes = [];

myObj.forEach(function (elem) {
    var date = elem.CreationDate.split(' ')[0];


    if (myRes [date]) {
        myRes [date] += 1;
    } else {
        myRes [date] = 1;
    }
});

这就是 myObj 完成后的内容：

[{Id, Var1, Var2, CreationDate},
{1, 123, Var2, 2020-12-11},
{2, 1234, Var2, 2020-12-12},
{3, 12345, Var2, 2020-12-12},
{4, 1234, Var2, 2020-12-13},
{5, 321, Var2, 2020-12-15},
{6, 3214, Var2, 2020-12-15},
{7, 5432, Var2, 2020-12-16}]

我哪里错了？如果我在不同的步骤中执行代码，它可以正常工作。

编辑： 这是我更新的代码：

var myObj;
var myRes= [];
fetch('https://blashblashblash.com?param1')
.then(res=>res.json())
.then(data=>myObj= data)
.then(() => {
myObj.forEach(function (elem) {
    var date = elem.CreationDate.split(' ')[0];
    if (myRes[date]) {
        myRes[date] += 1;
    } else {
        myRes[date] = 1;
    }
});

});

var finalResult= {};
dates.forEach(date => {
    if(!myRes.hasOwnProperty(date)) {
        finalResult[date] = 0;
    } else {
        finalResult[date] = myRes[date];
    }
    return finalResult;
});

如果我正在执行整个我的 finalResult 是空的，而如果我在块中执行它它可以工作。如果我将 myRes =[] 插入最后一个 . 然后它抱怨它找不到它。我哪里错了？

Answer 1

编辑

重复：您可能更喜欢this answer。

编辑：从then() 外部访问响应

简答：

你不能。

长答案：

你正在做的是一个异步操作。这意味着我们不知道需要多长时间。

给定下面的示例代码，假设fetch() 需要 5 秒才能完成。

fetch('https://blashblashblash.com?param1').then(doOtherThings);

someTaskAfterFetch();

console.log('Done');

运行此代码后，需要多长时间才能在控制台中看到“完成”？答案是立即。

发生了什么？

让我们看看会发生什么。

    ===       fetch(url).then(doOtherThings) --> 'Start' fetching, without waiting for result.
     |               |
     |               |                       --> You expect fetch to be done here, which will not happen.
     |               |
     |        someTaskAfterFetch()           --> At this moment you see no fetch result.
almost 0 sec         |
     |               |
     |        console.log('Done')
     |               |
    ===       'Done' is printed
     |               |
     |               |
about 5 sec   (in some future)
     |               |
     |               |
    ===       **Fetch completed**             --> Fetch is finished here.
                     |
              doOtherThings(result)           --> doOtherThings, which we passed to `then()` will be run here.

执行从第 1 行的fetch(url).then(doOtherThings) 开始。

然后立即在第 2 行继续someTaskAfterFetch()。

之后，移动到console.log('done')。

在不久的将来（大约 5 秒后），您开始的 fetch 终于完成，并使用结果调用 doOtherThings。

结果如何处理？

在考虑异步任务时，您必须将调用和等待分开。您通过调用 fetch() 启动了一个 fetch 任务，但没有等待结果。

处理获取结果：

• 您可以等到任务完成(async/await)
• 或者告诉提取完成后要做什么。

使用then() 是第二种方法。您可以将所有结果处理代码传递给then()。

如需更详细的答案，您可能喜欢this。

---

在您的代码中，

fetch('https://blashblashblash.com?param1')
.then(res=>res.json())
.then(data=>myObj= data)
.then(() => console.log(myObj));

此行将立即返回。

紧接着，

myObj.forEach(function (elem) {
    var date = elem.CreationDate.split(' ')[0];


    if (myRes [date]) {
        myRes [date] += 1;
    } else {
        myRes [date] = 1;
    }
});

forEach 将被调用。

此时，请求获取作业在forEach 之前很快完成。但是，获取本身可能当时还没有完成。

您传递给以下then() 调用的函数将在获取成功完成后启动。

您可以将forEach 代码传递给then() 方法：

var myObj;
fetch('https://blashblashblash.com?param1')
.then(res => res.json())
.then(data => myObj = data)
.then(() => console.log(myObj));
.then(() => {
    var myRes = [];

    myObj.forEach(function (elem) {
        var date = elem.CreationDate.split(' ')[0];


        if (myRes [date]) {
            myRes [date] += 1;
        } else {
            myRes [date] = 1;
        }
    });

    // And other stuffs to do with myRes.
})

Answer 2

由于您的 fetch & then 是异步操作，因此您需要在 then 函数中执行 forEach，如下所示：

var myObj;
fetch('https://blashblashblash.com?param1')
.then(res=>res.json())
.then(data=>myObj= data)
.then(() => {
    console.log(myObj);
    var myRes = [];

    myObj.forEach(function (elem) {
        var date = elem.CreationDate.split(' ')[0];


        if (myRes [date]) {
            myRes [date] += 1;
        } else {
            myRes [date] = 1;
        }
    });
});