V těchto dnech jsem musel spotřebovat API, které vracelo data ze zemí po celém světě. Do té doby byl můj kontakt se spotřebou API 0. Právě jsem studoval HTTP metody, kamarád mě naučil o CRUD a vytvořili jsme malý server s Expressem. Ale při její konzumaci jsem netušil, jak na to. No a kamarád mě přivedl k aportu a rozhodl jsem se o tom něco napsat, abych se to naučil dělat a vysvětlovat z pohledu začátečníka. Tak pojďme začít.

Co je načítání?

Nástroj se používá hlavně ve front-endu a slouží k vrácení dat z existujícího API a jejich zobrazení našemu uživateli.

API pro načítání nám poskytuje rozhraní pro vytváření požadavků HTTP prostřednictvím prohlížeče prostřednictvím Promises. Načtení používáme jako prostředek k nahrazení XMLHttpRequest který již byl široce používán ke konzumaci API.

Než použijeme načítání, musíme trochu porozumět slibům. Je to pro mě docela nový koncept, ale není to tak složité.

Co jsou sliby?

Sliby jsou vývojovým vzorem, jehož cílem je reprezentovat dokončení asynchronních operací. To znamená, že definují akci, která bude provedena v budoucnu poté, co bylo něco dokončeno. Způsob, jakým jsou sliby vytvářeny při načítání, je prostřednictvím příkazu .then() . Když provádíme vyhledávání API, používáme přísliby k provedení akcí, když je vyhledávání provedeno. Zde si můžete přečíst článek, který vysvětluje, jak sliby fungují

Spuštění projektu

Náš projekt je velmi jednoduchý, když zadáme PSČ do vstupu, spotřebujeme API a vrátíme data adresy. Za tímto účelem vytvoříme nový projekt s názvem cepSearch .

Zde níže je pohled na to, co jsem vytvořil v html.

Pro praktické účely jsem nepoužil žádný styling, pouze čistý HTML kód. Důležité je zaměřit se na logiku návrhu.

Předejte kód

Protože budu používat odkaz na id k citování některých logických procesů Javascriptu, uvedl jsem níže to, co bylo použito v HTML pro další pozadí. Je velmi důležité, abyste, pokud chcete reprodukovat to, co jsem spustil, použili stejné ID jako vstupy. Budeme tak moci správně využívat data, která nám naše načtení vrátí.

 <div class="container">
        <form action="">
          <div class="form-group">
            <label for="cep">CEP</label><br>
            <input type="text" class="form-control" id="cep">
            <small>00000-000</small>
          </div>
          <div class="form-group">
            <label for="logradouro">Logradouro</label><br>
            <input type="text" class="form-control" id="logradouro">
            <small>Rua</small>
          </div>
          <div class="form-group">
            <label for="bairro">Bairro</label><br>
            <input type="text" class="form-control" id="bairro">
            <small>Bairro</small>
          </div>
          <div class="form-group">
            <label for="localidade">Localidade</label><br>
            <input type="text" class="form-control" id="localidade">
            <small>Cidade</small>
          </div>
          <div class="form-group">
            <label for="uf">UF</label><br>
            <input type="text" class="form-control" id="uf">
            <small>Estado</small>
          </div>
        </form>
      </div>

Zpočátku musím přidat efekt rozostření na první vstupní prvek, který vložím do CEP. Rozostření kontroluje, když prvek ztratí fokus, takže když zadáme PSČ a stiskneme tabulátor, provede požadovanou funkci. Pro výběr vstupu budu odkazovat na id #cep .

Takže výběr vstupu:

