The axios post request with async/await does not support the "then" function

Question

The axios post request with async/await does not support the "then" function

Hi there! I am currently in the process of registering a user through a POST request.

I have implemented axios along with async/await for this task. However, I'm encountering an error that says register.then is not a function. Can someone please provide assistance?

async sendUserData() {
  try {
    const register = await axios.post('/register', {
      email: this.register.email.trim(),
      password: this.register.password.trim(),
    });
    register.then(
      response => {
        console.log(response);
      }
    );
  } catch (e) {
    console.log(e);
  }
}

javascript asynchronous vue.js axios ecmascript-2016

Answer 1

Answer №1

The await command waits for a promise to be resolved (which means it handles the then method internally) but it does not directly return a promise. Instead, await returns the result of the promise.

Therefore, the correct approach to achieve your goal is:

async sendUserData() {
  try {
    const response = await axios.post('/register', {
      email: this.register.email.trim(),
      password: this.register.password.trim(),
    });

    console.log(response);

  } catch (e) {
    console.log(e);
  }
}

However, keep in mind that the async keyword itself returns a promise. Therefore, you should invoke your function like this:

sendUserData().then(console.log('done'));

Answer 2

The await command waits for a promise to be resolved (which means it handles the then method internally) but it does not directly return a promise. Instead, await returns the result of the promise.

Therefore, the correct approach to achieve your goal is:

async sendUserData() {
  try {
    const response = await axios.post('/register', {
      email: this.register.email.trim(),
      password: this.register.password.trim(),
    });

    console.log(response);

  } catch (e) {
    console.log(e);
  }
}

However, keep in mind that the async keyword itself returns a promise. Therefore, you should invoke your function like this:

sendUserData().then(console.log('done'));

The axios post request with async/await does not support the "then" function

Answer №1

Similar questions

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Can you explain the variance between Facebook HTML and traditional HTML5?

Quickly showing information following an API request with React hooks

The error message that keeps popping up is saying that it cannot access the property "username" as it is undefined

What is the best method to access the query string or URL within an AJAX page?

How to display an HTML element conditionally with v-if based on a variable's value

Error: Unable to return callback response from NodeJs function

Tips for leveraging Vuetify in a chrome extension without the need for build or bundler tools

Ways to verify browser rollover support (as some mobile devices lack a cursor)

What is the process to insert a record into a table by triggering an AJAX call upon clicking "save

Transforming JSON information for Google chart data table

Tips for preserving the encoded value of a variable in base64?

An error is raised when attempting to refactor [].concat.apply([], [x]) to [].concat(x)

The background property does not support linear-gradient in CSS

Assigning a value to a cell depending on a specific condition

The battle between Google Visualization API JSON and ArrayToDataTable in Python, a nightmare of data types

Encounter TypeScript error when using getFirebaseAdmin from next-firebase-auth

What sets apart genuine user interactions from programmatically generated actions?

"Effortlessly handle adding and removing items with a single button using

Lack of Ajax query string parameters