JavaScript · API · Beginner

Your First Request

5 tasks

Make your first HTTP request with fetch and read the JSON response.

Quick topic start and explanations before exercises (exercises below):

Making HTTP requests with fetch

#
`fetch` is JavaScript's built-in function for making HTTP requests. When you call it, the browser sends a request to the server -- but the server's response takes time. JavaScript handles this with **asynchronous execution**: instead of freezing the whole program while waiting, `fetch` returns a **Promise** -- an object that will hold the response once it arrives. The cleanest way to work with Promises is `async/await`. Mark a function with `async`, then use `await` to pause it until a Promise resolves. The rest of your program keeps running: ```javascript async function main() { const response = await fetch('https://apilearn.tukas.dev/api/products/'); const data = await response.json(); console.log(data); } main(); ``` With `fetch` you always need **two `await` calls**: ```javascript const response = await fetch(url); // 1st await: wait for the server to reply const data = await response.json(); // 2nd await: read and parse the body ``` Why two? `fetch` resolves as soon as the server sends the **headers** -- before the body arrives. Calling `response.json()` starts reading the body, which is a second async operation. The `response` object between the two awaits has useful properties: ```javascript console.log(response.status); // 200, 404, 500, ... console.log(response.ok); // true if status is 200-299 console.log(response.url); // final URL after any redirects ``` `response.ok` is the key property for error checking -- `true` for any 2xx status, `false` for 4xx/5xx. Unlike `axios`, plain `fetch` never throws on HTTP errors -- you always get a `response` object back.

Reading the response

#
A complete example that fetches the product list and reads its fields: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function main() { const response = await fetch(`${BASE_URL}/api/products/`); const data = await response.json(); console.log('Status:', response.status); // 200 console.log('Total products:', data.count); // 372 console.log('On this page:', data.results.length); // 20 const first = data.results[0]; console.log(first.name, first.price); console.log(first.category.name); // category is an object: {id, name, slug} } main(); ``` Fetch a single product by id: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getProduct(id) { const response = await fetch(`${BASE_URL}/api/products/${id}/`); const product = await response.json(); console.log(product.name); // "Tea Table Set with Three Chairs" console.log(product.price); // "150.00" (string) console.log(product.sell_price); // "135.00" (after discount) console.log(product.slug); // "tea-table-set-three-chairs" console.log(product.category.name); // "Kitchen" console.log(product.category.slug); // "kitchen" return product; } async function main() { const p = await getProduct(1); console.log(p); } main(); ``` Note that `price` is a string, not a number. Use `parseFloat(product.price)` if you need to do math with it.

fetch and Response quick reference

#
**fetch(url, options)** ```javascript fetch(url) // GET request fetch(url, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) ``` **Response properties** ``` response.status number HTTP status code (200, 404, ...) response.ok boolean true if status 200-299 response.url string Final URL after redirects response.headers Headers Response headers object ``` **Response methods** ``` await response.json() Parse body as JSON → object await response.text() Parse body as plain text → string ``` **Always two awaits** ```javascript const response = await fetch(url); // wait for headers const data = await response.json(); // wait for body ``` **Product object fields** ``` id number Numeric id name string Product name slug string URL-friendly identifier price string e.g. "150.00" — convert with parseFloat() sell_price string Price after discount discount string Discount amount quantity number Stock quantity category object {id, name, slug} image string Image URL ```

Exercises:

01

Fetch the product list

#

Use `fetch` to GET `/api/products/`. Print the total number of products (`count`) and how many results are on the first page.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // 1. fetch /api/products/
  // 2. print count and results.length
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/products/`);
  const data = await response.json();
  console.log(data.count);
  console.log(data.results.length);
}

main();
02

Fetch a single product

#

Fetch the product with id 1 from `/api/products/1/`. Print its `name`, `price`, and `slug`.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/products/1/
  // print name, price, slug
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/products/1/`);
  const product = await response.json();
  console.log(product.name);
  console.log(product.price);
  console.log(product.slug);
}

main();
03

Check response.status and response.ok

#

Fetch `/api/products/99999/` (a product that does not exist). Print the `status` code and the value of `response.ok`. Then fetch `/api/products/1/` and do the same.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // Fetch a missing product — check status and ok
  // Fetch a real product — check status and ok
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const r1 = await fetch(`${BASE_URL}/api/products/99999/`);
  console.log(r1.status, r1.ok);  // 404 false

  const r2 = await fetch(`${BASE_URL}/api/products/1/`);
  console.log(r2.status, r2.ok);  // 200 true
}

main();
04

Fetch categories

#

Fetch `/api/categories/`. Print the total number of categories and the `name` of each one.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // GET /api/categories/ and print count + each name
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/categories/`);
  const data = await response.json();
  console.log(data.count);
  for (const cat of data.results) {
    console.log(cat.name);
  }
}

main();
05

Fetch the first product name from the list

#

Fetch `/api/products/`, take the first result from `results`, and print its name and price. Convert the price to a number with `parseFloat` and print it as a float too.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // fetch products, get first result, print name, price string, and parsed price
}

main();
Solution 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/products/`);
  const data = await response.json();
  const first = data.results[0];
  console.log(first.name);
  console.log(first.price);
  console.log(parseFloat(first.price));
}

main();