كيفية جلب وعرض بيانات API باستخدام JavaScript النقي

async function getUser() {
  const response = await fetch('https://api.github.com/users/octocat');
  const data = await response.json();
  console.log(data);
}

getUser();

async function getUser(username) {
  const response = await fetch(`https://api.github.com/users/${username}`);

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
  }

  return response.json();
}

async function getUser(username) {
  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    renderUser(data);
  } catch (err) {
    showError(err.message);
  }
}

const output = document.getElementById('output');
const errorEl = document.getElementById('error');
const loader = document.getElementById('loader');

async function getUser(username) {
  loader.hidden = false;
  errorEl.hidden = true;
  output.hidden = true;

  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    renderUser(data);
    output.hidden = false;
  } catch (err) {
    errorEl.textContent = `Failed to load: ${err.message}`;
    errorEl.hidden = false;
  } finally {
    loader.hidden = true;
  }
}

function renderUser(data) {
  const card = document.getElementById('user-card');

  // Safe: textContent escapes HTML entities
  card.querySelector('.name').textContent = data.name ?? data.login;
  card.querySelector('.bio').textContent = data.bio ?? 'No bio.';
  card.querySelector('.repos').textContent = `${data.public_repos} repositories`;

  // Safe for URLs you trust (keep validation tight in real apps)
  const avatar = card.querySelector('.avatar');
  avatar.src = data.avatar_url;
  avatar.alt = `Avatar of ${data.login}`;
}

let currentController = null;

async function searchUsers(query) {
  // Abort any in-flight request
  if (currentController) currentController.abort();
  currentController = new AbortController();

  try {
    const response = await fetch(
      `https://api.github.com/search/users?q=${encodeURIComponent(query)}`,
      { signal: currentController.signal }
    );
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    renderResults(data.items);
  } catch (err) {
    if (err.name === 'AbortError') return; // Expected — ignore
    showError(err.message);
  }
}

async function createRepo(name, isPrivate = false) {
  const response = await fetch('https://api.github.com/user/repos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ name, private: isPrivate }),
  });

  if (!response.ok) {
    const err = await response.json();
    throw new Error(err.message ?? `HTTP ${response.status}`);
  }

  return response.json();
}