javascript - 为什么我无法存储来自 fetch 的数据

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 3 年前。

我正在尝试将获取的颜色中的随机颜色存储在变量(“randomColor”)中，以便我可以在我的应用程序中使用它。每当我将其记录在控制台中时，它都会显示它是未定义的。直接从获取中记录颜色:

.then(color => console.log(color))

已经成功，因为控制台显示随机颜色。

我还尝试获取所有颜色并从中获取随机颜色，但出现同样的问题。

var randomColor;

globals = {
    currentColor: randomColor
};
fetch('https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json')
    .then(res => res.json())
    .then(obj => Object.keys(obj))
    .then(keys => keys[Math.floor(Math.random() * keys.length)])
    .then(color => randomColor = color);

要做什么？

Answer 1

让我们逐步检查您的代码

var randomColor;

globals = {
    currentColor: randomColor
};

您创建了一个当前未定义的变量randomColor，并将其传递给globals对象的属性。所以在 globals 中你有

globals = {
    currentColor: undefined
};

之后进行异步调用

fetch('https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json')
    .then(res => res.json())
    .then(obj => Object.keys(obj))
    .then(keys => keys[Math.floor(Math.random() * keys.length)])
    .then(color => randomColor = color);

所有代码都绝对正确，请求完成后，您会在 randomColor 变量中获得一些随机颜色。但是，只要基元通过引用(如对象)传递，您的globals.currentColor仍然是未定义。

您可以按如下方式重写代码:

fetch('https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json')
    .then(res => res.json())
    .then(obj => Object.keys(obj))
    .then(keys => keys[Math.floor(Math.random() * keys.length)])
    .then(color => {
        // Here you can update all the required data
        randomColor = color;
        globals.currentColor = color;
        console.log(randomColor, globals);
     });