Implementing async and await after making a fetch request

Question

Implementing async and await after making a fetch request

I am in the process of updating my code from using callbacks to utilize async and await. However, I am a bit confused on how to properly implement it within my current setup.

The current setup involves:

Clicking a button that triggers the clicker function
The clicker function then triggers the ajax function
The ajax function performs a fetch request
After receiving a response, I need to pass it back to the clicker function

Currently, I am receiving an undefined value from the ajax function. Can someone please assist me in identifying the issue?

var ajax = function() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => { console.log('ajax function', json); return json; })
.catch(error => console.log(error))
};

var clicker = async function() {
var a = await ajax();
console.log('clicker function', a);
};

<div onclick="clicker(event, this);">
Test Me
</div>

javascript ajax

Answer 1

Answer №1

Experiment

var fetchData = async function() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    let data = await response.json();
    console.log('fetchData function', data)
    return data;

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

var clickHandler = async function() {
  var result = await fetchData();
  console.log('clickHandler function', result);
};

.btn { border-radius: 5px; background: #00ff00; width: 80px; padding: 10px;cursor: pointer; }

<div class="btn" onclick="clickHandler(event, this);">
  Try It Out
</div>

Answer 2

Experiment

var fetchData = async function() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    let data = await response.json();
    console.log('fetchData function', data)
    return data;

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

var clickHandler = async function() {
  var result = await fetchData();
  console.log('clickHandler function', result);
};

.btn { border-radius: 5px; background: #00ff00; width: 80px; padding: 10px;cursor: pointer; }

<div class="btn" onclick="clickHandler(event, this);">
  Try It Out
</div>

Answer 3

Answer №2

Remember, you can only await a promise.

The reason the return value of ajax() is undefined is because there is no return statement included.

Although fetch does return a promise, it needs to be explicitly returned in order for it to be utilized.

To resolve this issue, make sure to include a proper return statement:

return fetch('https://jsonplaceholder.typicode.com/todos/1')

Answer 4

Remember, you can only await a promise.

The reason the return value of ajax() is undefined is because there is no return statement included.

Although fetch does return a promise, it needs to be explicitly returned in order for it to be utilized.

To resolve this issue, make sure to include a proper return statement:

return fetch('https://jsonplaceholder.typicode.com/todos/1')

Implementing async and await after making a fetch request

Answer №1

Answer №2

Similar questions

Error message retrieval in Liferay fails due to malfunctioning Ajax listener

Are there any methods to utilize Zod for validating that a number contains a maximum of two decimal places?

Capture various data points in an array with each click

JavaScript: Unusual behavior discovered in forEach iteration

Struggling with a component that won't load in JSX?

Tips for preventing window.location from becoming relative to the file

Using AJAX and React to handle RESTful requests

Encountering module error 'internal/fs' after updating to Node 7

Leverage the potential of the value parameter within a mongoose scope

Tips for linking server value with Javascript onmousedown in an aspx web page

In Javascript, objects within local scope cannot be accessed from nested functions

Retrieving updated information from database (PHP)

Ways to reach state / methods outside of a React component

What is the best way to retrieve data from this array?

methods for pausing music through a toggle button in a React JS application

Leverage Angular to highlight updated items within a list

How can you include the product price in the cart using the URL on WooCommerce?

Steps to show a particular row in a Vue.js API

Having trouble making .click() function work in jQuery

bringing in a js file with an import statement at the beginning