Question 136669 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Computed property is undefined rather than returned axios request response

I have a input that when it changes it should updated its computed counterpart which does an axios request however the computed property is always undefined despite there is a response from the server and I see the data does print out . Its’ just not returned for some reason.

    computed: {
        itemsChildren() {
            if (this.parentReview == null) {
                return null
            } else {
                const formData = new FormData();

                formData.append('ID', this.parentReview["ID"]);

                axios({
                    method: 'POST',
                    url: window.location.origin + '/API/List',
                    data: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
                    }
                }).then(response => {
                    const res = response.data;
                    return res;
                }).catch(error => {
                    if (error.response.status == 401 || error.response.status == 402 || error.response.status == 403) {
                        window.location.href = error.response.headers.expiredtokenredirecturi
                    }
                    console.log(error.response);
                });
            }
        }
    }

Should computed properties not return API responses?

Tags:

2

Answers


  1. 0

    You are not returning anything from your function, it is a basic mistake when working with Asynchronous code.

    Just use async/await for your axios response, also itemsChildren should be async

    computed: {
  async itemsChildren() {
    if (this.parentReview == null) {
      return null;
    } else {
      const formData = new FormData();
      formData.append('ID', this.parentReview["ID"]);

      try {
        const response = await axios({
          method: 'POST',
          url: window.location.origin + '/API/List',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
          }
        });
        return response.data;
      } catch (error) {
        if (error.response.status == 401 || error.response.status == 402 || error.response.status == 403) {
          window.location.href = error.response.headers.expiredtokenredirecturi;
        }
        console.log(error.response);
      }
    }
  }
}

    PS: I am trying to help, but I do not have the expertise in what computed is and how it works, or even if async can be used with it.

    You can read about asynchronous programming here: https://dev.to/raxraj/asynchronous-javascript-from-callbacks-to-asyncawait-a-journey-through-evolution-5578

    Login or Signup to reply.
  2. 0

    You are not correctly returning your axios request. You can return the axios request or even better do one of the following. Also I do not think that a 401,402,403 response from the server will trigger an error. But you should verify this, because I am not sure how axios handles those responses.

    Using Promises

    computed: {
    itemsChildren() {
        return new Promise( resolve => {
            if ( this.parentReview == null ) return resolve(null);

            const formData = new FormData();

            formData.append('ID', this.parentReview["ID"]);

            axios({
                method: 'POST',
                url: window.location.origin + '/API/List',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data',
                    "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
                }
            }).then(response => {
                if ( response.status == 401 || response.status == 402 || response.status == 403 ) {
                    window.location.href = response.headers.expiredtokenredirecturi;
                    return resolve(null);
                }
                return resolve( response.data );
            }).catch(error => {
                console.log( `Error [itemsChildren:axios]`, error );
                resolve( response.data );
            });
        });
    }
}

    Using Async/Await

    computed: {
    async itemsChildren() {
        if ( this.parentReview == null ) return null;

        const formData = new FormData();
        formData.append('ID', this.parentReview["ID"]);

        try {
            const response = await axios({
                method: 'POST',
                url: window.location.origin + '/API/List',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data',
                    "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
                }
            });
            if ( response.status == 401 || response.status == 402 || response.status == 403 ) {
                window.location.href = response.headers.expiredtokenredirecturi;
                return null;
            }
            return response;
        } catch ( error ) {
            console.log( `Error [itemsChildren:axios]`, error );
            return null;
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search