e
sv

React Native'de AJAX isteklerini anlama

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Bir zamanlar, çoğu web uygulaması, web sunucularıyla iletişim kurmak için tüm web sayfasını kullanıcı eylemleriyle yeniledi. Daha sonra, AJAX (Eşzamansız JavaScript ve XML) konsepti, arka planda web sunucularıyla iletişim kurmanın bir yolunu sunarak web sayfalarını yeniden yüklemeye gerek kalmadan web uygulaması içeriğini dinamik hale getirdi.

AJAX daha sonra W3C onaylı bir web standardı haline geldi. Sonuç olarak, geliştiriciler artık HTTP protokolü aracılığıyla web sayfalarındaki JSON, XML, HTML veya ham dize içeriğini almak için herhangi bir standart tarayıcıda AJAX API'lerini kullanabilir.

React Native çerçevesi, gömülü bir JavaScript motoru (Hermes), platforma özel UI öğesi sarmalayıcıları ve React ile platformlar arası bir uygulama geliştirme çözümü sunar. React Native çerçevesi, platforma özel ağ API'leri ile AJAX tarayıcı API'leri için çoklu dolgular uygular, böylece React Native'de AJAX istekleri göndermek için standart JavaScript web API'lerini kullanabiliriz.

Bu eğitimde, React Native uygulamalarınızdaki AJAX isteklerini işlemek için çeşitli yaklaşımları pratik örneklerle göstereceğim. Ayrıca, AJAX hatalarının ve ağ gecikmelerinin nasıl kullanıcı dostu bir şekilde ele alınacağını açıklayacağım.

İleri atla:

React Native'de AJAX isteklerinde bulunmanın yolları

React Native'de AJAX istekleri yapmanın olası yollarını belirleyerek başlayalım – sonra bunları örneklerle pratik olarak test edebiliriz. Her ikisi de HTTP protokolünü kullanarak bir sunucuyla iletişim kurmamıza yardımcı oldukları için bu HTTP istemci kitaplıklarını veya API'lerini çağırabiliriz.

AJAX istekleri yapmak için aşağıdaki yerleşik ve kitaplık tabanlı yolları kullanabiliriz:

Dahili Getirme API'si

2015 yılında, Fetch API , iyi bilinen eski XMLHttpRequest API'sinin modern bir halefi olarak tanıtıldı. Fetch, HTTP yöntemleri, üstbilgiler, yükler vb. gibi birçok HTTP yapılandırmasıyla AJAX istekleri göndermek için söze dayalı modern bir arabirim sunar. React Native çerçevesine dahil edilen özellik.

Dahili XMLHttpRequest API'si

XMLHttpRequest (diğer adıyla XHR), Fetch API'sinden önce AJAX istekleri göndermek için kullanılan en eski standart API idi. XHR API, AJAX programlama için geleneksel olay tabanlı bir yaklaşım sunar. React Native, ağ gereksinimleri için Fetch API ile birlikte bu API'yi sunar. Günümüzde modern geliştiriciler, özellikle Fetch ve Axios gibi diğer geliştirici dostu AJAX kitaplıkları sayesinde XHR API'sini doğrudan kullanmaya çalışmıyorlar.

aksiyolar

Axios , tarayıcı ortamlarında (IE 11 dahil) ve Node.js üzerinde çalışan popüler bir açık kaynaklı HTTP istemci kitaplığıdır. Günümüzde çoğu ön uç geliştirici, minimal, söze dayalı API'si, otomatik istek/yanıt dönüşümü ve küresel yapılandırma desteği nedeniyle Axios'u seçiyor .

Alternatif AJAX kitaplıkları

Axios, popüler bir HTTP istemci kitaplığı olsa da, JavaScript kitaplık ekosisteminin yüzlerce açık kaynak alternatifi vardır. Bu alternatifler, Axios'un yaptığı gibi, XMLHttpRequest nesnesi veya Fetch işlevi için bir sarmalayıcı görevi görür.

Wretch ve SuperAgent kitaplıkları, Axios'a popüler alternatiflerdir.

AJAX önbelleğe alma kitaplıkları ile

Çoğu web uygulaması, arka uç web API'leri ile iletişim kurmak için AJAX konseptini kullanan bir RESTful web API'si ile iletişim kurarak CRUD işlemlerini gerçekleştirir. Geliştiriciler, ön uçta CRUD işlemlerinin kullanılabilirliğini geliştirmek için genellikle ek kod yazmak zorundadır.

Örneğin, verileri ön uçta önbelleğe alarak sık kullanılan verileri UI'ye daha hızlı yükleyebilir ve ağ çağrılarını tekilleştirerek bant genişliği kullanımını en aza indirebiliriz. TanStack Query (eski adıyla React Query) ve SWR benzeri önbelleğe alma kitaplıkları, geliştiricilerin daha az kod yazarak AJAX isteklerini verimli ve kullanıcı dostu bir şekilde yapmalarına yardımcı olur.

