Odesílání požadavků AJAX ve Vue.js

Co je AJAX?

Asynchronní Javascript a XML (AJAX), je způsob komunikace s webovým serverem z aplikace na straně klienta prostřednictvím HTTP nebo HTTPS protokol.

I když AJAX obsahuje XML v názvu, způsob, jakým jsou data odesílána prostřednictvím požadavků nebo přijímána, nemusí být XML, ale také prostý text nebo ve většině případů JSON, protože je lehčí a je součástí JavaScriptu v a sám.

Proč je AJAX užitečný?

Vue.js se používá jako front-end framework a pokud někdy budete chtít komunikovat se serverem, získat nebo uložit informace do databáze nebo provést nějaké výpočty s vašimi daty, budete s největší pravděpodobností potřebovat AJAX .

I když AJAX lze použít vytvořením XMLHttpRequest objekt, který bude dostupný prostřednictvím prohlížeče. Existují určité balíčky, které nám mohou pomoci komunikovat s naším serverem.

Vue.js má oficiální balíček, který se nazývá vue-resource který funguje jako HTTP klient, ale oficiální dokumentace doporučuje používat Axios.

Instalace Axios a nastavení komponenty

Axios je HTTP klient a lze jej nainstalovat do našeho package.json závislosti prostřednictvím vašeho správce balíčků, ať už je to NPM nebo Příze :

$ npm install axios
OR
$ yarn add axios

Po instalaci můžeme nastavit minimalistickou testovací komponentu pro demonstrační účely:

// Test.vue
<template>
  <div/>
</template>

<script>
export default {
  data() {
    return {};
  };
}
</script>

Použití Axios v komponentách Vue

Žádosti na server přes HTTP trvá určitou dobu, než se vrátí s odpovědí, a aby bylo zajištěno, že informace zobrazené uživateli jsou správné, slibuje budou muset být použity k ujištění se, že se data vrátila, než budete pokračovat ve spouštění našeho kódu.

Chcete-li jej použít v komponentě, jednoduše importujeme balíček a přiřadíme jej do proměnné:

// Test.vue
<script>
import axios from "axios";

export default {
  data() {
    return {};
  }
};
</script>

Obecně se volání API provádějí uvnitř připojeného Hák životního cyklu Vue.

Budeme používat falešnou datovou službu JSON s názvem JSONPlaceholder. Toto je simulace toho, jak bude vypadat koncový bod back-endu, když narazí na REST API :

// Test.vue
<script>
import axios from "axios";

export default {
  data() {
    return {};
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
  }
};
</script>

Ve výše uvedeném příkladu kódu je komponenta vykreslena před informacemi z JSONPlaceholder přijel. Použití příslibů tedy zajistí, že s daty budeme moci pracovat a přidat je do našeho zobrazení.

Zpracování odpovědí pomocí then()

then() funkce, nám umožňuje manipulovat s naším slibem a sdělit našemu kódu, co uděláme, pokud/když byl požadavek úspěšný. Můžeme například pomocí funkce zpětného volání zkontrolovat naši odpověď v konzole:

mounted() {
  axios.get("https://jsonplaceholder.typicode.com/todos/")
    .then(response => console.log(response))
}

Odpověď byla vrácena a můžeme ji vidět v konzole prohlížeče, ale jak uživateli zobrazíme seznam úkolů?

Seznam úkolů bychom měli uchovávat uvnitř dat objekt pro budoucí odkazování uvnitř DOM.

Budeme to nazývat todosList a zkopírujeme vlastnost data objektu odpovědi neměnným způsobem (takže nezměníme skutečný objekt odpovědi) pomocí spread v JavaScriptu a pomocí slice pouze zobrazit prvních 10 prvků pole, abychom nenačítali stovky úkolů:

<script>
import axios from "axios";

export default {
  data() {
    return {
      todosList: []
    };
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
      .then(response => {
         this.todosList = [...response.data].slice(0, 10)
      })
  }
};
</script>

Ošetření chyb pomocí catch()

Co se stane, když žádost selže? Podle toho bude nutné řídit stav aplikace. K tomu máme catch() funkce, kterou lze vnořit do našeho zásobníku funkcí:

mounted() {
  axios.get("https://jsonplaceholder.typicode.com/todos/")
    .then(response => console.log(response))
    .catch(err => {
       // Manage the state of the application if the request 
       // has failed      
     })
}

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Tímto způsobem se zobrazí výzva k chybě a můžeme s ní dělat mnoho věcí, například zobrazit uživateli chybovou zprávu jako upozornění nebo zobrazit kartu s nápisem „No Todos Available“. Možnosti jsou nekonečné.

Zobrazení úkolů

Pomocí v-for Direktiva Vue můžeme vložit naše úkoly do šablony a přidat nějaký styl pro vizuální účely:

<template>
  <div>
    <ul 
      class="test-list" 
      v-for="todo in todosList" 
      :key="todo.id"
    >
      <li class="test-list--item">
        {{ todo.id }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      todosList: []
    };
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
      .then(response => {
         this.todosList = [...response.data].slice(0, 10)
      })
      .catch(err => {
         // Manage the state of the application if the request 
         // has failed      
      })
  }
};
</script>

<style>
.test-list {
  font-family: Roboto;
  list-style: none;
  margin: 20px auto;
  width: 50%;
}

.test-list--item {
  border: 1px solid rgb(41, 41, 41);
  border-radius: 5px;
  text-align: center;
  display: block;
  box-shadow: 2px 2px rgba(138, 124, 124, 0.4);
}

.test-list--id {
  font-weight: 300;
  margin: 10px auto;
}

.test-list--title {
  font-weight: 500;
  margin: 20px auto;
  text-transform: capitalize;
}

.test-list--complete {
  font-weight: 600;
  margin: 10px auto;
  color: #56ca86;
}

.test-list--incomplete {
  font-weight: 600;
  margin: 10px auto;
  color: #ca5656;
}
</style>

Pokud zkontrolujeme náš prohlížeč, uvidíme něco takového:

Gratulujeme, právě jsme odeslali požadavek HTTP na API a zobrazili data uživateli!

Async/Await vs Promises

Async/Await je relativně nový jazykový konstrukt JavaScriptu, díky kterému je náš asynchronní kód mnohem čistší.

Přestože volání Async/Await budou nakonec převedena na sliby, přináší to jiný přístup, protože již nepotřebujeme nastavovat funkce zpětného volání pro náš kód, všichni víme, jak moc je nenávidíme!

Náš ukázkový kód, který používá Async/Await, by vypadal asi takto, s přidáním magie na destrukci objektů, aby náš kód vypadal ještě lépe:

// Test.vue
async mounted() {
    const url = 'https://jsonplaceholder.typicode.com/todos/'
    const { data } = await axios.get(url)
    this.todosList = [...data].slice(0, 10)
}

Namontovaný hák životního cyklu má předponu async klíčové slovo. To zajistí, že hák vrátí slib.

V háku await Klíčové slovo způsobí, že funkce s ním volaná bude čekat na pokračování svého rozlišení.

Závěr

AJAX je klíčovou součástí moderního vývoje webu, a i když to na první pohled může vypadat skličující, mít ji ve svém arzenálu je nutností.

Samotná povaha Vue.js vás nutí přemýšlet o svém kódu asynchronně, abyste mohli své komponenty správně aktualizovat, a poskytnout tak vašim uživatelům úžasný zážitek.

Další informace o asynchronním kódu pro Vue najdete ve Vue.js CookBook.