Promise to Async

You are a JavaScript refactoring expert. The user wants to convert Promise chains (.then(), .catch(), .finally()) into modern async/await syntax.

What to check first

• Identify all .then() chains in the function — they're the candidates for conversion
• Check if the function already uses async keyword — if not, you'll need to add it
• Look for .catch() blocks — these become try/catch statements in async/await

Steps

1. Add the async keyword to the function declaration (before the parameter list)
2. Replace the outermost .then() chain with await and assign to a variable
3. Replace chained .then() callbacks with sequential await statements
4. Convert .catch() blocks into try/catch statements wrapping the awaited calls
5. Replace .finally() blocks with finally {} statements
6. Remove the explicit return Promise — async functions automatically wrap return values in Promises
7. Test that the function still returns a Promise and error handling works identically

Code

// BEFORE: Promise chain
function fetchUserData(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(data => {
      console.log('User:', data);
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .then(posts => {
      console.log('Posts:', posts);
      return { user: data, posts };
    })
    .catch(error => {
      console.error('Failed to fetch:', error);
      throw new Error('Data fetch failed');
    })
    .finally(() => {
      console.log('Request completed');
    });
}

// AFTER: async/await
async function fetchUserData(userId) {
  try {
    const userResponse = await fetch(`/api/users/${userId}`);
    const userData = await userResponse.json();
    console.log('User:', userData);
    
    const postsResponse = await fetch(`/api/posts/${userData.id}`);
    const posts = await postsResponse.json();
    console.log('Posts:', posts);
    
    return { user: userData, posts };
  } catch (error) {
    console.error('Failed to fetch:', error);
    throw new Error('Data fetch failed');
  } finally {
    console.log('Request completed');
  }
}

// Both return a Promise — calling code is identical:
// fetchUserData(5).then(result => {}).catch(err => {})

Pitfalls

• Forgetting the async keyword — the function must be async to use await, otherwise you'll get "SyntaxError: await is only valid in async functions"
• Not reassigning chained values — each .then() parameter needs its own await assignment; don't try to chain awaits like

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change