Await that's locked within a solo asynchronous function

Question

Await that's locked within a solo asynchronous function

async function submitForm(e){
  e.preventDefault()
  console.log(e.target)

  try {
    const response = await axios.post('/api/<PATH>', {username, password});
    console.log(response.data);
    const token = response.data.token

    if (token) {
      const json = jwt.decode(token) as { [key: string]: string};
  
      const secondResponse = await axios.post('/api/<PATH>', { token });
      const data = secondResponse.data;

An error is occurring on this particular line of code:

await axios.post('/api/<PATH>', { token })

My IDE is displaying the following message:

TS1308: 'await' expressions are only allowed within async functions and at the top levels of modules.

The current code cannot be compiled due to this issue. I am attempting to pass the token value into another axios API call, but it seems impossible because of the aforementioned error. Any suggestions on how to resolve this would be greatly appreciated.

javascript asynchronous async-await axios next.js

Answer 1

Answer №1

await is required to be directly inside an async function; you should also make the callback function async.

async function submitForm(e){
  e.preventDefault()
  console.log(e.target)

  await axios.post('/api/<PATH>', {username, password})
    // async here
    .then(async res => {
      console.log(res.data)
      const token = res.data.token
      if (token){
        const json = jwt.decode(token) as { [key: string]: string}
  
        await axios.post('/api/<PATH>', { token })
          .then(res => {
            const data = res.data

As Bergi pointed out, it's not recommended to mix await and .then; your code can be structured like this:

async function submitForm(e){
  e.preventDefault()
  console.log(e.target)

  let res = await axios.post('/api/<PATH>', {username, password})
  console.log(res.data)
  const token = res.data.token
  if (token){
    const json = jwt.decode(token) as { [key: string]: string}
  
    res = await axios.post('/api/<PATH>', { token })
    const data = res.data;

Answer 2

await is required to be directly inside an async function; you should also make the callback function async.

async function submitForm(e){
  e.preventDefault()
  console.log(e.target)

  await axios.post('/api/<PATH>', {username, password})
    // async here
    .then(async res => {
      console.log(res.data)
      const token = res.data.token
      if (token){
        const json = jwt.decode(token) as { [key: string]: string}
  
        await axios.post('/api/<PATH>', { token })
          .then(res => {
            const data = res.data

As Bergi pointed out, it's not recommended to mix await and .then; your code can be structured like this:

async function submitForm(e){
  e.preventDefault()
  console.log(e.target)

  let res = await axios.post('/api/<PATH>', {username, password})
  console.log(res.data)
  const token = res.data.token
  if (token){
    const json = jwt.decode(token) as { [key: string]: string}
  
    res = await axios.post('/api/<PATH>', { token })
    const data = res.data;

Await that's locked within a solo asynchronous function

Answer №1

Similar questions

Error in Vue.js: "Trying to access properties of an object that is undefined (specifically '$refs')"

Return to the previous URL after executing window.open in the callback

Prevent a JavaScript file from resetting when a user refreshes the page

Using Phoenix Channels and Sockets in an Angular 2 application: A comprehensive guide

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

An error was thrown at line 474 in module.js

I am having trouble with my jQuery datatable Ajax call - instead of reaching the server, I am seeing an alert indicating

Using jQuery to adjust the length of a string to fit within a specific width

Removing Click event upon button click - Implementing Vue and Vuetify

Unraveling JSON data retrieved from a MySQL query

Tips for avoiding page reloading with the use of vue, vue recaptcha, and axios

Adjusting the height of a vertical slider in Vuetify2 is not customizable

How to handle a POST request with an empty body in Node.js express routing, utilizing body-parser

"Optimize Your Data with PrimeNG's Table Filtering Feature

Issue with .submit() not submitting form after setTimeout timer runs out

"An error has occurred stating that the header is not defined in

Unable to get spacing correct on loading page

Is it possible to navigate to the Next page using a different button instead of the pagination controls

The sticky header is malfunctioning due to a null offsetTop value

Encountering an error in Angular where the property does not exist in type