从 fetch 调用内部更新后对象项未更新

Question

我有一个对象，我想更新 'marketBuyPrice' 和 'marketSellPrice' 条目以使用来自 fetch 调用的数据，如下所示：

//The object
const ores = {
  Hemorphite :{ name: 'Hemorphite', marketRef: '1231', marketBuyPrice: '', marketSellPrice: ''},
  Veldspar :{ name: 'Veldspar', marketRef: '1230', marketBuyPrice: '', marketSellPrice: ''},
};

//The fetch call
   function getMarketPrices(oreType, id) {
    var marketUrl = 'https://api.evemarketer.com/ec/marketstat?typeid='+id+'&usesystem=30000142';
    fetch(marketUrl)
        .then(response => response.text())
        .then(str => (new DOMParser()).parseFromString(str, "text/xml"))
        .then(data => {

            var buyPrice = data.getElementsByTagName("percentile")[0].childNodes[0].nodeValue;
            var sellPrice = data.getElementsByTagName("percentile")[1].childNodes[0].nodeValue;
                
            //This is where the buy / sell prices get updated
            ores[oreType].marketBuyPrice = buyPrice;
            ores[oreType].marketSellPrice = sellPrice;

        })
   }    

如果我随后使用以下命令查看整个数组，则此方法有效：

console.log(ores);

返回：

{Hemorphite: {…}, Veldspar: {…}}
Hemorphite: {name: "Hemorphite", marketRef: "1231", marketBuyPrice: "1004.87", marketSellPrice: "1678.93"}
Veldspar: {name: "Veldspar", marketRef: "1230", marketBuyPrice: "12.00", marketSellPrice: "20.70"}

但是，如果我尝试查看特定的更新条目：

console.log(ores[oreType].marketBuyPrice);

它返回空的，就好像它还没有更新一样，当查看上面的整个对象时，它显示它已更新。

谁能提供任何关于为什么会这样的见解。

非常感谢

//Update
const ores = {
  Hemorphite :{ name: 'Hemorphite', marketRef: '1231', marketBuyPrice: '', marketSellPrice: '', refines: {isogen: '2.4', nocxium: '9'} },
  Veldspar :{ name: 'Veldspar', marketRef: '1230', marketBuyPrice: '', marketSellPrice: ''},
};

const minerals = {
  Hemorphite :{ name: 'Hemorphite', marketRef: '1231', marketBuyPrice: '', marketSellPrice: '',},
  Veldspar :{ name: 'Veldspar', marketRef: '1230', marketBuyPrice: '', marketSellPrice: '',},
};

    function getMarketPrices(oreType, id) {
    var marketUrl = 'https://api.evemarketer.com/ec/marketstat?typeid='+id+'&usesystem=30000142';
    fetch(marketUrl)
        .then(response => response.text())
        .then(str => (new DOMParser()).parseFromString(str, "text/xml"))
        .then(data => {

            var buyPrice = data.getElementsByTagName("percentile")[0].childNodes[0].nodeValue;
            var sellPrice = data.getElementsByTagName("percentile")[1].childNodes[0].nodeValue;
                
            ores[oreType].marketBuyPrice = buyPrice;
            ores[oreType].marketSellPrice = sellPrice;

        })
   }    

        console.log(ores);
        console.log((ores['Veldspar'].marketBuyPrice));

Answer 1

看起来你忘记了等待：

//The object
const ores = {
  Veldspar :{ name: 'Veldspar', marketRef: '1230', marketBuyPrice: '', marketSellPrice: ''},
};

//The fetch call
function getMarketPrices(oreType, id) {
  var marketUrl = 'https://api.evemarketer.com/ec/marketstat?typeid='+id+'&usesystem=30000142';
  fetch(marketUrl)
      .then(response => response.text())
      .then(str => (new DOMParser()).parseFromString(str, "text/xml"))
      .then(data => {
          var buyPrice = data.getElementsByTagName("percentile")[0].childNodes[0].nodeValue;
          var sellPrice = data.getElementsByTagName("percentile")[1].childNodes[0].nodeValue;

          //This is where the buy / sell prices get updated
          ores[oreType].marketBuyPrice = buyPrice;
          ores[oreType].marketSellPrice = sellPrice;
      })
  }

getMarketPrices('Veldspar', '1230');
// data not updated now..
console.log(1, ores); 
console.log(2, ores['Veldspar'].marketBuyPrice); 
// But when you open this object in chrome console, you see prices.

如果您正在记录原语，控制台会立即向您显示实际值，但在现代浏览器中，对象可以填充数据，这些数据是在对象被记录到控制台之后出现的：

固定：

(async () => {

//The object
const ores = {
  Veldspar :{ name: 'Veldspar', marketRef: '1230', marketBuyPrice: '', marketSellPrice: ''},
};

//The fetch call
async function getMarketPrices(oreType, id) {
  var marketUrl = 'https://api.evemarketer.com/ec/marketstat?typeid='+id+'&usesystem=30000142';
  await fetch(marketUrl)
      .then(response => response.text())
      .then(str => (new DOMParser()).parseFromString(str, "text/xml"))
      .then(data => {
          var buyPrice = data.getElementsByTagName("percentile")[0].childNodes[0].nodeValue;
          var sellPrice = data.getElementsByTagName("percentile")[1].childNodes[0].nodeValue;

          //This is where the buy / sell prices get updated
          ores[oreType].marketBuyPrice = buyPrice;
          ores[oreType].marketSellPrice = sellPrice;
      })
}


await getMarketPrices('Veldspar', '1230');
console.log(1, ores); 
console.log(2, ores['Veldspar'].marketBuyPrice); 
// data updated.

  
})();

好的，循环：

(async () => {

//The object
const minerals = {
  Veldspar :{ name: 'Veldspar', marketRef: '1230', marketBuyPrice: '', marketSellPrice: ''},
  Tritanium :{ name: 'Tritanium', marketRef: '34', marketBuyPrice: '', marketSellPrice: ''},
  Pyerite :{ name: 'Pyerite', marketRef: '35', marketBuyPrice: '', marketSellPrice: ''},
  Mexallon :{ name: 'Mexallon', marketRef: '36', marketBuyPrice: '', marketSellPrice: ''},
  Isogen :{ name: 'Isogen', marketRef: '37', marketBuyPrice: '', marketSellPrice: ''},
  Nocxium :{ name: 'Nocxium', marketRef: '38', marketBuyPrice: '', marketSellPrice: ''},
  Zydrine :{ name: 'Zydrine', marketRef: '39', marketBuyPrice: '', marketSellPrice: ''},
  Megacyte :{ name: 'Megacyte', marketRef: '40', marketBuyPrice: '', marketSellPrice: ''},
};

//The fetch call
async function getMarketPrices(type, id) {
  var marketUrl = 'https://api.evemarketer.com/ec/marketstat?typeid='+id+'&usesystem=30000142';
  await fetch(marketUrl)
      .then(response => response.text())
      .then(str => (new DOMParser()).parseFromString(str, "text/xml"))
      .then(data => {
          var buyPrice = data.getElementsByTagName("percentile")[0].childNodes[0].nodeValue;
          var sellPrice = data.getElementsByTagName("percentile")[1].childNodes[0].nodeValue;

          //This is where the buy / sell prices get updated
          minerals[type].marketBuyPrice = buyPrice;
          minerals[type].marketSellPrice = sellPrice;
      })
}

await Promise.all(
  Object.entries(minerals)
    .map(([name_double, {name, marketRef}]) =>
      getMarketPrices(name, marketRef)
    )
);
console.log(minerals); 


})();