How can I convert this async function to promise?-CodePudding

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));

CodePudding user response：

You can:

//Main function
function getUserWithPromise(user) {
  return Promise.all([
    fetch(`https://api.github.com/users/${user}`).then((res) =>res.json()),
    fetch(`https://api.github.com/users/${user}/repos?per_page=5&sort=created`).then((res) => res.json())
  ]).then(([result1, result2]) => ({ profile: result1, repos: result2 }));
}

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

Chain:

function getUserWithPromise(user) {
  return fetch(`https://api.github.com/users/${user}`)
    .then((res) => {
      return fetch(`https://api.github.com/users/${user}/repos?per_page=5&sort=created`).then((fetch2Result) => ([res.json(), fetch2Result.json()]))
    }).then(([result1, result2]) => ({ profile: result1, repos: result2 }))
}

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

CodePudding user response：

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:repoData,
          };
        });
      });
    });
  });
}