What is a Promise, and how does async/await relate to it?
What the interviewer wants to hear
- A Promise represents a value that will be available later, and is pending, fulfilled or rejected
- then and catch register callbacks for success and failure
- async functions always return a Promise
- await pauses the async function until the Promise settles, without blocking the main thread
- Errors are handled with try/catch, and independent work can run in parallel with Promise.all
Model answer
A Promise is an object that stands for a result that is not ready yet, like the response of a network request. It starts as pending and then becomes either fulfilled with a value or rejected with an error, and you react with then and catch. async/await is syntax on top of promises that makes asynchronous code read like normal step-by-step code. An async function always returns a Promise. Inside it, await pauses that function until the promise settles and gives you the value, or throws the error so you can use try/catch. It does not block the browser; other code and rendering keep running. A common mistake is awaiting independent requests one after another, which makes them sequential. When they do not depend on each other, I start them together and use Promise.all, or Promise.allSettled if partial failure is acceptable. I also remember that fetch only rejects on network errors, so I check response.ok.
Can you answer it under time pressure?
Take a timed easy round and get scored on every answer.
More easy Frontend Developer questions
- Explain the CSS box model. What is the difference between content-box and border-box?
- What is the difference between var, let and const in JavaScript?
- What is semantic HTML and why does it matter?
- In React, what is the difference between props and state?
- How do you make a web page responsive for mobile, tablet and desktop?
- What is the difference between Flexbox and CSS Grid, and when would you use each?
- What is a closure in JavaScript? Give a practical example of where you use one.
- How do you make a form accessible?
- A button on a page does not work when clicked. How would you use browser DevTools to find the problem?