Hogyan készítsünk és használjunk ál-API-kat a React alkalmazásokban a Mirage.js használatával

Full-stack alkalmazások fejlesztésekor a frontend munka jelentős része a háttérből származó valós idejű adatokra támaszkodik.

Ez azt jelentheti, hogy el kell halasztania a felhasználói felület fejlesztését, amíg az API elérhetővé válik. Azonban, ha megvárja, hogy az API készen álljon a frontend beállítására, jelentősen csökkentheti a termelékenységet és meghosszabbíthatja a projektek ütemezését.

A kihívás nagyszerű megoldása a hamis API-k használata. Ezek az API-k lehetővé teszik a fejlesztést és tesztelje a frontendet olyan adatokkal, amelyek utánozzák a valós adatok szerkezetét, mindezt anélkül, hogy a tényleges adatokra hagyatkozna API.

Ismerkedés a Mirage.js Mock API-kkal

Mirage.js egy JavaScript-könyvtár, amely lehetővé teszi ál-API-k létrehozását, kiegészítve a webalkalmazás kliens oldalán futó tesztkiszolgálóval. Ez azt jelenti, hogy tesztelheti a frontend kódot anélkül, hogy aggódnia kellene a valódi háttér API elérhetősége vagy viselkedése miatt.

A Mirage.js használatához először ál-API-végpontokat kell létrehoznia, és meg kell határoznia azokat a válaszokat, amelyeket vissza kell adniuk. Ezután a Mirage.js elfog minden HTTP-kérelmet, amelyet a frontend kód küld, és helyette a hamis válaszokat adja vissza.

Ha az API készen áll, egyszerűen átválthat a használatára, ha csak a Mirage.js konfigurációját módosítja.

A projekt forráskódja itt található GitHub adattár.

Hozzon létre egy hamis API-kiszolgálót a Mirage.js segítségével

A hamis API-k beállításának bemutatásához létre kell hoznia egy egyszerűen teendő React alkalmazást, amely Mirage.js háttérprogramot használ. De először, hozzon létre egy React alkalmazást a create-react-app paranccsal. Alternatív megoldásként használhatja Vite egy React projekt létrehozásához. Ezután telepítse a Mirage.js függőséget.

npm install --save-dev miragejs

Most egy Mirage.js kiszolgálópéldány létrehozásához kérések elfogására és API-válaszok kijátszására használja a CreateServer módszer. Ez a módszer egy konfigurációs objektumot vesz paraméterként.

Ez az objektum tartalmazza a környezet és névtér az API-hoz. A környezet azt a fejlesztési szakaszt határozza meg, amelyben az API van, például a fejlesztést, míg a névtér az összes API-végponthoz hozzáadott előtag.

Újat csinálni src/server.js fájlt, és tartalmazza a következő kódot:

import { createServer, Model } from'miragejs';
const DEFAULT_CONFIG = {
 environment: "development",
 namespace: "api",
};
exportfunctionmakeServer({ environment, namespace } = 
 DEFAULT_CONFIG) {
let server = createServer({
 environment,
 namespace,
 models: {
 Todo: Model, 
 },
 });
return server;
}

Ha szükséges, testreszabhatja a névteret, hogy megfeleljen a tényleges API URL-struktúrájának, beleértve a verzió megadását is. Ily módon, ha az API készen áll, minimális kódmódosítással könnyedén integrálhatja azt az előtér-alkalmazásba.

Ezenkívül a kiszolgálópéldány-konfiguráción belül adatmodellt is megadhat az adatok tárolásának és visszakeresésének szimulálásához a hamis környezetben.

Végül indítsa el a Mirage.js kiszolgálót a kiszolgáló objektum importálásával index.jsx vagy main.jsx fájl a következőképpen:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { makeServer } from'./server';
if ( process.env.NODE_ENV 'development' && 
typeof makeServer 'function'
 ) {
 makeServer();}
