I have tried everything for this to load on the first load. I even added the .finally as a desperate measure. I tried async await, but not sure I did that correctly. This is the version that works, but I have to refresh the page as it doesn't load proper the first time. I need this to be vanilla javascript.

axios.get(`https://api.github.com/repos/${orgEl}/${repoEl}/contents/Transactions/${projectJ}/${fundJ}/${poolJ}`)
      .then(response => {
        const data = response.data;
        console.log('data', data);          
        for (let j in data) {
          budgetI[j] = data[j].name.replace(/\s/g, '-'); //* over here is the 'budgetI' variable
          axios.get(`https://api.github.com/repos/${orgEl}/${repoEl}/contents/Transactions/${projectJ}/${fundJ}/${poolJ}/${budgetI[j]}`)
          .then(response => {
            const data = response.data;
            for (let m in data) {    
              axios.get(data[m].download_url)
              .then(response => {
                const data = response.data;
                bi.push(data);  //* over here is the 'bi' variable
              })
              .catch(error => console.error(error)).finally(() => {
                console.log("first load");
            });
            }      
          })
          .catch(error => console.error(error)).finally(() => {
            console.log("mid load");
        });   
          }          
      })
      .catch(error => console.error(error))
      .finally(() => {
        console.log("final load");
    });

axios.get(`https://pool.pm/wallet/${walletEl}`)
      .then(response => {
        for (let i in bi) {
          y = bi[i].budget.replace(/\s/g, '-')   //* bi value comes from axios.get above
          for (let j in budgetI) {    //* budgetI value comes from axios.get above
            if ( y == budgetI[j]) {
              totals[y] = totals[y]   (parseInt(bi[i].ada));
              totals.outgoing = totals.outgoing   (parseInt(bi[i].ada));
            }        
          }
        };

This last axio.get uses the 'budgetI' and 'bi' variables from the top axios.get

As I type this I realize that maybe I should promise.all the first axios.get and the last axios.get . I will try that, but will upload this anyway. Hope someone can show me an easy way of improving this code.

CodePudding user response：

Without knowing anything else about your program's, or those GitHub repos', structure, I'd break this down into two async functions:

async function downloadFromDownloadURLs(url) {
  console.log(`==> ${url}`);
  const { data } = await axios.get(url);
  const downloadedData = [];
  for (let key in data) {
    let downloadUrl = data[key].download_url;
    console.log(`--> ${url}`);
    const downloadResponse = await axios.get(downloadUrl);
    downloadedData.push(downloadResponse.data);
  }
  return downloadedData;
}

async function loadData(orgEl, repoEl, projectJ, fundJ, poolJ) {
  let prefixUrl = `https://api.github.com/repos/${orgEl}/${repoEl}/contents/Transactions/${projectJ}/${fundJ}/${poolJ}`;
  const { data } = await axios.get(prefixUrl);
  const allDownloadedData = [];
  for (let dataKey in data) {
    const budget = data[dataKey].name.replace(/\s/g, "-");
    const url = `${prefixUrl}/${budget}`;
    const budgetData = await downloadFromDownloadURLs(url);
    allDownloadedData.push([budget, budgetData]);
  }
  return allDownloadedData;
}