React uygulamalarımızda servisleri(API) ile iletişim kurmak istediğimizde Axios kütüphanesini kullanmaktayız. Şimdi Axios ile herhangi bir API linki üzerinden CRUD (get, post, put, delete) işlemlerimizi nasıl yapacağız bakalım. Öncelikle Uygulamamıza npm i axios komutu ile kütüphaneyi yüklüyoruz.
GET : Servis datalarını çekmek için kullandığımız methoddur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React, { createContext, useContext, useEffect, useState } from “react”; import axios from “axios”; const AddtoTable = (newData) => { setData((prevData) => [...prevData, newData]); }; const API = “https://jsonplaceholder.typicode.com/users”; useEffect(() => { axios .get(API) .then((response) => { console.log(response); setData(response.data); }) .catch((error) => { console.error(“Error:”, error); }); }, []); |
POST : Servise bir request atmak için kullandığımız methoddur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React, { createContext, useContext, useEffect, useState } from “react”; import axios from “axios”; export function UserContextProvider({ children }) { const [data, setData] = useState([]); const [name, setName] = useState(“”); const [email, setEmail] = useState(“”); const [phone, setPhone] = useState(“”); const AddtoTable = (newData) => { setData((prevData) => [...prevData, newData]); }; const API = “https://jsonplaceholder.typicode.com/users”; const handleFormSubmit = (e, userData) => { e.preventDefault(); axios .post(API, userData) .then((response) => { console.log(response); AddtoTable(response.data); navigate(“/ListPages”); }) .catch((error) => { console.error(“Error:”, error); }); setName(“”); setEmail(“”); setPhone(“”); }; |
PUT : Servisteki datayı güncellemek için kullandığımız methoddur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const AddtoTable = (newData) => { setData((prevData) => [...prevData, newData]); }; const API = “https://jsonplaceholder.typicode.com/users”; const handleUpdate = (id, updatedData) => { debugger; axios .put(`${API}/${id}`, updatedData) .then((response) => { const updatedUser = response.data; setData((prevData) => prevData.map((user) => (user.id === id ? updatedUser : user)) ); }) .catch((error) => { console.log(“Error:”, error); }); }; |
DELETE : Servisteki datayı silmek için kullandığımız methoddur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const AddtoTable = (newData) => { setData((prevData) => [...prevData, newData]); }; const API = “https://jsonplaceholder.typicode.com/users”; const handleDelete = (id) => { axios .delete(`${API}/${id}`) .then(() => { setData((prevData) => prevData.filter((user) => user.id !== id)); }) .catch((error) => { console.log(“Error:”, error); }); }; |
Kodlara bu linkten ulaşabilirisniz.
sağlıcakla kalın….
Bir yanıt yazın