V Reactu se backendová komunikace obvykle dosahuje pomocí protokolu HTTP. Zatímco mnoho vývojářů zná rozhraní požadavků XML HTTP a rozhraní Fetch API pro vytváření požadavků HTTP, existuje další výkonná knihovna s názvem Axios, která proces dále zjednodušuje.
Obsah
- Předpoklady
- Úvod do Axios
- Kroky k vytvoření aplikace React
- Potřeba Axios v Reactu
- GET požadavek s Axios
- Požadavek POST s Axios:
- Smazat požadavek pomocí Axios:
- Objekty odezvy v Axios
- Chybový objekt:
- Vlastnosti knihovny Axios
- Zkratkové metody v Axios
- Závěr
Úvod do Axios:
Axios, což je oblíbená knihovna, se používá hlavně k odesílání asynchronních požadavků HTTP do koncových bodů REST. Tato knihovna je velmi užitečná pro provádění operací CRUD.
- Tato oblíbená knihovna slouží ke komunikaci s backendem. Axios podporuje Promise API, nativní pro JS ES6.
- Pomocí Axios vytváříme požadavky API v naší aplikaci. Jakmile je požadavek podán, získáme data v Return a poté tato data použijeme v našem projektu.
- Tato knihovna je mezi vývojáři velmi oblíbená. Můžete se podívat na GitHub a najdete na něm 78 tisíc hvězdiček.
Před instalací Axios by měla být vaše projektová aplikace React připravena k instalaci této knihovny. Vytvořit Reagovat aplikaci podle níže uvedených kroků…
Kroky k vytvoření aplikace React:
Krok 1: Níže je příkaz k vytvoření aplikace React ve vašem projektu…
npx create-react-app myreactapp>
Krok 2: Zadejte adresář vytvořený v prvním kroku.
cd myreactapp>
Krok 3: Nainstalujte knihovnu Axios pomocí příkazu uvedeného níže…
npm i axios>
Struktura projektu:
xor c++
Aktualizované závislosti v package.json soubor.
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' },> Příklad: Tento fragment kódu používá axios k vytvoření požadavku HTTP na backendový server.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})> >// Catch errors if any> >.>catch>((err) =>{});> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Odeslat soubory ); } } exportovat výchozí aplikaci;> |
>
to string metoda java
>
Kroky ke spuštění aplikace: Otevřete terminál a zadejte následující příkaz.
npm start>
Výstup: Otevřete prohlížeč a náš projekt se zobrazí v URL http://localhost:3000/
Výše uvedený příklad je jen malý popis kódu, který ukazuje, jak používat Axios ve vašem projektu. V nadcházející části probereme několik metod, jako je GET, POST a PUT v Axios.
Potřeba Axios v Reactu:
Jak jsme diskutovali, Axios vám umožňuje komunikovat s API ve vašem projektu React. Stejné úkoly lze provádět také pomocí AJAX, ale Axios vám poskytuje více funkcí a funkcí, což vám pomůže rychle vytvořit vaši aplikaci.
Axios je knihovna založená na slibech, takže musíte implementovat některé asynchronní požadavky HTTP založené na slibech. jQuery a AJAX také vykonávají stejnou práci, ale v projektu React React zpracovává vše ve svém vlastním virtuálním DOM, takže není nutné používat jQuery vůbec.
Níže je uveden příklad načtení dat zákazníka pomocí Axios…
Javascript
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(error));> };> getCustomersData();> |
>
>
Nyní pojďme k dalšímu bodu a pochopíme, jak lze provádět různé operace, jako je načítání dat nebo konzumace dat pomocí Axios (GET-POST-DELETE).
ZÍSKEJTE požadavek s Axios:
Vytvořte komponentu MyBlog a připojte ji k životnímu cyklu komponenty DidMount. Importujte Axios nahoře a načtěte data pomocí požadavku Get.
Javascript
jinak smyčka v Javě
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>> >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>>);> >}> }> |
>
>
Zde používáme axios.get (URL) k získání příslibu, který vrací objekt odpovědi. Vrácená odpověď je přiřazena k objektu příspěvku. Můžeme také získat další informace, jako je stavový kód atd.
Požadavek POST s Axios:
Vytvořte novou komponentu AddPost pro požadavky Post. Tento požadavek přidá příspěvek do seznamu příspěvků.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>Název příspěvku: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> |
>
>
Ve výše uvedeném kódu jsme provedli požadavek HTTP Post a přidali nový příspěvek do databáze. Událost onChange spustí metodu handleChange() a aktualizuje požadavek, když požadavek API úspěšně vrátí data.
Smazat požadavek pomocí Axios:
Pro odeslání požadavku na smazání na server se používá axios.delete. Při vytváření této adresy URL požadavku a volitelnou konfiguraci musíte zadat dva parametry.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> Při odesílání požadavku na odstranění budete muset nastavit tělo požadavku a záhlaví. Pro tento účel použijte config.data. Ve výše uvedeném požadavku POST upravte kód, jak je uvedeno níže…
seřazený arraylist java
Javascript
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
>
>
Objekty odezvy v Axios:
Když odešlete požadavek na server, obdržíte ze serveru objekt odpovědi s vlastnostmi uvedenými níže…
- data: Získáváte data ze serveru ve formě užitečného zatížení. Tato data jsou vrácena ve formě JSON a analyzována zpět do objektu JavaScriptu.
- postavení: Získáte kód HTTP vrácený ze serveru.
- statusText: HTTP stavová zpráva vrácená serverem.
- záhlaví: Všechny hlavičky posílá server zpět.
- konfigurace: původní konfigurace požadavku.
- žádost: skutečný objekt XMLHttpRequest.
Chybový objekt:
Pokud dojde k problému s požadavkem, dostanete chybový objekt. Slib bude odmítnut s chybovým objektem s danými vlastnostmi
- zpráva: Text chybové zprávy.
- Odezva: Objekt odpovědi (pokud byl přijat).
- žádost: Aktuální objekt XMLHttpRequest (při spuštění v prohlížeči).
- konfigurace: Původní konfigurace požadavku.
Vlastnosti knihovny Axios
- Data JSON se transformují automaticky.
- Transformuje data požadavku a odpovědi.
- Užitečné při vytváření požadavků HTTP z Node.js
- Vytváří XMLHttpRequests z prohlížeče.
- Poskytněte podporu na straně klienta pro ochranu před XSRF.
- Podporuje slibované API.
- Možnost zrušit požadavek.
Zkratkové metody v Axios:
Níže jsou uvedeny některé zkrácené metody Axios…
- axios.request(config)
- axios.head(url[, config])
- axios.get(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.delete(url[, config])
- axios.options(url[, config])
- axios.patch(url[, data[, config]])
Závěr
Tento článek vysvětlil vše o knihovně Axios. Probrali jsme některé užitečné operace, jako je načítání dat, odesílání dat, aktualizace dat nebo mazání dat v Axios. Jakmile začnete pracovat na Reactu, budete muset tuto knihovnu používat ke komunikaci s databázovým serverem. Je tedy důležité si to procvičit a pochopit, jak věci v Axios fungují.