# What does fetch do in JavaScript?

> fetch is how JavaScript asks a web address for data. How fetch, await and response.json() work, with a contacts table built from a free practice API.

Source: https://learn.ynteractive.com/content/glossary/fetch-api · Updated 2026-10-24 · Free from Stepthrough (https://learn.ynteractive.com)

[Web apps](https://learn.ynteractive.com/content/glossary#topic-web-apps) · [AI glossary](https://learn.ynteractive.com/content/glossary)

Quick answer

fetch is the function built into every browser that asks a web address (usually an API) for data. With await, the code waits for the answer; response.json() then turns the reply into a list or object the rest of the code can use.

Last updated October 24, 2026

[Take the free module →](https://learn.ynteractive.com/courses/javascript-for-small-business/3)Module 3 of the free [JavaScript for Small Business Jump Start](https://learn.ynteractive.com/courses/javascript-for-small-business) course, about 12 minutes. No account needed.

Updated October 24, 2026 · By [Robert Breen](https://learn.ynteractive.com/content/about)

## Why it matters for a small business

Business data lives in other systems: a CRM, a booking tool, an accounting app. Their APIs answer with data, and fetch is how a web page or small script reads it, instead of someone copying it by hand.

The pattern is always the same three lines: fetch the address, await the response, read the JSON. Real APIs add an API key, which must stay out of public pages.

Once the data is in a list, the rest is ordinary JavaScript: a for loop goes through each item, and each item's fields are read with a dot, such as u.name or u.company.name for a field inside another field. The same pattern fills a table, a drop-down list or a dashboard card, and it is how most no-code tools and website widgets pull live data from the systems a business already uses, from contact lists to bookings and stock levels.

## In a real lesson: JavaScript: Pull Contacts from an API into a Table

In the free [JavaScript API contacts lesson](https://learn.ynteractive.com/content/js-api-contacts-table), the code asks JSONPlaceholder, a free practice API, for its users: const response = await fetch(url); then const users = await response.json();.

A for loop then writes one table row per user with u.name, u.company.name and u.email: ten made-up contacts on the page, read live from the API.

[Try this lesson free](https://learn.ynteractive.com/modules/js-api-contacts-table) or [read the step-by-step guide](https://learn.ynteractive.com/content/js-api-contacts-table).

## Common confusions

### fetch vs an API

The API is the address that answers with data. fetch is the JavaScript function that asks it.

### await vs async

await waits for the answer; it only works inside a function marked async, such as async function load().

## Tips

- Open the API address in your browser first, to see the field names you will use.
- Never put a real API key in a public fiddle or a page anyone can read; it would let others use your account.

## Related terms

[API endpoint](https://learn.ynteractive.com/content/glossary/api-endpoint) · [JavaScript](https://learn.ynteractive.com/content/glossary/javascript)

## More Web apps terms

[FigJam](https://learn.ynteractive.com/content/glossary/figjam) · Form validation · [Frontend and backend](https://learn.ynteractive.com/content/glossary/frontend-vs-backend) · [Git branch](https://learn.ynteractive.com/content/glossary/git-branch)

## Where you use it: free lessons

- [JavaScript: Pull Contacts from an API into a Table](https://learn.ynteractive.com/content/js-api-contacts-table) (JSFiddle, 12 min)
- [n8n AI Email Responder: Draft Gmail Replies Automatically](https://learn.ynteractive.com/content/ai-email-responder-gmail-drafts-n8n) (n8n, 12 min)
- [Add AI to Make.com: ChatGPT Writes a Personal Reply, Gmail Sends It](https://learn.ynteractive.com/content/make-com-chatgpt-gmail-personalized-reply) (Make, 18 min)
- [n8n + Signatoro: AI Drafts Every Reply, Signatoro Signs It](https://learn.ynteractive.com/content/n8n-signatoro-ai-email-reply-signature) (n8n, 10 min)

## Frequently asked questions

**Why does my fetch code show nothing?**

Usually because the data had not arrived yet. Put await in front of fetch and of response.json(), inside an async function.

**Do I need a key to use fetch?**

fetch itself needs nothing. Many real APIs ask for a key in the request; practice APIs such as JSONPlaceholder do not.

**What format does fetch return?**

A response. Most business APIs send JSON, which response.json() turns into JavaScript lists and objects.

[All AI glossary terms, A to Z](https://learn.ynteractive.com/content/glossary) · [Free prompt templates](https://learn.ynteractive.com/content/prompts)