Axios, HTTP istekleri yapmak için kullanılan popüler bir JavaScript kütüphanesidir. JavaScript'te veya Vue.js ya da React.js gibi diğer Javascript kütüphaneleriyle birlikte kullanılan, promise tabanlı bir HTTP istemcisidir. Sahip olduğu izomorfik yapı sayesinde Axios, aynı kod tabanını kullanarak istemci ve sunucu tarafında eş zamanlı olarak çalışabilir. Ayrıca, async ile birlikte kullanılarak kullanıcı dostu bir API oluşturmak için güçlü bir araçtır. Her şeyden önemlisi Axios, normalde oldukça zor olan bir işlemi, yani bir isteği otomatik olarak iptal etme yeteneğine sahiptir.
Axios Nasıl Çalışır?
Axios, varsayılan promise ayarlarını kullanarak aynı kodla tarayıcıda ve Node.js'de paralel olarak çalışır. Promise tabanlı HTTP özelliğini kullanan Axios, CRUD işlemlerini gerçekleştirir ve REST uç noktalarına HTTP istekleri gönderir. Bu eğitimde, Vue.js'de Axios ile bir REST API yapılandırma adımlarında size rehberlik edeceğiz.
Hadi başlayalım!
Gereksinimler
Bu eğitimi tamamlayabilmek için aşağıdakilere sahip olmanız gerekir:
- Node.js kurulu ve Ubuntu sisteminizde kurulmuş olmalıdır.
- Centos işletim sistemi kullanıyorsanız, Centos 8 üzerinde Node.js kurulumu için bu kılavuzu takip edebilirsiniz.
- Temel JavaScript.
Adım 1: Axios Kurulumu
Axios'u kurmadan önce, hataları veya kurulum başarısızlığını önlemek için sistem depolarınızı güncellemeniz önemlidir:
|
1 |
sudo apt-get update |
Ardından, npm yazılım paketini kullanarak Axios'u kurun:
|
1 |
npm install axios --save |
Alternatif olarak, Axios'u yarn paket yöneticisini kullanarak da kurabilirsiniz:
|
1 |
yarn add axios |
Bundan sonra, bir Vue.js projesi oluşturun ve Axios'u içine aktarın:
|
1 |
import axios from ‘axios’; |
Bir sonraki adımda, istekleri çekmek için axios.get() yöntemini kullanacağız.
Adım 2: GET İsteği Kullanarak Veri Çekme
Burada, bir GET isteği kullanarak veri çekeceğiz. Doğrudan bir yöntemden veri çekmek için axios.get() yöntemini nasıl kullandığımıza bir göz atın:
|
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 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Bileşen oluşturulduğunda gönderileri çeker. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON yanıtları otomatik olarak ayrıştırılır. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Şu async veya await sürümünü göreceksiniz:
Yukarıdaki kod, gönderileri şuradan alacaktır: JSONPlaceholder ve verileri sırasız bir şekilde dağıtacaktır. Karşılaşılan her türlü hata farklı bir sırasız listede görünecektir.
Adım 3: POST İsteği Kullanarak Veri Gönderme
Opposite to the axios.get() yönteminin aksine, şimdi bir axios.post() yöntemiyle bir POST isteği göndereceğiz. Veri çekmek için axios.post() yönteminin nasıl uygulanacağına göz atın:
|
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 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Çağrıldığında Gönderileri Sunucuya Gönderir. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Şu async veya await sürümünü göreceksiniz:
Yukarıdaki kod, içeriği şuraya gönderen bir giriş alanı oluşturacaktır: JSONPlaceholder. Karşılaşılan her türlü hata farklı bir sırasız listede görünür.
Adım 4: Ortak Bir Temel Örnek Kurun
Bu adımda, şu yöntemi kullanarak ortak bir temel örnek oluşturacağız: axios.create() yöntemi. Ortak bir temel örnek kurmanın amacı, tüm örnekler arasında bir temel URL paylaşmaktır.
Tüm çağrılarınız ortak bir sunucu veya şu şekilde ortak bir başlık kullanıyorsa ortak temel örnek oldukça kullanışlıdır: Authorization başlığı:
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Son olarak, bileşeninizde HTTP kullanmaya hazırsınız:
Tüm yapılandırma ayarlandıktan sonra, http-demo.js kurulmuş olur. Artık Axios, aynı kod tabanını kullanarak aynı anda hem JSONPlaceholder hem de Authorization başlığı ile bağlantı kurar. En iyi yanı ise Axios'un gönderileri, hataları tespit eder ve bunları sırasız bir listede görüntüler.
Sonuç
Bu eğitimde, Axios kullanarak veri gönderme ve çekmenin temellerini öğrendik. Ayrıca, ortak bir URL'yi paylaşmak için ortak bir temel örnek oluşturduk. Ancak, Axios öğreniminiz burada bitmemeli. Diğer Axios yöntemlerini pratik ederek POST, PUT, PATCH ve DELETE istekleri göndermeyi deneyin. Konuyu keşfetmek ve kendi projelerinizi oluşturmayı denemek için Axios belgelerini inceleyin.
Axios ve Vue.js konuları hakkında daha fazla bilgi edinmek için blogumuzdaki kaynaklara göz atın:
- React Uygulamasında HTTP İstemcisi Axios Kullanımı: Bir Rehber
- Bir API'den Veri Görüntülemek İçin Vue ve Axios Kullanımı
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.