Using Vue Js, I utilized Axios to make a call within a function, receiving and storing the retrieved data into an array

Question

Using Vue Js, I utilized Axios to make a call within a function, receiving and storing the retrieved data into an array

While working inside the function shown in the screenshot, I am encountering an issue when trying to access the data retrieved from the backend using axios.get. After exiting the axios block, the values of the array appear as undefined when I attempt to print them.

The data I am fetching from the backend is in string format. My aim is to utilize this data across different methods by returning it. Unfortunately, I have not been able to find a solution to this problem.

getReasonsForWaitingCustomer() {
  this.adimKodlariLastString = "";
  if (this.$route.params.status == "musteri-bekleniyor") {
            axios.get(URL + "xxx/xxx?xxx=xxx)
                .then(response => {
                    for (var i = 0; i < response.data.data.length; i++) {
                        if (this.stepCode.includes(response.data.data[i].adim_kodu) == false) {
                            this.stepCode.push(response.data.data[i].adim_kodu);
                        }
                    }
                    for (var j = 0; j < this.stepCode.length; j++) {
                            this.adimKodlari += this.stepCode[j] + ",";
                        }
                    this.adimKodlariLastString = this.adimKodlari.slice(0, -1);
                    console.log("inAxiosThen",this.adimKodlariLastString);
                })
        }
        console.log("afterAxios",this.adimKodlariLastString);
return "apfapofapkapfka" --> It's working
return this.adimKodlariLastString --> It's not working. I want this to work.
},

Most solutions I've come across involve utilizing the incoming value within HTML tags. However, my requirement is to make use of this value within methods.

I am able to retrieve the desired string values when they are within the .then(response) block and checked through the console.

However, outside the .then() block, I face difficulties in accessing these values through the console.

javascript vue.js vuejs2 frontend

Answer 1

Answer №1

If you want to retrieve data using axios calls, keep in mind that they are asynchronous. An easier and more organized approach would be:

const response = await axios.get('url')
console.log(response.data)
this.adimKodlariLastString = response.data
// proceed with your logic here

Alternatively, if you prefer to work with your existing code, you can simply add:

await

prior to axios (although using pure Promises may lead to nested Promises).

Answer 2

If you want to retrieve data using axios calls, keep in mind that they are asynchronous. An easier and more organized approach would be:

const response = await axios.get('url')
console.log(response.data)
this.adimKodlariLastString = response.data
// proceed with your logic here

Alternatively, if you prefer to work with your existing code, you can simply add:

await

prior to axios (although using pure Promises may lead to nested Promises).

Answer 3

Answer №2

Currently, this function represents the final status of my work. It is operational and producing successful results.

async getReasonsForWaitingCustomer() {
  let lastAdimCodes = "";
  let stepCodeArray = [];
  let adimKodlari = "";
  if (this.$route.params.status == "xxx") {
            const response = await axios.get(URL + "xxx/xxx");
                    for (var i = 0; i < response.data.data.length; i++) {
                        if (!stepCodeArray.includes(response.data.data[i].adim_kodu)) {
                            stepCodeArray.push(response.data.data[i].adim_kodu);
                        }
                    }
                    for (var j = 0; j < stepCodeArray.length; j++) {
                            adimKodlari += stepCodeArray[j] + ",";
                        }
                    lastAdimCodes = adimKodlari.slice(0, -1);
        }
        console.log("adimKodu",lastAdimCodes);
      return lastAdimCodes;
},

Screenshot of Promise in console

I reviewed their solutions, but I found them confusing. They manually set a value and then called it as the result. I am unsure how to extract my incoming data in PromiseResult.

Answer 4

Currently, this function represents the final status of my work. It is operational and producing successful results.

async getReasonsForWaitingCustomer() {
  let lastAdimCodes = "";
  let stepCodeArray = [];
  let adimKodlari = "";
  if (this.$route.params.status == "xxx") {
            const response = await axios.get(URL + "xxx/xxx");
                    for (var i = 0; i < response.data.data.length; i++) {
                        if (!stepCodeArray.includes(response.data.data[i].adim_kodu)) {
                            stepCodeArray.push(response.data.data[i].adim_kodu);
                        }
                    }
                    for (var j = 0; j < stepCodeArray.length; j++) {
                            adimKodlari += stepCodeArray[j] + ",";
                        }
                    lastAdimCodes = adimKodlari.slice(0, -1);
        }
        console.log("adimKodu",lastAdimCodes);
      return lastAdimCodes;
},

Screenshot of Promise in console

I reviewed their solutions, but I found them confusing. They manually set a value and then called it as the result. I am unsure how to extract my incoming data in PromiseResult.

Answer 5

Answer №3

Exciting update! I have discovered a solution to the issue at hand. For those seeking answers, this may be of help. As previously mentioned, I expressed my desire to utilize a certain value from a prompt in another function.

I have successfully retrieved my values within this function

I have transformed this function into an async operation. The original function now awaits the new one.

Check out the latest results in the console

Answer 6

Exciting update! I have discovered a solution to the issue at hand. For those seeking answers, this may be of help. As previously mentioned, I expressed my desire to utilize a certain value from a prompt in another function.

I have successfully retrieved my values within this function

I have transformed this function into an async operation. The original function now awaits the new one.

Check out the latest results in the console

Using Vue Js, I utilized Axios to make a call within a function, receiving and storing the retrieved data into an array

Answer №1

Answer №2

Answer №3

Similar questions

Typescript encountering onClick function error during the build process

What could be causing React to throw an invalid hook error when using useRoutes?

Using Node.js for HTML redirections involves creating routes and setting

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Guide on managing firebase and webrtc tasks within a client-side component using Next.js 13

Utilizing Vue.js: accessing a global value within a template string

Update the image within the svg tag

Is it possible to import data into a script?

Oops! A JSON parsing error occurred due to the presence of an unexpected token '}'

What is the best way to eliminate the "onclick" attribute from an HTML element using JavaScript?

Access specific data from a jQuery event

Record every function within the array prototype

Upon the second click, the addEventListener function is triggered

Retrieving the value of a <select> element using React.useState in a Nextjs environment

When updating the innerHTML attribute with a new value, what type of performance enhancements are implemented?

A step-by-step guide on changing the class of a focused contenteditable element with a button click using jQuery

The reactivity of arrays in Vue components' props is limited

Deleting content in a text area when specific text is entered

a pair of browser windows displaying a web application built with ASP.NET MVC

Managing OAuth2 redirections on the frontend: Best practices