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

A hozzád hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

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.

A nap MUO videója GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ

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 frontend fejlesztését és tesztelését olyan adatok segítségével, amelyek utánozzák a valódi adatok szerkezetét, mindezt anélkül, hogy a tényleges API-ra támaszkodna.

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.

Egy laptop az asztalon, a képernyőn nyitva van a kód.

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.