Fetch API

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Ошибка:", error));

async function getData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Ошибка:", error);
  }
}

let response = await fetch("/api/data");

console.log(response.ok);      // true если статус 200-299
console.log(response.status);  // 200
console.log(response.statusText); // "OK"
console.log(response.headers); // Headers объект

async function getData() {
  let response = await fetch("/api/data");
  
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  
  return response.json();
}

let response = await fetch("/api/data");

// JSON
let json = await response.json();

// Текст
let text = await response.text();

// Бинарные данные
let blob = await response.blob();
let buffer = await response.arrayBuffer();

// Form data
let formData = await response.formData();

let params = new URLSearchParams({
  page: 1,
  limit: 10,
  search: "hello"
});

let response = await fetch(`/api/items?${params}`);

let response = await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Иван",
    email: "ivan@example.com"
  })
});

// PUT
await fetch("/api/users/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Пётр" })
});

// PATCH
await fetch("/api/users/1", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Пётр" })
});

// DELETE
await fetch("/api/users/1", {
  method: "DELETE"
});

let response = await fetch("/api/data", {
  headers: {
    "Authorization": "Bearer token123",
    "Content-Type": "application/json",
    "X-Custom-Header": "value"
  }
});

let response = await fetch("/api/data");

console.log(response.headers.get("Content-Type"));
console.log(response.headers.get("X-Total-Count"));

// Перебор
for (let [key, value] of response.headers) {
  console.log(`${key}: ${value}`);
}

let formData = new FormData();
formData.append("name", "Иван");
formData.append("avatar", fileInput.files[0]);

let response = await fetch("/api/upload", {
  method: "POST",
  body: formData
  // Content-Type устанавливается автоматически
});

let controller = new AbortController();

// Отменить через 5 секунд
setTimeout(() => controller.abort(), 5000);

try {
  let response = await fetch("/api/data", {
    signal: controller.signal
  });
} catch (error) {
  if (error.name === "AbortError") {
    console.log("Запрос отменён");
  }
}

async function api(endpoint, options = {}) {
  let url = `https://api.example.com${endpoint}`;
  
  let config = {
    headers: {
      "Content-Type": "application/json",
      ...options.headers
    },
    ...options
  };
  
  if (config.body && typeof config.body === "object") {
    config.body = JSON.stringify(config.body);
  }
  
  let response = await fetch(url, config);
  
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  
  return response.json();
}

// Использование
let users = await api("/users");
let newUser = await api("/users", {
  method: "POST",
  body: { name: "Иван" }
});