Нет доступа к элементу массива. использовать результат одного запроса ajax для другого запроса ajax

Question

    //global variables
var corpArray = new Array(); //store corp classes instances
var corpId = new Array(); //store corp id's

window.onload = init();

function init() {
  getNpcCorpId();
  console.log(corpId);
  getCorpNames(corpId[5]);
}

//get all corporation id's from the game
function getNpcCorpId() {
  let conName = new XMLHttpRequest();
  conName.onload = function() {
    if (this.status == 200) {
      let idList = JSON.parse(this.responseText);
      idList.forEach(element => {
        corpId.push(element);
      });
    }
  };
  conName.open(
    "get",
    "https://esi.evetech.net/latest/corporations/npccorps/?datasource=tranquility",
    true
  );
  conName.send();
}

//get corporation name
function getCorpNames(element) {
  console.log(element);
  let corpConn = new XMLHttpRequest();
  corpConn.onload = () => {
    if (this.status == 200) {
      console.log(this.responseText);
    }
  };
  corpConn.open(
    "get",
    `https://esi.evetech.net/latest/corporations/${element}/?datasource=tranquility`,
    true
  );
  corpConn.send();
}

Я пытаюсь создать онлайн-api eve, я хочу использовать 2 глобальные переменные для хранения моих извлеченных значений (потому что я не знаю другого способа), я буду использовать пару функций для использования предоставленного eve api. Я не могу получить доступ к своим corpId отдельные элементы, когда я консоль регистрирую весь свой массив, все в порядке, но когда я хочу получить доступ к отдельному элементу, он отображается undefiend.

Answer 1

 //global variables
var corpArray = new Array(); //store corp classes instances
var corpId = new Array(); //store corp id's

window.onload = init();

async function  init() {
  await getNpcCorpId();
  console.log(corpId);
  getCorpNames(corpId[5]);            // asynchronous behaviour - let it be fix using await and async
}

//get all corporation id's from the game
function getNpcCorpId() {
 return new Promise(function(resolve, reject) {
  let conName = new XMLHttpRequest();
  conName.onload = function() {
   if (this.status == 200) {
     let idList = JSON.parse(this.responseText);
     idList.forEach(element => {
    corpId.push(element);
     });
   }
   resolve();
  };
  conName.open(
    "get",
    "https://esi.evetech.net/latest/corporations/npccorps/?datasource=tranquility",
    true
  );
  conName.send();
 
});

  
}

//get corporation name
function getCorpNames(element) {
  console.log(element);
  let corpConn = new XMLHttpRequest();
  corpConn.onload = () => {
    if (this.status == 200) {
      console.log(this.responseText);
    }
  };
  corpConn.open(
    "get",
    `https://esi.evetech.net/latest/corporations/${element}/?datasource=tranquility`,
    true
  );
  corpConn.send();
}

Проще говоря, это связано с асинхронным поведением - когда вы вызываете getNpcCorpId(), это HTTP-запрос, выполнение которого занимает некоторое время, но следующая строка запускается немедленно, поэтому в этот момент corpId все еще пуст. Итак, чтобы исправить эту проблему, вы можете использовать await, который заставит JavaScript ждать, пока обещание не вернет результат.

Надеюсь, это вам поможет!