Many web pages are served out full of holes. Those holes are filled in asynchronously, after the initial render, with content that's pulled from a database. This ability to save and load data and modify the content of a page dynamically has turned web development into full-fledged application development.
fetch function is used to issue requests to servers. The server's URL is passed as a parameter. The URL can point to an image or an HTML document, but it often points to a web service. The web service receives the URL and interprets it like a function call. For example, consider the free PokéAPI, a web service that provides access to database of information about the Pokémon universe. This service provides many endpoints, which are the names of the functions the service can execute. Each endpoint defines what parameters its expects.
Try inspecting the
pokemon-species endpoint. Its URL has the form
https://pokeapi.co/api/v2/pokemon-species/ID-OR-NAME. Try visiting https://pokeapi.co/api/v2/pokemon-species/weedle in your browser. In some browsers, you'll see a page full of JSON-formatted data. Try visiting the page in Firefox, and you will see it in a more readable form.
Try removing the species parameter from the URL. You should see an array of species. Suppose you wanted to turn that array into an unordered list. In a script, you grab a reference to your
ul and issue a
When you open this example as popup and inspect your browser's developer tools, you find that the value returned by
fetch is not actually the data from the server. Rather, it's a
Promise object. The
fetch function must communicate with a remote machine over the network, which may be slow. To prevent the local browsing experience from being slowed down by this network request,
fetch is run asynchronously. The calling script picks up executing immediately.
Eventually, the data from the server will arrive, and you want to process it. But where do you put that code? You don't know, because you don't know when
fetch will finish.
You must turn to the promise, which serves as an event mediator. When
fetch finishes, it will fulfill the promise it made to grab some data from a URL. You attach your processing code to that promise, and the code will be run when the promise is fulfilled. You attach your code using the
then function, which behaves a bit like
then functions to chain the promises together in sequence:
When you open this example as a popup and examine the log, you see your beautiful data. From there, you modify the
process function to iterate through the results and turn each species into a list item:
Note that the PokéAPI web service doesn't give you all 900+ species at once. The
limit parameters are used to page through the results.
Try querying a different endpoint and displaying the results in an appropriate way.