AXIOS – My Blog

axios ile get isteği

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios'

const API_URL='http://localhost:3001';

function App() {

  const [item,setItem]=useState([]);
  const [degisken,setDegisken]=useState();
  async function getAllUsers(){
    const response = await axios.get(API_URL+'/users');
    setItem(response.data);
  }
  async function getUserById(id){
    if(!id) return;
    const response = await axios.get(API_URL+'/users/'+id);
    setItem([response.data]); //tek bir item döndüğü için dizi değil obje olarak dönecek. map kullanmak                    
                                //için tek elemanlı dizi yaptık.[] içine aldık.
  }

  useEffect(()=>{
    if(!degisken) getAllUsers();
    else getUserById(degisken);
  },[degisken]);

  return (
    <>
      <div>
        {item.map((e)=>(<div key={e.id}>{e.username}</div>))}
        <input type="text" onChange={(e)=>setDegisken(e.target.value)} />
      </div>
    </>
  )
}

export default App

axios ile post isteği

const API="http://localhost:3001";
const eklenecekUser={
   username:"deneme",
   password:"deneme"
}
const userAdd=async(user)=>{
   await axios.post(`${URL}/users/`,user);
}
function App(){
   useEffect(userAdd(eklenecekUser),[])
}

axios ile put isteği

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios'

const API_URL='http://localhost:3001';

const updateUser={
  username:"deneme",
  password:"deneme123"
}

const update=async(userId,user)=>{
  await axios.put(`${API_URL}/users/${userId}`,user);
}

function App(){

  useEffect(()=>{
    update(3,updateUser);
  },[])

return(
  <div>

  </div>
   )
  
}
export default App

axios ile delete isteği

   const URL='http://localhost:3001'
   const userDelete=async(id)=>{
      const res=await axios.delete(`${URL}/users/${id}`);
      console.log(res.data); // silinen veriyi ekrana basar.
}

function App(){
   useEffect(userDelete(1),[])
}

ÖRNEK

import React from "react";
import { FaArrowCircleRight } from "react-icons/fa";
import { useState } from "react";
import axios from "axios";


function Currency()
{
    const[miktar,setMiktar]=useState(0);
    const[sonuc,setSonuc]=useState(0);
    const[fromCurrency,setFromCurrency]=useState("USD");
    const[toCurrency,setToCurrency]=useState("TRY");

    let BASE_URL="https://api.freecurrencyapi.com/v1/latest";
    let API_KEY="xxx";
    let EXCHANGE_API=`${BASE_URL}?apikey=${API_KEY}&base_currency=${fromCurrency}`;
    
    const cevir=async()=>{
        const response=await axios.get(EXCHANGE_API);
        setSonuc(((response.data.data[toCurrency])*miktar).toFixed(2));
    }

    return(
        <div className='currency-main'>
            <input value={miktar} onChange={(e)=>setMiktar(e.target.value)} type="number" placeholder="MİKTAR" min={0}/>
            <select onChange={(e)=>setFromCurrency(e.target.value)} className="from-currency-option">
                <option>USD</option>
                <option>EUR</option>
                <option>TRY</option>
            </select>
                <FaArrowCircleRight style={{fontSize:'25px'}}/>
           
            <select 
            onChange={(e)=>setToCurrency(e.target.value)}
            className="to-currency-option">
                <option>TRY</option>
                <option>USD</option>
                <option>EUR</option>
            </select>
            <input value={sonuc} onChange={(e)=>setSonuc(e.target.value)} type="number" placeholder="SONUÇ" min={0}/>
            <button onClick={cevir}>ÇEVİR</button>
        </div>
    )
}

export default Currency;

ÖRNEK

Yorum bırakın Yanıtı iptal et