Best method for linking asynchronous requests using axios

Question

Best method for linking asynchronous requests using axios

Is it possible to make an API call using axios based on the response of another initial API call, all within asynchronous functions?

I attempted the following approach with await/promise:

function fetchUserDetails(userId) {
  return axios.get( "https://apicall/" + userId )
}

function fetchUserPosts(username) {
  return axios.get("https://apicall/" + username)
}

var UsersOutput = async function () {
  const userDetails = await fetchUserDetails(2928928);
  const userPosts = await fetchUserPosts(userDetails.data.username);
  return { userDetails, userPosts }
}

However, this doesn't seem to return any data from either of the calls. Any advice would be greatly appreciated.

javascript vue.js axios

Answer 1

Answer №1

Your initial two functions are returning promises, not actual data. Consider using the following approach:

async function retrieveUser(value){
  return (await axios.get( "https://apicall/" + value )).data;
}

async function getUserPosts(username){
  return (await axios.get("https://apicall/" + username)).data;
}

If you prefer to keep the first two functions as they are:

var UsersOutput = async function () {
  const userProfile = (await retrieveUser(2928928)).data;
  const userPosts = (await getUserPosts(userProfile.data.username)).data;
  return { userProfile, userPosts }
}

In my opinion, the first option is better because the getter functions return objects instead of promises, reducing the need for (await ).data;. However, this is subjective and a matter of personal preference.

Answer 2

Your initial two functions are returning promises, not actual data. Consider using the following approach:

async function retrieveUser(value){
  return (await axios.get( "https://apicall/" + value )).data;
}

async function getUserPosts(username){
  return (await axios.get("https://apicall/" + username)).data;
}

If you prefer to keep the first two functions as they are:

var UsersOutput = async function () {
  const userProfile = (await retrieveUser(2928928)).data;
  const userPosts = (await getUserPosts(userProfile.data.username)).data;
  return { userProfile, userPosts }
}

In my opinion, the first option is better because the getter functions return objects instead of promises, reducing the need for (await ).data;. However, this is subjective and a matter of personal preference.

Answer 3

Answer №2

Have you considered checking out this helpful resource? https://javascript.info/async-await

Although you can use .then() in your case, I personally recommend utilizing async await.

With async functions and await keyword, you have the ability to chain various actions together and utilize the final result in your current context.

Answer 4

Have you considered checking out this helpful resource? https://javascript.info/async-await

Although you can use .then() in your case, I personally recommend utilizing async await.

With async functions and await keyword, you have the ability to chain various actions together and utilize the final result in your current context.

Best method for linking asynchronous requests using axios

Answer №1

Answer №2

Similar questions

The outcome of the Javascript Calculator is showing as "Undefined"

Is there a way to remove CSS based on the generated HTML code?

Struggling to prevent keyboard-triggered date changes in the MUI DatePicker API

function complete, ajax request finished

Tips for accessing elements using document.getElementsByTagName

Issues arising with shadows in THREE.js

What is the most effective way to manage and respond to multiple events while also organizing the overall structure of

The Ultimate Guide for Formatting JSON Data from Firebase

Menu options are neatly displayed alongside video player without any overlap

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

Creating a Social Media Platform with JavaScript, Bootstrap, JQuery, PHP, and Mysqil

Embed the website onto a webpage using ajax or an iframe without any need for navigation

How can I locally store 3D models and textures using three.js?

What steps should I take to ensure a Vue 2/Vuetify form does not submit if the mandatory fields are left blank?

Questions regarding prototype-based programming in Javascript

Allow frontend JavaScript to retrieve a text file that is restricted to individual users

Adding JSON data to a MySQL column in JSON format with the help of NodeJS

Securing API routes in Laravel

Refreshing and reloading within the same jQuery function

"Null" is the value assigned to a JavaScript variable