Javascript 从fetch将数据加载到变量时出错

我试图仅使用JS/HTML/CSS（无框架）构建一个网页，但在尝试将响应分配到变量中时，似乎流程与我编写的顺序不符：

var-COUNTRIES_DATA=”“；
函数fetchCountriesData（）{
获取（${API\u URL}/countries`）。然后（响应=>{
返回response.json（）。然后（国家=>{
国家数据=国家；
});
});
};
fetchCountriesData（）；
renderCountriesCombo（国家/地区数据）；
功能效果图国家管理局（国家）{
国家。排序（功能（a、b）{
返回（a.Country>b.Country）？1:（（b.Country>a.Country）？-1:0）；
});
让选项=国家。地图（国家=>{
返回`${country.country}`
})
document.getElementById（“combo”）.innerHTML=options；
}

我收到的错误消息是

countries.sort不是一个函数

，但是当我调试

renderCountriesData（）

中国家的值时，

countries

变量为空

断点在->

• fetch（'${API\u URL}/countries'）。然后

• fetchCountriesData（）

• countries.sort（函数（a，b）{

当我去bugging时，流看起来像：

从

fetchCountriesData（）

->开始，因为我有一个

转到函数签名（第1行），不运行

return

方法， 接下来它转到

renderCountriesCombo（）

函数并给出错误消息，然后返回

fetchCountriesData（）

并填充

国家数据

问题是，我需要在运行任何其他方法之前填充
COUNTRIES\u DATA
变量。
fetch（）
是网络承诺，在调用承诺之后，renderCountriesCombo立即执行，同时数据正在提取，而不是完成

你应该这样做：

fetchCountriesData().then(countries => renderCountriesCombo(countries))

您应该在countries.sort中使用条件。首先检查是否存在国家，然后应用sort@Irfanwani主要的问题是，在一切开始运行之前，我只需要将国家/地区存储在一个变量上，这样我就可以在需要的时候处理数据，而不需要麻烦再次访问API来获取数据。是的，这完全可行，但主要问题是我需要在代码的其他部分提供此信息。在此架构中，我必须至少再获取两次api。将值存储到变量中对我来说是一个更好的选择。您可以创建
render（）
函数，它负责呈现所有需要数据的ui。另一个选项是使用事件模型，使呈现函数注册事件，并在完成后获取函数发出事件