$("#cep").blur(function (e) {
  }

Po výběru vstupu chci zachytit hodnotu, která byla zadána, a přiřadit tuto hodnotu proměnné. Takže máme:

$("#cep").blur(function (e) {
  let cep = this.value
  }

Tímto způsobem, kdykoli napíšeme něco do vstupu CEP a přestaneme se soustředit na vstup, přiřadí se zadaná hodnota proměnné cep , takže máme hodnotu, kterou použijeme k dotazování na data adresy.

Poté, co získáme hodnotu zadanou v CEP musíme načíst hodnotu v nějakém adresovém API. K tomu použijeme viacep API. Můžete se k němu dostat přes odkaz:https://viacep.com.br/

Je důležité, abychom si před jeho použitím přečetli dokumentaci API, abychom viděli, jak provádět metody HTTP pro vyžádání dat.

V našem případě chceme použít metodu GET, to znamená, že budeme získávat informace z API. Chci, aby byly tyto hodnoty vráceny ve formátu JSON, takže použiji strukturu, kterou pro tyto specifikace doporučuje samotný viacep:

https://viacep.com.br/ws/cep/json/

Dobře, teď máme to, co potřebujeme ke spotřebě API. Metodu, kterou použijeme k zachycení dat, použijeme fetch. Nejprve pochopme strukturu načítání.

Když voláme fetch, první hodnota, kterou očekává, je adresa URL, na kterou budou data načtena. Toto je adresa URL, kterou naše API zpřístupňuje pro dotazy. Jak víme, naše adresa URL je dynamická, protože přijímá hodnotu PSČ zadanou na vstupu. Aby se náš požadavek GET aktualizoval při každém zadání nové hodnoty, strukturujeme adresu URL takto:

https://viacep.com.br/ws/${cep}/json/

Pomocí řetězce šablony tedy můžeme přidat proměnnou cep adresu URL, kterou načtení použije.

Zatím máme následující strukturu:

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
}

Fetch je asynchronní nástroj, což znamená, že musíte počkat na dokončení operace, než s touto odpovědí něco uděláte, jinak dojde k chybě. Abychom mohli použít odpověď po dotazu, používáme zdroj .then() který provádí asynchronní operace.

Nyní řekneme, že po provedení dotazu zachytíme získanou odpověď a aplikujeme ji na funkci. Tato funkce převede naši odpověď do formátu JSON, takže data můžeme používat samostatně jako objekty.

Kód bude:

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
    .then(response => {
      response.json()
}

Když je odpověď zachycena a převedena, chceme, aby tento objekt prošel ošetřením, kde budeme filtrovat data, která budou použita. Pak použijeme jiný zdroj .then() která zavolá jinou funkci. Tato funkce obdrží vygenerovaný objekt JSON.

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
    .then(response => {
      response.json()
        .then(data => showData(data))
    })

Odpověď JSON bude vyžadovat konstantní showData . Zde budeme pracovat s objektem vráceným z našeho vyhledávání CEP.

Konstanta showData bude obsahovat funkci šipky, která bude zodpovědná za vrácení vygenerovaných dat objektu a přiřazení těchto dat do odpovídajících polí formuláře.

Spustíme konstantu a zavoláme funkci šipky pro vyhledání dat přes For-In.

const showData = (result) => {
}

Po deklaraci konstanty přiřadíme For-In.

const showData = (result) => {
  for(const campo in result){
  console.log(campo)
    }
  }

Funkce For-In předaná ve funkci šipky vrátí data pro každý z prvků objektu. A jak to dělá? Není to tak složité.

Každé z polí v objektu result se ukládá do pole konstanty, ukazuje nám to běh console.log.

Jak vidíte, každá z hodnot objektu se vrací z konstanty pole.

S těmito hodnotami v ruce použijeme podmíněnou strukturu if nakládat s daty.

const showData = (result) => {
  for(const campo in result){
    if(document.querySelector("#"+campo)){
      document.querySelector("#"+campo).value = result[campo]

    }
  }
}

Used if zachycuje prvky HTML s id polí, která vracíme (Toto pozorování je důležité, protože id musí mít v našem případě přesně stejné názvy polí).

Poté přiřadíme hodnotu každého z vrácených polí id každého ze vstupů. Řádek kódu document.querySelector("#"+campo).value = result[campo] přiřadí hodnotu pole vstupu s id příslušného pole. Tím je zajištěno fungování.

Jak vidíte, operace načítání není tak složitá, zachycuje data prostřednictvím zadané adresy URL a vrací data prostřednictvím slibů. Tato data lze převést na objekty JSON a použít v rámci naší aplikace.

Je zajímavé mít znalosti o objektech, tímto způsobem budeme schopni správně vyřídit naše požadavky.

V níže uvedených odkazech se dozvíte více o načítání a jeho použití.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

https://github.github.io/fetch/