CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
KodeFor.Me
KodeFor.Me

Reputation: 13511

Nuxt axios cannot handle the server sesponse

I am new to Nuxt.js and I am faced with a strange kind of issue. I have an endpoint in my backend API, allowing the end user to send a token and a new password and reset the user password.

While the request is sent correctly, and the server responding with the correct data:

enter image description here

In the Nuxt.js side, I have an issue, with the response data.

So, to handle all the HTTP requests using the axios, I have a class like that:

class WebAPI {
    // $axios is the instance used in the Nuxt.js context
    constructor($axios) {
        this.$http = $axios;
    }

    async call(config) {
        try {
            ///////////////////////////////////////////////////////
            // HERE IS THE PROBLEM. THE FOLLOWING CONSOLE.LOG
            // IT RETURNS undefined WHILE THE NETWORK RESPONSE
            // RETURNS WITH DATA
            ///////////////////////////////////////////////////////
            const result = await this.$http(config);
            console.log(result);
            // ...
        } catch( e) {
            // ...
        }
    }
}

And I use this class like:

const data = {
    token,
    new_password
};

const options = {
    method: 'POST',
    url   : '/reset-password',
    data
};

return this.webApi.call(options);

But as you probably see, in the WebAPI service, the response of the axios is undefined.

Also, it worths to mention, that the exact same WebAPI class working perfectly with other API Requests I do throughout the application.

Could you help with that issue? Do you see anything wrong?

Upvotes: 0

Views: 217

Answers (1)

Alex
Alex

Reputation: 1423

I think you are using axios wrong. Try use $request method, like that:

async call(config) {
  try {
    const result = await this.$http.$request(config);
    console.log(result);
    // ...
  } catch( e) {
    // ...
  }
}

Upvotes: 1

Related Questions