MockAPI: hent og opret profiler

Opgavebeskrivelse

Opret først en gratis MockAPI-konto og en resource, fx profiles, med felterne name og email. Brug kun opdigtede testdata; endpointet er ikke en sikker database.

  1. Indsæt dit resource-endpoint i endpoint.
  2. Implementér getEntries():
    • hent endpointet med fetch;
    • kontrollér res.ok;
    • kast en forståelig Error, hvis requesten fejler;
    • returnér res.json().
  3. Implementér addEntry(entry) på samme måde, men med POST, JSON-header og JSON.stringify(entry).
  4. Genindlæs previewet, og kontrollér at eksisterende profiler vises.
  5. Opret en ny profil, og kontrollér at formularen kun nulstilles efter et succesfuldt request.
  6. Fastgør formularen eller profillisten under Asynkrone states, og følg deres busy-state under requesten.
  7. Indsæt midlertidigt en forkert URL, og kontrollér at fejlen vises i grænsefladen — ikke kun i konsollen.

Listen bygges med createElement() og textContent. Data fra et API må ikke uden videre interpoleres ind i innerHTML.

const endpoint = ""

const form = document.querySelector("#profile-form")
const submitButton = form.querySelector("button")
const statusMessage = document.querySelector("#api-status")
const errorMessage = document.querySelector("#api-error")
const entries = document.querySelector("#entries")

async function getEntries() {
  // Hent profilerne fra dit endpoint.
  return []
}

async function addEntry(entry) {
  // Send entry som JSON med POST, og returnér den oprettede profil.
  return entry
}

function createEntryElement(entry) {
  const article = document.createElement("article")
  const heading = document.createElement("h3")
  const email = document.createElement("p")

  article.className = "entry"
  heading.textContent = entry.name
  email.textContent = entry.email

  article.append(heading, email)
  return article
}

async function renderEntries(successMessage = "") {
  if (!endpoint) {
    statusMessage.textContent = "Indsæt først dit eget MockAPI-endpoint i JavaScript."
    return
  }

  entries.ariaBusy = "true"
  errorMessage.textContent = ""

  try {
    const data = await getEntries()
    const fragment = document.createDocumentFragment()

    data.forEach(entry => {
      fragment.append(createEntryElement(entry))
    })

    entries.replaceChildren(fragment)
    statusMessage.textContent = successMessage || `${data.length} profiler hentet.`
  } catch (error) {
    errorMessage.textContent = error.message
  } finally {
    entries.ariaBusy = "false"
  }
}

async function handleSubmit(event) {
  event.preventDefault()

  if (!endpoint) {
    errorMessage.textContent = "Indsæt først dit eget MockAPI-endpoint."
    return
  }

  const data = Object.fromEntries(new FormData(form))

  submitButton.disabled = true
  form.ariaBusy = "true"
  statusMessage.textContent = "Gemmer profil…"
  errorMessage.textContent = ""

  try {
    const entry = await addEntry(data)
    form.reset()
    await renderEntries(`${entry.name} blev tilføjet.`)
  } catch (error) {
    errorMessage.textContent = error.message
  } finally {
    submitButton.disabled = false
    form.ariaBusy = "false"
  }
}

form.addEventListener("submit", handleSubmit)

if (endpoint) {
  renderEntries()
}
Preview

Fetch-syntaks

const res = await fetch(endpoint)

if (!res.ok) {
  throw new Error("Kunne ikke hente profiler")
}

return res.json()

Profiler