时间戳

首页 > 解决方案 > 从 fetch 将数据加载到变量中时出错

javascript - 从 fetch 将数据加载到变量中时出错

问题描述

我正在尝试仅使用 JS/HTML/CSS（无框架）构建网页，但是当尝试将响应分配给变量时，似乎流程不是我写的顺序：

var COUNTRIES_DATA = "";

function fetchCountriesData(){
fetch(`${API_URL}/countries`).then(response => {
  return response.json().then(countries => {
    COUNTRIES_DATA = countries;
  });
});
};

fetchCountriesData();
renderCountriesCombo(COUNTRIES_DATA);


function renderCountriesCombo(countries) {
  countries.sort(function (a, b) {
    return (a.Country > b.Country) ? 1 : ((b.Country > a.Country) ? -1 : 0);
  });
  let options = countries.map(country => {
    return `<option>${country.Country}</option>`
  })
  document.getElementById("combo").innerHTML = options;
}

我收到的错误消息是countries.sort is not a function，但是当我调试变量中国家的值时，renderCountriesData()它countries是空的。

断点在 ->

我调试时的流程如下：

开始fetchCountriesData()- > 因为我有一个<body onload="fetchCountriesData()"> 函数签名（第一行），不运行该return方法，接下来它转到renderCountriesCombo()函数并给出错误消息，然后返回fetchCountriesData()并填充COUNTRIES_DATA.

问题是，我需要COUNTRIES_DATA在任何其他方法运行之前填充该变量。

标签： javascriptfetch

解决方案

fetch()是网络承诺，在调用承诺后，renderCountriesCombo 立即执行，同时数据正在获取，未完成。

你应该这样做：

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

推荐阅读