ReactDOM.createRoot(document.getElementById('root')).render(


 </React.StrictMode>,
)

Adja hozzá a kezdőadatokat a Mock API-hoz

A Mirage.js rendelkezik egy memórián belüli adatbázissal, amelynek segítségével előzetesen feltöltheti a hamis API-t kezdeti magadatokkal, és kezelheti az ügyfélalkalmazásból származó tesztadatokat. Ez azt jelenti, hogy tárolhatja és lekérheti a tesztadatokat a hamis adatbázisból, és felhasználhatja azokat az ügyfélalkalmazásban.

Ha magadatokat szeretne hozzáadni a Mock API-hoz, adja hozzá a következő kódot a server.js fájl közvetlenül a alatt modellek tárgy.

seeds(server) {
 server.create('Todo', {
 title: 'item no 1',
 body:
'Do something nice for someone I care about',
 });
 server.create('Todo', {
 title: 'item no 2',
 body:
'Memorize the fifty states and their capitals.',
 });
 server.create('Todo', {
 title: 'item no 3',
 body:
'Watch a classic movie.',
 });
 },

A magvak függvény három teendővel tölti fel a Mirage.js szervert, mindegyiknek címe és leírása. Opcionálisan a tesztadatok kemény kódolása helyett integrálhat egy könyvtárat, mint pl Faker.js a szükséges tesztadatok előállításához.

Határozza meg a Mock API-útvonalakat

Most határozzon meg néhány API-útvonalat a hamis API-hoz. Ebben az esetben adjon meg útvonalakat a GET, POST és DELETE hamis API-kérések kezelésére.

Közvetlenül a magadatok alatt adja hozzá az alábbi kódot:

routes() {
this.namespace = 'api/todos'; 

this.get('/', (schema, request) => {
return schema.all('Todo'); 
 });
this.post('/', (schema, request) => {
let attrs = JSON.parse(request.requestBody);
return schema.create('Todo', attrs); 
 });
this.delete('/:id', (schema, request) => {
let id = request.params.id;
return schema.find('Todo', id).destroy(); 
 });
 }

Hozzon létre egy React klienst

Most, hogy az ál-API be van állítva, készítsünk egy React-ügyfelet az API-végpontokkal való interakcióhoz és azok felhasználásához. Bármelyik felhasználói felület-összetevő könyvtárat szabadon használhatja, de ez az útmutató a Chakra felhasználói felületet használja az alkalmazás stílusához.

Először telepítse ezeket a függőségeket:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Ezután hozzon létre egy újat src/components/TodoList.jsx fájlt, és tartalmazza a következő kódot:

import React, { useState, useEffect } from'react';
import {
 Button,
 Box,
 Container,
 Text,
 Input,
 FormControl,
 Flex,
} from'@chakra-ui/react';

