Vytváření požadavků API pomocí NodeJS

Pokud jste typ člověka, který ve svém volném čase čte technické příspěvky v Javascriptu (jste), nemusíte, abych vám říkal, že JQuery je mrtvý. Sami JQuery prohlásili, že JQuery je mrtvý. Jediná skvělá věc na JQuery je, kdo ji může nejrychleji odstranit ze svého staršího zásobníku, což vyvolává otázku:proč je třetí nejoblíbenější stránka na tomto webu starý příspěvek o JQuery?

Vedení blogu výukových programů mě hodně naučilo o propasti mezi vnímáním a realitou. Zatímco my vydavatelé obsahu vyhazujeme střední příspěvky z našich slonovinových věží, rychle si vytváříme představu o tom, co „všichni“ dělají, ale ukázalo se, že „všichni“ zahrnují pouze jednotlivce, kteří jsou výjimečně viditelní. Tato demografická skupina tvoří výrazně méně než 10–20 % aktivní pracovní síly. Předpokládal bych, že jakýkoli příspěvek se slovem „Reagovat“ okamžitě vybuchne, když ve skutečnosti mají lidé větší zájem o používání Handlebars s ExpressJS (mimochodem nejsem na ten příspěvek hrdý, prosím nečtěte ho).

Chci poskytnout alternativu k používání volání AJAX při interakci s rozhraními REST API, abych si v první řadě vyjasnil, že jsem kdy umožnil špatné chování. Doufejme, že ti, kteří zabloudili, najdou něco, co by si z toho mohli vzít. Vzhledem k tomu, jak hluboko jsem se sám ponořil do GraphQL králičí nory, je to možná poslední šance vůbec se obtěžovat psaním o RESTu.

Knihovna výběru:node-fetch

Stejně jako vše v Javascriptu existuje příliš mnoho balíčků, které dělají totéž a řeší stejný problém. Vytváření požadavků API není výjimkou. http je trochu primitivní, požadavek přerušení při vytváření pomocí Webpack, r2 vypadá jako zbytečný klon a tak dále. Nenechte mě začít s asynchronními knihovnami se 40 různými metodami pro řetězení požadavků. Kdo přehání požadavky API do té míry, že stejně potřebujeme tolik možností pro propojení nebo paralelní požadavky API?

Po použití všech těchto knihoven node-fetch je dnes tou zbraní. Zjednodušeně řečeno:je to přímočaré a jediné, které skutečně funguje hned po vybalení s Webpackem bez absurdních konfiguračních nesmyslů. Jediná dobrá alternativa drop-in, se kterou jsem se obtěžoval, je node-isometricfetch . Isometric Fetch napodobuje syntaxi node-fetch , ale působivě funguje na obě na straně klienta a serveru.

Nastavení

Spusťte projekt Node a nainstalujte node-fetch:

npm install --save node-fetch

V souboru JS, o který bychom chtěli požádat, můžeme odkazovat na node-fetch pomocí require():

const fetch = require('node-fetch');

Vytvoření požadavku na načtení uzlů

Začneme nejzákladnějším možným požadavkem GET:

fetch('https://example.com')
  .then(response => response.json())
  .then(data => {
    console.log(data)
  })
  .catch(err => ...)

Opravdu, to je vše, co vyžaduje základní úroveň. Bez zadání metody node-fetch předpokládá, že vytváříme požadavek GET. Z těla požadavku vygenerujeme JSON a výsledek vytiskneme do konzole.

Je pravděpodobné, že z žádného požadavku nezískáte velkou hodnotu, aniž byste cílovému koncovému bodu předali záhlaví, parametry nebo tělo. Zde je návod, jak bychom provedli složitější (a realističtější) hovor POST:

var url ='https://example.com';
var headers = {
  "Content-Type": "application/json",
  "client_id": "1001125",
  "client_secret": "876JHG76UKFJYGVHf867rFUTFGHCJ8JHV"
}
var data = {
  "name": "Wade Wilson",
  "occupation": "Murderer",
  "age": "30 (forever)"
}
fetch(url, { method: 'POST', headers: headers, body: data})
  .then((res) => {
     return res.json()
})
.then((json) => {
  console.log(json);
  // Do something with the returned data.
});

To je spíš ono:teď předáváme hlavičky a tělo JSON. V případě potřeby fetch() metoda také přijímá credentials parametr pro ověření.

Všimněte si, že se vyhýbáme peklu zpětného volání tím, že zachováváme logiku, která využívá odpověď JSON v našem then() funkce šipky. Můžeme řetězit dohromady tolik těchto prohlášení, kolik chceme.

Vlastnosti odpovědi

Objekt odpovědi obsahuje mnohem více než jen tělo odpovědi JSON:

fetch('https://example.com')
.then(res => {
  res.text() // response body (=> Promise)
  res.json() // parse via JSON (=> Promise)
  res.status //=> 200
  res.statusText //=> 'OK'
  res.redirected //=> false
  res.ok //=> true
  res.url //=> 'https://example.com'
  res.type //=> 'basic'
                   // ('cors' 'default' 'error'
                   // 'opaque' 'opaqueredirect')

  res.headers.get('Content-Type')
})

res.status je zvláště užitečný při vytváření funkčnosti kolem zachycení chyb:

fetch('https://example.com')
  .then(reportStatus)

function checkStatus (res) {
  if (res.status >= 200 && res.status < 300) {
    return res
  } else {
    let err = new Error(res.statusText)
    err.response = res
    throw err
  }
}