Altı yollu bir React Native AJAX öğreticisi

Kitap ayrıntılarını listeleyen eksiksiz bir mobil uygulama oluşturacağız. Önce basit bir RESTful API oluşturalım, ardından React Native'de AJAX isteklerinin nasıl yapıldığını anlamak için yukarıdaki çeşitli yerleşik AJAX API'lerini ve kitaplıklarını kullanarak onu tüketebiliriz.

RESTful arka uç oluşturma

Aşağıdaki komutlarla yeni bir dizin ve Node.js projesi oluşturun:

 mkdir kitapçı-arka uç
cd kitapçı-arka uç

npm başlangıç
# --- veya ---
iplik başlangıcı

RESTful API'sini oluşturmaya başlamak için Express.js kitaplığını ekleyin:

 npm ekspres yükleme
# --- veya ---
iplik eklemek ekspres

server.js adında yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

 const ifade = zorunlu('ifade');
const uygulama = ekspres();
const kitaplar = [
    {
        kimlik: 100,
        başlık: 'Golang uzmanları',
        yazar: 'John Stack',
        fiyat: 200
    },
    {
        kimlik: 101,
        başlık: 'Yeni başlayanlar için C++',
        yazar: 'John Doe',
        fiyat: 250
    },
    {
        kimlik: 102,
        başlık: 'Çapraz geliştirme',
        yazar: 'Steven Doe',
        fiyat: 350
    },
    {
        kimlik: 103,
        başlık: 'JavaScript dahili öğeleri',
        yazar: 'John Stack',
        fiyat: 300
    }
];

sabit bağlantı noktası = 5000;

app.get('/books', (gerekli, res) => {
  res.json(kitaplar);
});

app.listen(port, () => {
    console.log(`Kitapçı API ${port}` portunda çalışıyor);
});

Burada, GET /books uç noktası aracılığıyla sabit kodlanmış bir kitap listesi döndürüyoruz. RESTful API sunucusunu aşağıdaki komutla başlatın:

 düğüm sunucusu.js

Tarayıcınızdan http://localhost:5000/books adresine giderek veya curl komutuyla bir istekte bulunarak uygulama arka ucunu test edin. Kitap listesini aşağıdaki gibi bir JSON dizisi olarak alacaksınız:

Bookstore API'miz Google Chrome'da veri döndürür
Bookstore API'miz Google Chrome'da veri döndürür

Basit bir React Native kitapçı uygulaması oluşturarak yukarıdaki API'ler ve kitaplıklar ile GET /books uç noktasına AJAX istekleri yapalım. Kullanıcı arabirimini uyguladıktan kısa bir süre sonra ihtiyacımız olacağından, bu sunucu örneğini arka planda çalışır durumda tutabilirsiniz.

Uygulama ön ucunu oluşturma

Şimdi, uygulamamızın minimum hata işleme özelliklerine ve yerel bir yükleme göstergesine sahip olan React Native ön ucunu oluşturacağız.

İlk olarak, istemci tarafında sabit kodlanmış bir kitap listesi ile ön ucu geliştireceğiz, ardından çeşitli AJAX API'leri ve kitaplıkları aracılığıyla kitap bilgilerini arka uçtan almak için uygulamanın kaynak kodunu değiştireceğiz.

Yeni bir React Native projesi oluşturun:

 npx tepki-yerel init Kitabevi

Yukarıdaki komut, Bookstore dizininde yeni bir projeyi destekleyecektir. Ardından, her şeyin düzgün çalıştığından emin olmak için uygulamayı fiziksel bir cihazda veya öykünücüde/simülatörde çalıştırın:

 cd Kitabevi

npm başlangıç
# --- veya ---
iplik başlangıcı

npx tepki-yerel çalıştırma-android
# --- veya ---
npx tepki-yerel çalıştırma-ios

App.js kaynak dosyanızın içeriğini aşağıdaki kaynak koduyla değiştirin:

 React, { useState, useEffect } 'react'ten içe aktar;
içe aktarmak {
  GüvenliAlan Görünümü,
  Görüş,
  düzListe,
  stil Sayfası,
  Metin,
  EtkinlikGöstergesi,
} 'react-native'den;

const BookItem = ({ başlık, yazar, fiyat }) => (
  <Stil={styles.item}>
    <Görünüm stili={styles.itemLeft}>
      <Text style={styles.title}>{title}</Text>
      <Metin stili={styles.author}>{yazar}</Metin>
    </Görüntüle>
    <Görünüm stili={styles.itemRight}>
      <Text style={styles.price}>${price}</Text>
    </Görüntüle>
  </Görüntüle>
);