Most határozzon meg egy funkcionális összetevőt a teendőlista felhasználói felületének megjelenítéséhez, beleértve az új feladatok hozzáadásához szükséges beviteli mezőket és a meglévő feladatok listáját.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
"teal" onClick={handleAddTodo}> Add Todo</Button>
 {loading? ( <Text>Loading...Text> ): (
 todos.map((todo) => (
2} p={2} borderWidth="1px">
"center">
"1">{todo.body}</Text>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

Most határozza meg a kezelő függvényeket a hozzáadás és törlés műveletekhez. De először adja hozzá ezeket az állapotokat. Alternatív megoldásként megteheti használja a useReducer hook-ot az állapotkezelési logika meghatározásához a teendőlista alkalmazáshoz.

const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState({ title: '', body: '' });
const [loading, setLoading] = useState(true);
const [renderKey, setRenderKey] = useState(0);

Most határozza meg azt a logikát, hogy lekérje és megjelenítse az alapadatokat a memórián belüli adatbázisban, amikor az alkalmazás először betöltődik a böngészőbe. elhozni módszer a useEffect horog.

 useEffect(() => {
 fetch('/api/todos') 
 .then((response) => response.json())
 .then((data) => {
 setTodos(data.todos);
 setLoading(false);
 });
 }, [renderKey]);

A renderKey állapot is szerepel a useEffectben, hogy a kód elindítsa az újonnan hozzáadott adatok újramegjelenítését a memórián belüli adatbázisban, amikor a kiszolgáló fut.

Egyszerűen fogalmazva, valahányszor egy felhasználó új teendőket ad hozzá a Mirage.js adatbázishoz, az összetevő újra rendereli a frissített adatokat.

Adatok hozzáadása az API-hoz

Most határozza meg a logikát az adatok API-hoz POST-kérésekkel történő hozzáadásához. Közvetlenül a useEffect hook alatt adja meg a következő kódot.

const handleInputChange = (e) => {
const { name, value } = e.target;
 setNewTodo((prevTodo) => ({ ...prevTodo, [name]: value }));
};
const handleAddTodo = () => {
 setLoading(true);
 fetch('/api/todos', {
 method: 'POST',
 headers: {
'Content-Type': 'application/json',
 },
 body: JSON.stringify(newTodo),
 }).then((response) => response.json()).then((createdTodo) => {
 setTodos((prevTodos) => [createdTodo, ...prevTodos]);
 setNewTodo({ title: '', body: '' });
 setRenderKey((prevKey) => prevKey + 1); 
 setLoading(false); 
 }).catch((error) => {
console.error('Error adding todo:', error);
 setLoading(false); 
 });
};

Amikor a felhasználó adatokat ír be a teendők beviteli mezőjébe, és rákattint a Todo hozzáadása gombot, a kód frissíti a newTodo állapotot a felhasználó bevitelével. Ezután egy hamis POST kérést küld az API-nak az új adatobjektummal a kérés törzsében, hogy elmentse azt a memórián belüli adatbázisba.

Ha a POST kérés sikeres, a kód hozzáadja az új elemet a todos tömböt, és végül elindítja a komponens újbóli megjelenítését, hogy megjelenítse az új teendőt.

API-törlési kérelmek ál

Most határozza meg az adatok törlésének logikáját a DELETE hamis API-kérelmeken keresztül. Ez a folyamat magában foglalja a DELETE kérés küldését a teendő elemnek a memóriában lévő adatbázisból való eltávolítására. Ha sikeres, frissítse mindkettőt todos és Betöltés állapot, hogy tükrözze a törlési folyamatot.

const handleDelete = (id) => { 
let deleteInProgress = true;
 fetch(`/api/todos/${id}`, {
 method: 'DELETE',
 }).then((response) => {
if (response.status 204) {
returnnull;
 } else {
return response.json();
 }
 }) .then((data) => {
if (data && data.error) {
console.error('Error deleting todo:', data.error);
 } else { 
 setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
 setRenderKey((prevKey) => prevKey + 1);
 }
 deleteInProgress = false;
 }).catch((error) => {
console.error('Error deleting todo:', error);
 deleteInProgress = false;
 }) .finally(() => {
 setLoading(deleteInProgress);
 });
 };

Ne feledje, hogy ez a folyamat csak az újonnan hozzáadott adatokat törölheti, az alapadatokat nem.

Végül importálja a Feladatlista komponens a App.jsx fájlt a DOM-ban való megjelenítéséhez.

import TodoList from'./components/TodoList';
//code ...

Nagy! A fejlesztői kiszolgáló elindítása után lekérheti az alapadatokat, valamint hozzáadhat és törölhet új adatokat a ál-API-ból a React alkalmazásban.

Mock API-k használata a fejlesztés felgyorsítására

Az API-k gúnyolódása nagyszerű módja a frontend fejlesztés felgyorsításának, akár egyénileg, akár csapatban dolgozik egy projekten. A Mock API-k használatával gyorsan összeállíthatja a felhasználói felületet és tesztelheti a kódjukat anélkül, hogy megvárná a háttérrendszer elkészültét.