我不知道如何使用来自 fetch api 的数据 [关闭]

Question

我有不到一年的 javascript 经验。 我总是在如何使用来自 api 的数据方面遇到很大的麻烦。

例如，如果我获取类似的产品 api，

我的控制台会显示[{name:'pen',price:4},{name:'jeans',price:5}]

好的，然后如果我想添加产品的所有价格，或者我想使用数据做某事。 所以我用了array.push(data)

但它不起作用，而且看起来像超级混蛋。

所以我想问一下你们最好的处理方法是什么？

var array=[] 
async function getData() { 
    let response = await fetch('products/api');
    let data = await response.json() 
    return data;
}

getData().then(data =>console.log(data))

Answer 1

如果您的数据采用您提供的形式：

[{name:'pen',price:4},{name:'jeans',price:5}]

这已经是一个数组，你可以做以下总结价格：

async function getData() { 
    let response = await fetch('products/api');
    let data = await response.json() 
    return data;
}

var array = await getData();
const reducer = (accumulator, currentValue) => accumulator + currentValue.price;

console.log(array.reduce(reducer, 0));

应该打印 14。请注意，要使用 await，您必须在异步函数中。如果您想使用 then() ，您可以执行以下操作：

var array = [];
const reducer = (accumulator, currentValue) => accumulator + currentValue.price;

getData().then(data => {
    array = data;
    console.log(array.reduce(reducer, 0));
});

如果您想对数据进行更多操作，则必须在 then() 函数中进行。

查看 MSDN 的 reduce 函数：