Solice UI
Back to the curriculum

Chapter 4 · JavaScript & the DOM

Async requests and updates

Some work takes time: a request travels across the network, a file is read, or a timer completes. Asynchronous JavaScript lets the page remain responsive while it waits for that result.

Beginner · Lesson 6 of 6 in this chapter

A promise represents a future result

An async function can await a promise and continue when it succeeds or fails. The surrounding interface should expose truthful loading, success, empty, and error states that match the work in progress.

State connects data to the interface

State is the current information needed to render a view, such as the query, results, and loading status. Update it from one clear owner so late responses do not overwrite a newer user action.

Loading search suggestions

  1. Typing starts a request and shows a loading state.
  2. A newer query cancels or supersedes the older request.
  3. The page displays only the result that belongs to the latest query, or a useful error if it fails.
  • Async work finishes later; the page should remain usable meanwhile.
  • Model loading, success, empty, and error truthfully.
  • Prevent stale results from replacing newer intent.