Search code examples
javascriptasync-awaites6-promise

How can I convert this async function to promise?


Hello I have this async function which retrieves user profile and repositories through github api and returns them in an object.

And I want to convert this to a promise based function by using promise chaining (without any helper methods).

async function getUser(user) {
  const profileResponse = await fetch(`https://api.github.com/users/${user}`);
  const profileData = await profileResponse.json();

  const repoResponse = await fetch(`https://api.github.com/users/${user}/repos`);
  const reposData = await repoResponse.json();
  // returning an object with profile and data
  return {
    profile:profileData,
    repos:repoData,
  };
}

//Calling the function here.
getUser("abufattah").then((res) => console.log(res));

I have managed to get it done using two helper functions and promise.all() method.

But how can I achieve the same thing by using promise chaining without any helper functions.

//Helper function 1: returns a promise with user profile data.
function getUserProfile(user) {
  return fetch(`https://api.github.com/users/${user}`)
         .then((res) =>res.json());
}


//Helper function 2: returns a promise with user repositories data.
function getUserRepos(user) {
  return fetch(`https://api.github.com/users/${user}/repos?per_page=5&sort=created`)
         .then((res) => res.json());
}
//Main function
function getUserWithPromise(user) {
  return new Promise((resolve) => {
    let profile = getUserProfile(user);
    let repos = getUserRepos(user);

    Promise.all([profile, repos]).then((values) => {
      resolve({ profile: values[0], repos: values[1] });
    });
  });
}

// calling the function here
getUserWithPromise("abufattah").then((res) => console.log(res));

Solution

  • Transformation of async/await syntax to .then() calls is quite mechanical, especially if it doesn't involve any control flow syntax (loops or conditionals):

    function getUser(user) {
      return fetch(`https://api.github.com/users/${user}`).then(profileResponse => {
        return profileResponse.json().then(profileData => {
          return fetch(`https://api.github.com/users/${user}/repos`).then(repoResponse => {
            return repoResponse.json().then(reposData => {
              // returning an object with profile and data
              return {
                profile:profileData,
                repos:reposData,
              };
            });
          });
        });
      });
    }
    

    But there's no good reason to write code like that. If it's just that your target environment does not support async/await, let a transpiler do the transformation.