const Kitap Listesi = () => {
  const [kitaplar, setBooks] = useState([]);
  const [yükleniyor, setLoading] = useState(true);
  const [hata, setError] = useState(false);

  zaman uyumsuz işlev getBooks() {
    bekle yeni Söz((çöz) => setTimeout(çöz, 2000));
    setKitaplar([{
        kimlik: 100,
        başlık: 'Golang uzmanları',
        yazar: 'John Stack',
        fiyat: 200
    },
    {
        kimlik: 101,
        başlık: 'Yeni başlayanlar için C++',
        yazar: 'John Doe',
        fiyat: 250
    }]);
    setYükleniyor(yanlış);
  }

  useEffect(() => {
      getBooks();
  }, []);

  eğer(hata)
    return <Text style={styles.errorMsg}>Sunucuya bağlanılamıyor.</Text>;

  eğer(yükleniyor)
      return <ActivityIndicator size='large'/>;

  dönüş (
    <Düz Liste
      veri={kitap}
      renderItem={({ item }) => <BookItem {...item} />}
      keyExtractor={item => item.id}
    />
  );
}

const Uygulama = () => {
  dönüş (
    <SafeAreaView style={styles.container}>
      <Kitap Listesi/>
    </SafeAreaView>
  );
}

const stilleri = StyleSheet.create({
  kapsayıcı: {
    esnek: 1,
    marjÜst: '%10',
  },
  öğe: {
    esnek: 1,
    flexDirection: 'satır',
    flexWrap: 'sarma',
    alignItems: 'esnek başlangıç',
    arkaplanRenk: '#eee',
    dolgu: 12,
    kenar boşluğuDikey: 8,
    kenar boşluğuYatay: 16,
  },
  itemSol: {
    genişlik: '%70'
  },
  itemRight: {
    genişlik: '30%',
  },
  Başlık: {
    yazı tipiBoyutu: 22,
    renk: '#222',
  },
  yazar: {
    yazı tipiBoyutu: 16,
    renk: '#333',
  },
  fiyat: {
    yazı tipiBoyutu: 20,
    renk: '#333',
    textAlign: 'sağ'
  },
  hata mesajı: {
    renk: '#ee8888',
    yazı tipiBoyutu: 20,
    dolgu: 24,
    textAlign: 'merkez'
  },
});

varsayılan Uygulamayı dışa aktar;

Yukarıdaki kod, yerleşik React Native FlatList bileşenini kullanarak bir kitap listesi oluşturur. Daha önce de belirtildiği gibi, henüz herhangi bir AJAX istek işleyici kullanmıyoruz, ancak getBooks eşzamansız işleviyle bir ağ isteğini simüle ettik. Uygulamayı başlangıçta, yalnızca getBooks işlevini değiştirerek tüm AJAX işleme yöntemlerini kolayca göstermek için sabit kodlanmış verilerle simüle edilmiş bir ağ işlemi kullanarak uyguladık.

getBooks işlevi, setTimeout işleviyle ağ gecikmesini simüle eder ve 2000 milisaniyeden sonra sabit kodlanmış verileri döndürür. Kullanıcı arayüzü, ağ gecikmesini belirtmek için bir yükleme animasyonu ve setError(true) bir hata mesajı oluşturur.

getBooks işlevini yalnızca bir kez çağırdığım için App bileşeninde loading ve error durumu değişkenlerini kullandım. Ancak, birçok yerde getBooks çağırırsak, daha iyi kod kalitesi için useBooks adlı yeniden kullanılabilir özel bir Kanca uygulayabiliriz. Bu makaleden özel Kancalar oluşturma hakkında daha fazla bilgi edinin.

Yukarıdaki kodu çalıştırdığınızda, aşağıdaki sonucu göreceksiniz:

Ön uçta sabit kodlanmış veriler içeren kitapçı uygulamamız
Ön uçta sabit kodlanmış veriler içeren kitapçı uygulamamız

Getirme API'sini kullanma

Dahili Fetch API ile arka uç web hizmetimizden React Native kitapçı uygulamasına kitaplar yükleyelim. fetch işlevi, tarayıcı ortamına benzer şekilde genel komut dosyası kapsamında yer aldığından, başka hiçbir şeyi içe aktarmamız gerekmez.

Mevcut getBooks işlevi için aşağıdaki kodu kullanın:

 zaman uyumsuz işlev getBooks() {
    denemek {
      const kitaplar = getirmeyi bekle('http://<computer_ip>:5000/books')
                      .then((yanıt) => yanıt.json() );
      setBooks(kitaplar);
    }
    yakalamak(hata) {
      setError(doğru);
    }
    en sonunda {
      setYükleniyor(yanlış);
    }
  }

Hem bilgisayarınız hem de mobil test cihazınız için aynı WiFi ağını kullandığınızdan emin olun, ardından bilgisayarınızın yerel IP adresini yukarıdaki URL'de computer_ip yazan yere girin. Beklenen fetch işlevi doğrudan JSON döndürmez (bir Response nesnesi döndürür), bu nedenle sözü almak için then kez kullanmamız gerekir, bu da alınan JSON içeriğine çözümlenir.

Uygulamayı çalıştırdığınızda, arka uçtan kitap ayrıntılarını aşağıdaki gibi göreceksiniz:

Sunucu tarafı verileriyle kitapçı uygulamamız
Sunucu tarafı verileriyle kitapçı uygulamamız

fetch , HTTP yöntemini, gövdeyi, başlıkları vb. ayarlamanıza izin veren bir seçenekler nesnesini kabul eder. POST isteği gerçekleştiren aşağıdaki kod parçacığına bakın:

 const seçenekler = {
  yöntem: 'POST',
  gövde: JSON.stringify({inStock: false})
};

getirmeyi bekle('/kitaplar', seçenekler)
  .then((yanıt) => yanıt.json() );

Birden çok uç noktaya AJAX istekleri yaparsanız, bir global Fetch interceptor uygulayarak fetch('/books') , fetch('/books/100') vb. gibi Fetch API'sini global bir temel URL yapılandırmasıyla kullanabilirsiniz.

Daha önce, setError(true) işlev çağrısını başlatmadığımız için temel hata işleme testlerini gerçekleştirme şansımız olmadı. Artık sunucuyu çalıştırmadan ön ucu çalıştırarak test edebiliriz. Aşağıda gösterildiği gibi kitap listesi yerine bir hata mesajı almalısınız:

Kitapçı uygulamamızda bir AJAX hata mesajı gösteriliyor
Kitapçı uygulamamızda bir AJAX hata mesajı gösteriliyor

Diğer popüler AJAX hata işleme stratejilerini ayrı bir bölümde tartışacağız.

Axios'u kullanma

İlk olarak, Axios paketini kurun:

 npm kurulum aksiyoları
# --- veya ---
iplik ekleme aksiyoları

Ardından, aşağıda gösterildiği gibi axios nesnesini içe aktarın:

 aksiyoları 'axios'tan içe aktarın;

Şimdi, Axios ile bir AJAX isteği yapmak için getBooks işlevini aşağıdaki kodla güncelleyin:

 zaman uyumsuz işlev getBooks() {
    denemek {
      const { veri: kitaplar } = axios.get('http://<bilgisayar-ip>:5000/kitaplar');
      setBooks(kitaplar);
    }
    yakalamak(hata) {
      setError(doğru);
    }
    en sonunda {
      setYükleniyor(yanlış);
    }
  }

Axios, verileri HTTP yanıtı içerik türüne göre dönüştürür, bu nedenle Fetch API örneğimizde yaptığımız gibi JSON'u açıkça istememize gerek yoktur. Burada, data özelliği değerini books değişkenine anında atamak için JavaScript'in yıkıcı sözdizimini kullanıyoruz.

Axios, HTTP yöntemleri için bize uygun işlevler sunar. Örneğin, aşağıdaki gibi bir POST isteği yapabiliriz:

 axios.post('/books/101', {inStock: false});

GET yanıtına benzer şekilde, fetch işlevinin aksine JSON.stringify işlevini kullanmadan JSON içeriğini doğrudan yayınlayabiliriz.

Birden çok uç noktaya AJAX istekleri yaparsanız, yapılandırma varsayılanlarınızı güncelleyerek axios.get('/books') , axios.patch('/books/100') vb. gibi Axios'ları genel bir temel URL yapılandırmasıyla kullanabilirsiniz. .

Alternatif AJAX kitaplıkları SuperAgent ve Wretch'i kullanma

Dışarıda birçok Axios alternatifi var. Trend olan iki HTTP istemci kitaplığını deneyelim: SuperAgent ve Wretch .
Başlamak için SuperAgent paketini yükleyin:

 npm superagent'ı yükle
# --- veya ---
iplik süperajan ekleyin

Şimdi, superagent API'sini aşağıdaki gibi içe aktarın:

 süperajan'ı 'süperajan'dan içe aktarın;

Uygulamayı tamamlamak için getBooks işlevine aşağıdaki kodu ekleyin:

 zaman uyumsuz işlev getBooks() {
    denemek {
      const { gövde: kitaplar } = bekleme superagent.get('http://<bilgisayar-ip>:5000/kitaplar');
      setBooks(kitaplar);
    }
    yakalamak(hata) {
      setError(doğru);
    }
    en sonunda {
      setYükleniyor(yanlış);
    }
 }

SuperAgent, await benzer bir vaat tabanlı API sunar, bu nedenle yukarıda gösterildiği gibi modern bekleme anahtar sözcüğünü kullanabiliriz. Kütüphanenin işlevselliğini genişletmek için bir eklenti sistemi sunar. Örneğin, global bir konfigürasyon tanımlamak için superagent-use eklentisini ve tüm istekler için bir temel URL tanımlamak için superagent-prefix kullanabiliriz.

Wretch, Fetch'ten daha okunabilir bir API'ye sahip bir fetch sarmalayıcıdır. JSON verilerini isterken dahili fetch işlevindeki aşırı geri aramayı ortadan kaldırır. Wretch'i uygulamamızda kullanalım!

İlk önce Wretch paketini kurun:

 npm kurulum zavallısı
# --- veya ---
iplik eklemek zavallı

Ardından, aşağıda gösterildiği gibi getBooks işlevindeki wretch işlevini kullanın:

 zaman uyumsuz işlev getBooks() {
    denemek {
      const kitaplar = zavallıyı bekle('http://<bilgisayar-ip>:5000/kitaplar').get().json();
      setBooks(kitaplar);
    }
    yakalamak(hata) {
      setError(doğru);
    }
    en sonunda {
      setYükleniyor(yanlış);
    }
  }

Gördüğünüz gibi wretch , geliştirici dostu bir sözdizimi ile fetch daha minimal bir API sunmaya çalışıyor. json işlevi, JSON içeriğine çözüm getiren bir söz sağlar – fetch await sezgisel bir şekilde kullanabiliriz.

Wretch, istekleri tekilleştirme, önbelleğe alma, yeniden deneme ve istekleri geciktirme için önceden oluşturulmuş modern ara katman yazılımları sunar. POST isteklerini işlemek de Axios kadar kolaydır:

 zavallıyı bekle('/books/101').post({inStock: false}).json();

TanStack Sorgusunu Kullanma

Yukarıdaki tüm yollar, React Native'de AJAX isteklerini işlemek için iyi çözümler sunar – bunları HTTP protokolü aracılığıyla uygulama ön uçlarını RESTful arka uçlarına bağlamak için kullanabiliriz. Ancak tipik bir modern React Native uygulaması, önbelleğe alma, istek tekilleştirme, otomatik yeniden denemeler ve çeşitli kullanılabilirlik geliştirmeleriyle temel AJAX işlemenin ötesine geçer. Wretch gibi bazı AJAX kitaplıkları, bu gereksinimlerin bazıları için modern ara yazılımlar sunar, ancak özel bir önbelleğe alma kitaplığı kullanmak, AJAX verilerini işlemek için size önceden oluşturulmuş birçok kullanılabilirlik ve performans geliştirmesi sağlar.

Kullanılabilirlik ve performans geliştirmeleri için bir önbelleğe alma kitaplığını tercih edilen bir AJAX kitaplığıyla entegre edebilirsiniz. Daha iyi AJAX kullanımı için TanStack Query'yi Axios ile birlikte kullanalım.

Axios kitaplığını projenize zaten yüklediğinizden emin olun. Ardından TanStack Sorgu kitaplığını aşağıda gösterildiği gibi kurun:

 npm install @tanstack/react-query
# --- veya ---
iplik @tanstack/tepki sorgusu ekleyin

Şimdi, App.js kaynak kodunuzu aşağıdaki kodla değiştirin:

 React, { useState } öğesini 'react'ten içe aktarın;
içe aktarmak {
  GüvenliAlan Görünümü,
  Görüş,
  düzListe,
  stil Sayfası,
  Metin,
  EtkinlikGöstergesi,
} 'react-native'den;
içe aktarmak {
  kullanımSorgu,
  useQueryClient,
  SorguMüşteri,
  QueryClientSağlayıcı,
} '@tanstack/react-query'den;
aksiyoları 'axios'tan içe aktarın;

const BookItem = ({ başlık, yazar, fiyat }) => (
  <Stil={styles.item}>
    <Görünüm stili={styles.itemLeft}>
      <Text style={styles.title}>{title}</Text>
      <Metin stili={styles.author}>{yazar}</Metin>
    </Görüntüle>
    <Görünüm stili={styles.itemRight}>
      <Text style={styles.price}>${price}</Text>
    </Görüntüle>
  </Görüntüle>
);

const Kitap Listesi = () => {
  const [kitaplar, setBooks] = useState([]);
  const [yükleniyor, setLoading] = useState(true);
  const queryClient = useQueryClient();
  const sorgu = useQuery(['kitaplar'], getBooks);

  zaman uyumsuz işlev getBooks() {
    const yanıtı = axios.get('http://<bilgisayar-ip>:5000/kitaplar');
    yanıt.verilerini döndür;
  }

  if(query.isLoading)
    return <ActivityIndicator size='large'/>;

  if(query.isError)
    return <Text style={styles.errorMsg}>Sunucuya bağlanılamıyor.</Text>;

  dönüş (
    <Düz Liste
      veri={sorgu.veri}
      renderItem={({ item }) => <BookItem {...item} />}
      keyExtractor={item => item.id}
    />
  );
}

const Uygulama = () => {
  const queryClient = new QueryClient();
  dönüş (
    <QueryClientProvider client={queryClient}>
      <SafeAreaView style={styles.container}>
        <Kitap Listesi/>
      </SafeAreaView>
    </QueryClientProvider>
  );
}

const stilleri = StyleSheet.create({
  kapsayıcı: {
    esnek: 1,
    marjÜst: '%10',
  },
  öğe: {
    esnek: 1,
    flexDirection: 'satır',
    flexWrap: 'sarma',
    alignItems: 'esnek başlangıç',
    arkaplanRenk: '#eee',
    dolgu: 12,
    kenar boşluğuDikey: 8,
    kenar boşluğuYatay: 16,
  },
  itemSol: {
    genişlik: '%70'
  },
  itemRight: {
    genişlik: '30%',
  },
  Başlık: {
    yazı tipiBoyutu: 22,
    renk: '#222',
  },
  yazar: {
    yazı tipiBoyutu: 16,
    renk: '#333',
  },
  fiyat: {
    yazı tipiBoyutu: 20,
    renk: '#333',
    textAlign: 'sağ'
  },
  hata mesajı: {
    renk: '#ee8888',
    yazı tipiBoyutu: 20,
    dolgu: 24,
    textAlign: 'merkez'
  }
});

varsayılan Uygulamayı dışa aktar;

Gördüğünüz gibi, TanStack Query size veri yükleme ve hata durumları sunar, bu nedenle yükleme durumunu ve hata mesajlarını uygulamak için birden fazla durum değişkeni veya özel Kancalar tanımlamanız gerekmez. Burada isLoading özelliğine göre yükleme animasyonunu, isLoading özelliğine göre ise hata mesajını isError .

TanStack Query, varsayılan olarak sorgu tekilleştirme uygular, bu nedenle aynı isteği iki kez kullanırsanız uygulamanız yalnızca bir HTTP isteği yapar. Aşağıdaki gibi iki BookList bileşen örneği kullanarak bunu doğrulayın:

 <SafeAreaView style={styles.container}>
  <Kitap Listesi/>
  <Kitap Listesi/>
</SafeAreaView>

Bir kesme noktası veya basit bir console.log kullanarak GET /books bitiş noktasının çağrı sayısını aşağıdaki gibi bulabilirsiniz:

 app.get('/books', function (req, res) {
  konsol.log('Test');
  res.json(kitaplar);
});

Bu makale ile kitaplıkları önbelleğe alma hakkında daha fazla bilgi edinin ve ihtiyaçlarınız için tercih edilen birini bulun.

AJAX hatalarını işleme

AJAX istekleri, ağ sorunları, sunucu tarafı arızaları ve web etki alanı yapılandırma sorunları nedeniyle başarısız olabilir. Bu tür hataları ön uçta ele almazsak, kullanıcılar kullanıcı dostu olmayan uygulama davranışlarıyla karşılaşabilir. Bu nedenle, gelişmiş kullanıcı dostu olması için AJAX odaklı React Native uygulamalarında hata işleme stratejilerini uygulamak her zaman iyidir.

Geliştiriciler, AJAX hatalarını kullanıcı dostu bir şekilde ele almak için genellikle aşağıdaki stratejilerden birini kullanır:

  • Önceki örneklerde yaptığımız gibi hata nedenini açıklayarak kullanıcıya bir hata mesajı gösterin.
  • AJAX isteğini birkaç kez otomatik olarak yeniden deneyin ve hala başarısız olursa bir hata mesajı gösterin
  • Kullanıcılara bir düğmeyle başarısız olan isteği manuel olarak yeniden denemeleri için bir yol sunun
  • Otomatik yeniden deneme, geliştirici dostu bir hata mesajı ve manuel yeniden deneme eylemi uygulayın
  • AJAX isteklerinin taşınması sırasında çevrimdışı olduktan sonra kullanıcı internete bağlandığında yeniden deneyin

TanStack Sorgusu, veri sağlayıcı işlevinden veri alana kadar başarısız istekleri birkaç kez yeniden dener. Getirme kullanıcıları, fetch-retry paketini kullanabilir ve Axios kullanıcıları, AJAX istekleri için otomatik yeniden denemeler uygulamak için axios-retry paketini kullanabilir.

Örneğin, axios-retry kullanan aşağıdaki kod parçacığına bakın.

 axiosRetry'yi 'axios-retry'den içe aktarın;
axiosRetry(axios, {
  retryCondition: () => doğru,
  yeniden deneme: 3,
  yeniden deneme Gecikmesi: () => 1000
});

Burada, her yeniden deneme denemesi arasında 1000 milisaniyelik bir gecikmeyle üç yeniden deneme denemesi belirledik. Yukarıdaki kodu kitapçı uygulamasına ekleyin, arka ucu çalıştırmadan uygulamayı başlatın, yükleme animasyonunun bir saniye dönmesine izin verin ve ardından RESTful sunucusunu başlatın. Otomatik yeniden denemeler sayesinde kitap listesini göreceksiniz:

AJAX isteklerini yeniden deneyerek veri yükleme
AJAX isteklerini yeniden deneyerek veri yükleme

RESTful sunucusunu üç saniye boyunca başlatmazsak, axios-retry kitaplığı yukarıdaki kurulumla üçten fazla yeniden deneme yapmayacağından hata mesajını görürsünüz:

Kitapçı uygulamamız birkaç denemeden sonra bir AJAX hatası gösteriyor
Kitapçı uygulamamız birkaç denemeden sonra bir AJAX hatası gösteriyor

Cihaz ve sunucu tarafı kaynak kullanımını göz önünde bulundurarak yeniden denemeleri uygulamak için üstel geri çekilme yeniden deneme konseptini de kullanabiliriz. Daha iyi uygulama kullanılabilirliği için otomatik yeniden denemeler gibi iyi bir AJAX hata işleme stratejisi seçin.

Aşağıdaki kodla bir manuel yeniden deneme düğmesi de ekleyebilirsiniz:

 React, { useState, useEffect } 'react'ten içe aktar;
içe aktarmak {
  Buton,
  GüvenliAlan Görünümü,
  Görüş,
  düzListe,
  stil Sayfası,
  Metin,
  EtkinlikGöstergesi,
} 'react-native'den;
aksiyoları 'axios'tan içe aktarın;
axiosRetry'yi 'axios-retry'den içe aktarın;

axiosRetry(axios, {
  retryCondition: () => doğru,
  yeniden deneme: 3,
  yeniden deneme Gecikmesi: () => 1000
});

const BookItem = ({ başlık, yazar, fiyat }) => (
  <Stil={styles.item}>
    <Görünüm stili={styles.itemLeft}>
      <Text style={styles.title}>{title}</Text>
      <Metin stili={styles.author}>{yazar}</Metin>
    </Görüntüle>
    <Görünüm stili={styles.itemRight}>
      <Text style={styles.price}>${price}</Text>
    </Görüntüle>
  </Görüntüle>
);

const Kitap Listesi = () => {
  const [kitaplar, setBooks] = useState([]);
  const [yükleniyor, setLoading] = useState(true);
  const [hata, setError] = useState(false);

  zaman uyumsuz işlev getBooks() {
    denemek {
      setYükleniyor(doğru);
      setError(yanlış);
      const { veri: kitaplar } = axios.get('http://<bilgisayar-ip>:5000/kitaplar');
      setBooks(kitaplar);
    }
    yakalamak(hata) {
      setError(doğru);
    }
    en sonunda {
      setYükleniyor(yanlış);
    }
  }

  useEffect(() => {
      getBooks();
  }, []);

  eğer(hata)
    dönüş (
      <Görüntüle>
        <Text style={styles.errorMsg}>Sunucuya bağlanılamıyor.</Text>
        <Görünüm stili={styles.btnWrapper}>
          <Button onPress={() => getBooks()} title="Yeniden Dene"></Button>
        </Görüntüle>
      </Görüntüle>
    );

  eğer(yükleniyor)
      return <ActivityIndicator size='large'/>;

  dönüş (
    <Düz Liste
      veri={kitap}
      renderItem={({ item }) => <BookItem {...item} />}
      keyExtractor={item => item.id}
    />
  );
}

const Uygulama = () => {
  dönüş (
    <SafeAreaView style={styles.container}>
      <Kitap Listesi/>
    </SafeAreaView>
  );
}

const stilleri = StyleSheet.create({
  kapsayıcı: {
    esnek: 1,
    marjÜst: '%10',
  },
  öğe: {
    esnek: 1,
    flexDirection: 'satır',
    flexWrap: 'sarma',
    alignItems: 'esnek başlangıç',
    arkaplanRenk: '#eee',
    dolgu: 12,
    kenar boşluğuDikey: 8,
    kenar boşluğuYatay: 16,
  },
  itemSol: {
    genişlik: '%70'
  },
  itemRight: {
    genişlik: '30%',
  },
  Başlık: {
    yazı tipiBoyutu: 22,
    renk: '#222',
  },
  yazar: {
    yazı tipiBoyutu: 16,
    renk: '#333',
  },
  fiyat: {
    yazı tipiBoyutu: 20,
    renk: '#333',
    textAlign: 'sağ'
  },
  hata mesajı: {
    renk: '#ee8888',
    yazı tipiBoyutu: 20,
    dolgu: 24,
    textAlign: 'merkez'
  },
  btnWrapper: {
    paddingLeft: '%15',
    paddingSağ: '%15',
    dolguTop: '%15'
  },
});

varsayılan Uygulamayı dışa aktar;

Yukarıdaki kod, bir AJAX istek hatasından sonra bir yeniden deneme düğmesi üretir. Yeniden Dene düğmesine tıkladığınızda web sunucusu tekrar çalışırsa, kitap listesi aşağıdaki önizlemede gösterildiği gibi her zamanki gibi çalışacaktır:

