Ebben a sorozatban rendszeresen megosztok harapásméretű ismereteket a JavaScript-ről. Kitérünk a JS alapjaira, a böngészőkre, a DOM-ra, a rendszer tervezésére, a domain architektúrára és a keretrendszerekre.
A Fetch egy felület, amely lehetővé teszi AJAX-kérelem készítését JavaScript-ben. A modern böngészők széles körben alkalmazzák, és API meghívására használják.
const promise = fetch(url, [options]) A Fetch hívása ígéretet ad vissza egy Response objektummal. Az ígéretet elutasítják, ha hálózati hiba van, és akkor oldja fel, ha nincs probléma a szerverhez való csatlakozással, és a kiszolgáló válaszolt egy állapotkódra. Ez az állapotkód lehet 200s, 400s vagy 500s.
Minta FETCH kérelem -
fetch(url) .then(response => response.json()) .catch(err => console.log(err)) A kérést alapértelmezés szerint GET-ként küldjük. A POST / PATCH / DELETE / PUT küldéséhez a method tulajdonságot használhatja a optionsparaméter részeként . Néhány más lehetséges érték optionseltarthat -
method: például GET, POST, PATCHheaders: Fejlécek objektummode: Így példáulcors,no-cors,same-origincache: gyorsítótár mód kérésrecredentialsbody
Itt tekintheti meg az elérhető lehetőségek teljes listáját
Példa felhasználásra:
Ez a példa bemutatja a letöltés használatát az API meghívására és a git-tárolók listájának lekérésére.
const url = '//api.github.com/users/shrutikapoor08/repos'; fetch(url) .then(response => response.json()) .then(repos => { const reposList = repos.map(repo => repo.name); console.log(reposList); }) .catch(err => console.log(err)) A POST kérés elküldéséhez az alábbiak szerint lehet a metódus paramétert használni az async / await szintaxissal.
const params = { id: 123 } const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }); const data = await response.json();