JavaScript Promise Interview Questions

Promise states — the only three

A Promise is always in exactly one of three states. Transitions only go one direction — a settled Promise never changes back.

// pending → fulfilled
const resolved = new Promise((resolve, reject) => {
  resolve('success')
})

// pending → rejected
const rejected = new Promise((resolve, reject) => {
  reject(new Error('something broke'))
})

// Still pending — resolves after 1 second
const delayed = new Promise((resolve) => {
  setTimeout(() => resolve('done'), 1000)
})

Once settled, the value is locked. Multiple .then() calls on the same Promise all receive the same value:

const p = Promise.resolve(42)
p.then(v => console.log(v))  // 42
p.then(v => console.log(v))  // 42 — same value, called again
// Attaching .then() after it's settled still works — fires asynchronously

Creating Promises

// Constructor — wrapping a callback-based API
function readFilePromise(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, 'utf8', (err, data) => {
      if (err) reject(err)    // error path
      else     resolve(data)  // success path
    })
  })
}

// Promise.resolve() / Promise.reject() — shorthand for already-settled values
const immediate = Promise.resolve({ id: 1, name: 'Alice' })
const failed    = Promise.reject(new Error('Not found'))

// Wrapping a synchronous value — useful in functions that must always return a Promise
function getUser(id) {
  if (cache.has(id)) return Promise.resolve(cache.get(id))
  return fetch(`/api/users/${id}`).then(r => r.json())
}

Consuming Promises — .then(), .catch(), .finally()

fetch('/api/user/1')
  .then(response => response.json())      // transform the response
  .then(user => {
    console.log(user.name)               // use the data
    return user.id                       // pass to the next .then()
  })
  .then(id => fetch(`/api/posts/${id}`)) // chain another async call
  .then(r => r.json())
  .then(posts => console.log(posts))
  .catch(err => {
    // Catches ANY rejection from ANY step above
    console.error('Something failed:', err)
  })
  .finally(() => {
    // Runs after settled — whether fulfilled or rejected
    // Perfect for cleanup: hide spinners, close connections
    setLoading(false)
  })

The chain — what actually makes .then() work

Every .then() returns a new Promise. This is not obvious and is the source of most Promise bugs. What the new Promise resolves to depends on what the handler returns:

// If the handler returns a plain value → next .then() gets that value
Promise.resolve(1)
  .then(n => n + 1)   // returns 2 — not a Promise, just a number
  .then(n => n * 10)  // 2 → 20
  .then(console.log)  // 20

// If the handler returns a Promise → the chain waits for it to settle
Promise.resolve(1)
  .then(n => fetch(`/api/items/${n}`))  // returns a Promise
  .then(r => r.json())                  // waits for fetch, then transforms
  .then(console.log)                    // gets the JSON

// If the handler throws → the chain jumps to the nearest .catch()
Promise.resolve(1)
  .then(n => { throw new Error('oops') })
  .then(n => console.log('never runs'))
  .catch(err => console.log('caught:', err.message))  // 'caught: oops'

Promise.all() — wait for everything, fail fast

// All must resolve — resolves with an array of all values in order
const [users, posts, settings] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/settings').then(r => r.json()),
])
// All three fetches run IN PARALLEL — not sequentially
// Total time = slowest request, not sum of all requests

// If ANY rejects, Promise.all immediately rejects
// The other Promises are not cancelled — they continue running,
// but their results are discarded
Promise.all([
  Promise.resolve(1),
  Promise.reject(new Error('failed')),
  Promise.resolve(3),
]).catch(err => console.log(err.message))  // 'failed'

Promise.allSettled() — wait for everything, never fail

// Waits for ALL to settle regardless of outcome
// Returns array of result objects, never rejects
const results = await Promise.allSettled([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/broken-endpoint').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
])

results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log('success:', result.value)
  } else {
    console.log('failed:', result.reason)
  }
})
// Use when you need all results, even partial failures — dashboards, batch operations

Promise.race() — first one wins

// Settles with the first Promise to settle — fulfilled or rejected
const result = await Promise.race([
  fetch('/api/fast-server'),
  fetch('/api/slow-server'),
])
// Gets the response from whichever server responds first

// Classic use: timeout wrapper
function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error(`Timed out after ${ms}ms`)), ms)
  )
  return Promise.race([promise, timeout])
}

await withTimeout(fetch('/api/slow'), 5000)  // rejects if fetch takes > 5s

Promise.any() — first success wins (ES2021)

// Like race() but ignores rejections — resolves with first FULFILLMENT
// Only rejects if ALL promises reject (AggregateError)
const fastest = await Promise.any([
  fetch('https://cdn1.example.com/resource'),
  fetch('https://cdn2.example.com/resource'),
  fetch('https://cdn3.example.com/resource'),
])
// Gets data from whichever CDN responds first successfully
// If one CDN is down, the others cover it — unlike race() which would reject

Common mistakes

// ❌ Mistake 1: Forgetting to return inside .then()
fetch('/api/user')
  .then(r => {
    r.json()           // forgot return — next .then() gets undefined
  })
  .then(user => console.log(user))  // undefined

// ✓ Fix: always return
fetch('/api/user')
  .then(r => r.json()) // return the Promise
  .then(user => console.log(user))

// ❌ Mistake 2: Creating a new Promise unnecessarily (Promise constructor antipattern)
function getUser(id) {
  return new Promise((resolve, reject) => {
    fetch(`/api/users/${id}`)
      .then(r => r.json())
      .then(resolve)
      .catch(reject)
  })
}

// ✓ Fix: fetch already returns a Promise — just return it
function getUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json())
}

// ❌ Mistake 3: Unhandled rejections — Promise rejects silently if no .catch()
fetch('/api/data')
  .then(r => r.json())
  // No .catch() — rejection is swallowed, causes UnhandledPromiseRejection warning

// ✓ Fix: always terminate chains with .catch()
fetch('/api/data')
  .then(r => r.json())
  .catch(err => handleError(err))

// ❌ Mistake 4: Sequential when you meant parallel
async function loadData() {
  const users  = await fetchUsers()   // waits for this to complete
  const posts  = await fetchPosts()   // THEN starts this — sequential!
  return { users, posts }             // Total time = users + posts
}

// ✓ Fix: start both at once, then await both
async function loadData() {
  const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()])
  return { users, posts }  // Total time = max(users, posts)
}