{"id":"code-col-js-then-chain-to-async-await","audience":"college","category":"coding","track":"coding","technique":"context","title":"Convert a promise chain to async/await with three new rules","free":false,"task":"For your intramural league site, convert loadRoster to async/await with try/catch and no .then or .catch. Three changes your team agreed on: pass a 5-second timeout to fetch with signal: AbortSignal.timeout(5000); a 404 means the team was deleted, so return [] without logging; and other errors now use console.warn instead of console.error. Keep the export, name, parameter, filter and sort. Exactly 1 code block of at most 18 lines, under 20 words of text.","materialLabel":"The function (attached to your prompt automatically)","material":"// src/roster.js  (Node 18, ESM, intramural league site for Westbrook U)\n\nexport function loadRoster(teamId) {\n  return fetch(`https://api.league.westbrook.test/teams/${teamId}/players`)\n    .then((res) => {\n      if (!res.ok) throw new Error(`HTTP ${res.status}`);\n      return res.json();\n    })\n    .then((players) =>\n      players\n        .filter((p) => p.active)\n        .sort((a, b) => a.lastName.localeCompare(b.lastName))\n    )\n    .catch((err) => {\n      console.error(\"loadRoster failed:\", err);\n      return [];\n    });\n}\n\n// Used in pages/team.js:\n//   const players = await loadRoster(params.teamId);\n//   render(players);\n//\n// Group chat notes:\n// - Sofia: the league API sometimes hangs for 30s+ and the page spins forever\n// - Marcus: deleted teams give 404 and spam our error dashboard\n// - Sofia: dashboard alerts on console.error only, keep normal failures quieter","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":18},{"type":"maxProseWords","max":20}],"mistakes":[{"title":"Missing the timeout","why":"The AI converts the syntax but can't know the API hangs; you have to ask for the timeout.","fix":"Add: \"Pass { signal: AbortSignal.timeout(5000) } to fetch.\"","checks":["r0"]},{"title":"Treating 404 like any error","why":"The AI keeps one error path, so deleted teams still hit the logs.","fix":"Add: \"If res.status is 404, return [] without logging.\"","checks":["r1"]},{"title":"Keeping console.error","why":"A straight conversion keeps console.error, which pages your team.","fix":"Add: \"Use console.warn in the catch.\"","checks":["r2"]},{"title":"A long explanation","why":"The AI explains async/await and shows before and after.","fix":"Add: \"One code block with just the function, no text.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Asks for the timeout","patterns":["timeout","AbortSignal","5000"]},{"label":"Handles 404","patterns":["404","deleted"]},{"label":"Switches to warn","patterns":["console\\.warn","warn"]},{"label":"Keeps the behavior","patterns":["filter","sort","keep"]},{"label":"Asks for only the function","patterns":["only the function","just the function","no (text|explanation)"]}],"hint":"A syntax conversion is easy; the changes your team agreed on aren't in the code. List each one, and what must stay the same.","rubricLabels":["Is an exported async function loadRoster(teamId) using await inside try/catch, with no .then or .catch, and passes { signal: AbortSignal.timeout(5000) } to fetch","Returns [] for a 404 response without logging anything, and still throws (or handles) other non-ok statuses as errors","The catch logs with console.warn(\"loadRoster failed:\", err) (not console.error) and returns [], and the active filter and lastName sort are unchanged"]}