为什么我无法存储提取的数据

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
};

您已经创建了一个当前undefined的变量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仍然有待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 只会在承诺链的末尾成为您希望它成为的值.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);