Question

我试图将获取的颜色中的随机颜色存储在变量（'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，该变量当前为undefined，并将其传递给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仍然是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 => {
        // Here you can update all the required data
        randomColor = color;
        globals.currentColor = color;
        console.log(randomColor, globals);
     });

Answer 2

由于您正在调用的承诺是异步的，因此您console.log(randomColor)的承诺尚未兑现并且randomColor的值仍未定义的情况可能会发生。 randomColor仅成为您希望其在promise链.then(color => randomColor = color);的末尾的值。当您兑现承诺时，以下任何同步代码都将在您的承诺得到解决之前运行完毕！

Answer 3

您可以执行以下操作：

const randomColor = null;

await fetch('https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json')
  .then(res => 
  {
    const keys  = Object.keys(res.json());
    randomColor  = keys[Math.floor(Math.random() * keys.length)];
  })
  .catch(e => {
    console.log(e);
  });

console.log(randomColor);

为什么我不能从提取中存储数据

3 个答案: