Axios, async-await yapısını kullanabilmenizi sağlayan promise tabanlı mini minnacık tatlı bir http client.

Junior tayfaya özel not: Arkadaşlar axios aslında react için kullanabileceğiniz paketlerden biri. Async-await dediğimiz de bir kodun anında çalışması yerine çağrıldıktan bir süre sonra çalışması bir nevi kendini naza çekmesi 🙂 

Axios ile React’i birlikte kullanmanın farklı örnekleri mevcut. Burada, benim projelerimde sık sık kullandığım bir yöntemi göstereceğim.

  1. json dosyasından alınacak verilerin adresleneceği array tipinde state’i oluşturma işlemi
  2.  async componentDidMount fonksiyonu içersinde axios ile json verisini çağırma ve setState işlemi
  3. render metodu içerisinde map -ve gerekirse filter- kullanarak html elementlerini bir object içerisinde oluşturma işlemi
  4. oluşturulan element(ler)i gerekli yerde çağırma işlemi

Yazıldığı kadar uzun bir işlem değil aslında. Gözünüz korkmasın. Başlığı aradığınızda bulacağınız kaynaklar sadece 2. adımı anlatıp bırakır diye diğer adımları da anlatıyorum. Sadece axios ile react içerisinde get metodunun kullanımını görmek için 2. adım bile yeterli olacaktır.

componentDidMount: Component mount edildiğinde apar topar çağrılan methodumuz. DOM’a etki eden bir şeyin tanımlanması gereken yer burası. Atıyorum D3.js gibi third party bir library kullanacaksanız, başlangıç değerlerini burada atayın. Bir API çağıracaksanız, bir şeyi fetch edecekseniz en müsait yer bu method..

https://ysfzrn.gitbooks.io

json dosyam yok ne yapacağım diyorsanız jsonplaceholder sitesinden faydalanabilirsiniz. Buradaki örneği de jsonplaceholder sitesindeki amme hizmeti json dosyasını kullanarak gerçekleştireceğim. (https://jsonplaceholder.typicode.com/posts)

Önemli 1: Başlamadan önce projenize axios paketini yüklemelisiniz.

# Yarn kullanıyorsanız
$ yarn add axios

# npm kullanıyorsanız
$ npm install axios --save

Önemli 2 : Paketi yükledikten sonra Axios’u hangi component içerisinde kullanacaksak orada import etmemiz gerekiyor.

import axios from 'axios';

Adım 1

  constructor(props) {
    super(props);
    this.state = {
      pages: []
    };
  }

State tanımlama işlemini gerçekleştirmek için basit, boş bir array oluşturuyoruz. Ben burada constructor içerisinde pages state’imi oluşturdum.

Adım 2

Asıl mesele burada aslında:

  componentDidMount = async () => {

    const pages = await axios.get('https://jsonplaceholder.typicode.com/posts');
    
    this.setState({
      pages: pages.data,
    });

  };

Adım 3

    const pages = this.state.pages
      .filter(item => item.userId === 2)
      .map(post => (
        <li>
          {post.title}
        <li/>
      ));

Buradaki örnekte jsonplaceholder içerisinden aldığımız post’lardan sadece userId özelliği 2 olan post’ları alacağız. Bu nedenle filter metodunu da kullandık. Ancak siz isterseniz bunu kullanmayabilirsiniz. Eğer öyle bir durum varsa .filter ile başlayan satırı yok sayarak direkt map metodunu kullanın.

Map ve Filter metodları bir dizi içerisinde her bir elemanda işlem yaparak buna göre bize sonuç getirirler. Filter, verdiğimiz şartı yerine getiren var mı diye dizi elemanlarını tek tek kontrol eder. Map metodu ise bu elemanlara tek tek gider ve sizin istediğiniz özelliklerini alır, bizim istediğimiz html etiketleri içerisinde gösterecek şekilde adresler. Biz de bunları const (veya let) ile bir değişkene atayıp return içerisinde kullanırız.

Adım 4

pages değerini return içerisinde {pages} olarak çağırabiliyoruz. Bu durumda render içerisindeki durum şöyle olacaktır.

render() {
    const pages = this.state.pages
      .filter(item => item.userId === 2)
      .map(post => (
        <li>
          {post.title}
        <li/>
      ));
    return (
      <div>
       { pages }
      </div>
    );
  }
}

Gördüğünüz gibi bu yolla, json verisi çekmek gerçekten çocuk oyuncağı gibi. Olabildiğine basit bir işlem.

Sonradan öğrendiğimiz her şey gibi tekrar ederek pekiştirmeniz gereken bir konudur. Yardımcı olabileceğim bir konu olursa buralardayım.

Bir daha ki sefere Axios ve React ile json Post işleminde görüşmek üzere 🙂 Hoşçakalın!

Author

Write A Comment