పొందు (అనుకరణ)

నిజమైన పేజీలో, fetch(url) సర్వర్‌కి కాల్ చేస్తుంది. ఇక్కడ లెర్నింగ్ బ్రౌజర్‌లో మనం చేయలేము బాహ్య సర్వర్‌లతో మాట్లాడండి, కాబట్టి మేము "నకిలీ" fetchని ఉపయోగిస్తాము: పరీక్షలలో, a globalThis.fetch ఇంజెక్ట్ చేయబడింది ఇది ముందే నిర్వచించిన డేటాను అందిస్తుంది, కాబట్టి మీరు ప్రాక్టీస్ చేయవచ్చు నెట్‌వర్క్‌పై ఆధారపడకుండా తర్కం.

మీరు శ్రద్ధ వహించే API నిజమైన దానితో సమానంగా ఉంటుంది:

const response = await fetch('/api/utenti');
const data = await response.json();

fetch(url) Response ఆబ్జెక్ట్‌కు పరిష్కరించే వాగ్దానాన్ని అందిస్తుంది. Response.json() తిరిగి వస్తుంది ఇన్ టర్న్ పార్స్డ్ బాడీతో ఒక ప్రామిస్. కాబట్టి మీరు రెండు వేచి ఉండాలి.

పూర్తి ఉదాహరణ

async function loadUsers() {
  const response = await fetch('/api/utenti');
  const users = await response.json();
  return users;
}

const list = await loadUsers();
// [{...}, {...}]

అది విజయవంతమైందో లేదో తనిఖీ చేస్తోంది

fetch సర్వర్ లోపం స్థితి (404, 500)తో ప్రతిస్పందిస్తే ** త్రో చేయదు**. ఇది ఇప్పటికీ మీకు ఇస్తుంది ఒక Response, కానీ ok: falseతో:

const r = await fetch('/api/utenti');
if (!r.ok) {
  throw new Error(`HTTP ${r.status}`);
}
const data = await r.json();

fetch నెట్‌వర్క్ విఫలమైతే మాత్రమే త్రో చేస్తుంది (కనెక్షన్ లేదు, DNS, ...).

సమాంతరంగా బహుళ అభ్యర్థనలు: Promise.all

మీరు N స్వతంత్ర కాల్‌లు చేయవలసి వస్తే, వాటిని కలిసి ప్రారంభించండి మరియు Promise.allతో వాటన్నింటి కోసం వేచి ఉండండి:

const [u, p] = await Promise.all([
  fetch('/api/utenti').then((r) => r.json()),
  fetch('/api/prodotti').then((r) => r.json()),
]);

వరుసగా రెండు awaitsతో ఇది దాదాపు రెండు రెట్లు సమయం పడుతుంది (మొత్తం); సమాంతరంగా అది రెండింటిలో గరిష్టంగా (నెమ్మదిగా).

దీనిని ప్రయత్నించండి

వ్యాయామం సమీక్షించండి