Nuxt axios无法处理服务器响应

Question

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:

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?

Answer 1

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) {
    // ...
  }
}