Ajax 调用后如何同步更新值

Question

I'm fetching data from my node(express) backend server to react front end. But when I try to access the array index values I get the output as undefined. I sure am doing something wrong here. Appreciate if someone could help me.

Here's my server side code:

const companyDetails = [];

companies.forEach((company) => {
    companyDetails.push(company);  
});

app.get("/api/companies", (req, res) => {
    res.json(companyDetails)
});

Here's my client side code:

let arr = [];

    function fetchComNames() {
        axios.get('/api/companies').then(res => {
          for(let i=0; i<=4; i++) {
              arr.push(res.data[i].name)
          }
        })
    }

    fetchComNames();

    console.log(arr[0]);   //undefined

But when I console.log(arr); it prints out the array. I just cant access each index value separately.

Answer 1

The problem here is that the axios call is an async call and the follow of your code is sync so when you execute this code javascript execute the sync code first then the async one so in this case the line of code onsole.log(arr[0]); is executed before the response comes from the server

Answer 2

Adding to below answer, fetchComNames is asynchronously updated the arr as you're using API call. You're accessing the data before it has been updated, that's why getting undefined .

You can try this.

    
const fetchComNames = async () => {
    try {
      const response = await axios.get('/api/companies')
      const array = response.data.map(c => c.name)
      OR
      const array = []
      for (let i = 0; i<= 4; i++) {
        array.push(response.data[i].name)
      }
      console.log(array[0])
    } catch(err) {
      console.error(err)
    }
}

fetchComNames()

Answer 3

API calls are asynchronous so you are accessing the array before it has its values in it. Try marking your enclosing function as async and awaiting the axios get so that the call is forced to synchronous.

let arr = [];

    async function fetchComNames() {
      const fetched = await axios.get('/api/companies');
          for(let i=0; i<=4; i++) {
              arr.push(fetched.data[i].name)
          }
        
    }

    fetchComNames();

    console.log(arr[0])

Answer 4

(async () => {
    const arr = [];

    // Marking this function as async function so that 
    // we can use await to wait until result returning 
    // before further executing code below
    async function fetchComNames() {
        // I don't have access to you API
        // I resolve data after 1 second to simulate Ajax call here
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve({
                    data: [{
                        name: "1"
                    }, {
                        name: "2"
                    }, {
                        name: "3"
                    }, {
                        name: "4"
                    }]
                });
            }, 1000);
        }).then(res => {
            return res.data.map(each => each.name)
        });
    }

    // You are calling Ajax call via Axios, which is a Promise. 
    // It is executed asyncrhoniously. 
    // If you need to use result from this call, 
    // you need to wait until result returning from async call. 
    // You can achieve it with await.
    
    // Update existing array
    arr.push(...(await fetchComNames()));

    // After await, arr should contain result you expected.
    console.log(arr[0]);

    // There reason why your version is not working 
    // is because you are accessing the first cell of arr 
    // wihich is still empty as the Axios is still running 
    // and you are not waiting until it returns result.
})();