Kitapçı uygulamasında manuel yeniden deneme düğmesi
Kitapçı uygulamasında manuel Yeniden Dene düğmesi

Getirme vs. Axios vs. Diğer HTTP istemcileri vs. TanStack Sorgusu

Şimdi, yerleşik API'ler ve çeşitli üçüncü taraf kitaplıkları aracılığıyla RESTful web API'sine AJAX istekleri gönderdik. Her yaklaşım rekabet açısından iyidir, ancak bir sonraki React Native uygulamanızda hangisini kullanmayı planlıyorsunuz?

Karar vermeden önce, TanStack Query'nin henüz başka bir HTTP istemcisi olmadığını belirtmekte fayda var – uygulamanızın ön ucunu ve web hizmetlerinizi senkronize etmek için herhangi bir HTTP istemci kitaplığıyla birlikte kullanabileceğiniz bir önbelleğe alma kitaplığıdır.

Aşağıdaki karşılaştırma faktörlerine göre birini seçin:

karşılaştırma faktörü Gidip getirmek aksiyolar Diğer istemciler (SuperAgent, Wretch, vb.) TanStack Sorgusu
API türü Söze dayalı minimum Söze dayalı minimum Söz tabanlı minimal/ayrıntılı, eski olay tabanlı veya geri arama tabanlı Ayrıntılı OOP, geri arama tabanlı
Küresel yapılandırma desteği Dahili bir özellik olarak desteklenmez, ancak bir sarmalayıcı/önleyici oluşturarak mümkündür Desteklenen, yapılandırma varsayılanları olarak bilinir Çoğu kitaplık, özel bir kitaplık örneği oluşturarak genel yapılandırmaların ayarlanmasını destekler Desteklenir, QueryClient sınıfı aracılığıyla sunulur
Hermes'te kullanılan Temel React Native JavaScript API'si Gidip getirmek XMLHttpRequest Getir, XMLHttpRequest HTTP istemcisine bağlıdır
Kullanılabilirlik ve performans geliştirmeleri: önbelleğe alma, istekleri tekilleştirme vb. Geliştiricilerin bunları kendilerinin uygulaması veya bir topluluk kitaplığı kullanması gerekir. Geliştiricilerin bunları kendilerinin uygulaması veya bir topluluk kitaplığı kullanması gerekir. Geliştiricilerin bunları kendilerinin uygulaması veya bir topluluk kitaplığı kullanması gerekir. Wretch, istekleri tekilleştirme, yeniden deneme, istekleri geciktirme ve önbelleğe alma için resmi uzantılar sunar Önbelleğe alma, önbellek işleme (gerçek zamanlı kullanıcı arabirimleri oluşturmak için), tekilleştirme istekleri ve varsayılan olarak otomatik yeniden denemeler. Geliştiriciler, odak, ağ durumu değişikliği verilerinin yeniden alınması vb.
AJAX istek/yanıt işleme mantığını genişletme Paketleyiciler/önleyiciler ile mümkün İstek/yanıt önleyicilerle mümkün Çoğu kitaplık yerleşik eklenti sistemleriyle birlikte gelir. yani, Wretch ara katman yazılımları , SuperAgent eklentileri vb. AJAX istekleri gönderme sorumluluğu, bir söz yoluyla veri beklediği için bu kütüphaneye ait değildir. Bunun yerine AJAX kitaplığınızı genişletin.

Çözüm

Bu eğitimde React Native'de AJAX istekleri göndermenin çeşitli yollarını inceledik. Her bir yaklaşımı birkaç önemli karşılaştırma faktörüne dayanarak karşılaştırdık. Geçmişte, web uygulamaları, web sayfalarını dinamik hale getirmek için AJAX ile XML belgeleri ve HTML segmentleri getiriyordu. Web ve React Native mobil uygulamaları genellikle AJAX aracılığıyla RESTful JSON tabanlı web API'lerini kullanır.

Web servisleri için iletişim mesaj formatı olarak YAML, XML vb. gibi tercih edilen herhangi bir belge formatını kullanmak mümkündür. Ancak günümüzde JSON, AJAX ile veri taşımak için endüstri varsayılanıdır. React Native geliştiricileri, AJAX'ın istek-yanıt modelinin ötesine geçmek için WebSockets'i de kullanabilir.

Birçok geliştirici, okunabilir ve geliştirici dostu RESTful modeli, dahili API'leri ve kitaplık kullanılabilirliği ve HTTP odaklı geliştirme kolaylığı nedeniyle AJAX'ı tercih eder. Yukarıdaki yöntemlerden AJAX istekleri göndermek için bir yöntem seçin ve hataları kullanıcı dostu ve donanım kaynakları dostu bir şekilde ele alın.

React Native'de AJAX isteklerini anlama yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React Native'de AJAX isteklerini anlama