Yeni Başlayanlar için Axios’a Giriş

Verileri almak / kaydetmek için HTTP istekleri yapmak, herhangi bir istemci tarafı JavaScript uygulaması için ortak bir görevdir. Axios, HTTP isteklerini gerçekleştirmek için kullanılan bir JavaScript kitaplığıdır. Hem Tarayıcı hem de Node.js platformlarında çalışır.

IE8 ve üstü için destek dahil tüm modern tarayıcıları destekler.

Projenize Axios eklemek

Aşağıda listelenen yöntemlerden herhangi birini kullanarak Axios’u projenize ekleyebilirsiniz.

Npm kullanma:

$ npm install axios

Bower kullanarak:

$ bower install axios

Yarn kullanılması:

$ yarn add axios

JsDelivr CDN’yi kullanma:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Unkg CDN kullanarak:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

“GET” isteği oluşturma

DummyAPI’yi  kullanarak bir kullanıcı listesini axios.get() ile alalım.

import axios from 'axios';

const response = axios.get('https://dummyapi.io/data/api/user?limit=10')
const users = response.data

Axios her zaman sorguyu bir nesne verisinde döndürdüğünden, yukarıdaki kodu destructuring kullanarak yeniden yazabiliriz.

import axios from 'axios';

const {data} = axios.get('https://dummyapi.io/data/api/user?limit=10')
const users = data;

“POST” isteği oluşturma

Arka uca yeni veri eklemek için bir POST isteği kullanılır. POST isteği bir GET isteğine benzer, ancak axios.get yerine axios.post kullanırsınız.

Bir POST İsteği ayrıca eklenecek verileri içeren bir nesne olan ikinci bir bağımsız değişkeni de kabul eder.

Aşağıya yeni bir kullanıcı ekleyelim.

import axios from 'axios';

let newUser = {
    name: 'John',
    email: 'john@gmail.com'
    Gender: Male,
}

addUser (user) => {
    axios.post('https://dummyapi.io/data/api/user/', user)
}

addUser(newUser);

“PUT” isteği oluşturma

Arka uca yeni veri eklemek için bir PUT isteği kullanılır. PUT isteği bir POST isteğine benzer, ancak axios.post yerine axios.put kullanırsınız.

import axios from 'axios';

const res = axios.put('https://jsonplaceholder.typicode.com/posts/2', {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore"
});

res.data.json; // {"postId": 1,"id": 2,"name": "quo vero reiciendis velit similique earum","email": "Jayne_Kuhic@sydney.com","body": "est natus enim nihil est dolore"}

“DELETE” isteği oluşturma

Arka uçdan veri silmek için bir DELETE isteği kullanılır. DELETE isteği GET isteğine benzer, ancak axios.get yerine axios.delete kullanırsınız.

import axios from 'axios';

axios.delete('https://jsonplaceholder.typicode.com/posts/1');

res.status; // 200

Bu, yeni başlayanlar için hızlı bir giriş niteliğindedir. Axios çok daha fazlasını yapmanızı sağlar. Faraz Kelhini’nin yazdığı bu makalede daha gelişmiş Axios yöntemleri hakkında bilgi edinebilirsiniz.