Fetch API'sini kullanarak HTTP isteklerinin nasıl gerçekleştirileceğine dair pratik bir ES6 kılavuzu

Jad Joubran tarafından oluşturulan resim

Bu kılavuzda, bir REST API'ye HTTP istekleri gerçekleştirmek için Fetch API'sini (ES6 +) nasıl kullanacağınızı, muhtemelen karşılaşacağınız bazı pratik örneklerle nasıl kullanacağınızı göstereceğim.

HTTP örneklerini hızlıca görmek ister misiniz? Bölüm 5'e gidin. İlk bölüm, HTTP istekleriyle çalışırken JavaScript'in zaman uyumsuz bölümünü açıklar.

Not: Tüm örnekler ES6'da ok işlevleriyle yazılmıştır.

Günümüzün web / mobil uygulamalarındaki ortak bir model, sunucudan (kullanıcılar, gönderiler, yorumlar, abonelikler, ödemeler ve benzeri) bir miktar veri talep etmek veya göstermek ve ardından CRUD kullanarak oluşturmak (oluşturmak, okumak, güncelleme veya silme) işlemleri.

Bir kaynağı daha fazla manipüle etmek için, genellikle .map (), .filter () ve .reduce () gibi bu JS yöntemlerini kullanırız.

Daha iyi bir web geliştiricisi olmak, kendi işinizi kurmak, başkalarına öğretmek veya geliştirme becerilerinizi geliştirmek istiyorsanız, en son web geliştirme dilleri hakkında haftalık ipuçları ve püf noktaları gönderiyorum.

İşte biz neleri ele alacağız

  1. JS’nin eşzamansız HTTP istekleriyle ilgilenmek
  2. AJAX Nedir?
  3. Neden API Al?
  4. API Getir'e hızlı bir giriş
  5. API getir - CRUD örnekleri ← iyi şeyler!

1. JS’nin eşzamansız HTTP istekleriyle ilgilenmek

JavaScript'in (JS) nasıl çalıştığını anlamanın en zorlu kısımlarından biri, vaatlerin ve geri aramaların nasıl işlediğini gerektiren ve anlayan nasıl asenkron isteklerle nasıl başa çıkılacağını anlamaktır.

Çoğu programlama dilinde, işlemlerin sırayla gerçekleştiğini düşünmek üzere bağlanırız. Bir sonraki satıra geçmeden önce ilk satırın çalıştırılması gerekir. Bu mantıklı çünkü biz insanlar bu şekilde işler ve günlük görevleri yerine getiririz.

Ancak JS ile, arka planda / ön planda çalışan birden fazla işlem yapıyoruz ve bir kullanıcı etkinliğini her beklettiğinde donacak bir web uygulamasına sahip olamıyoruz.

JavaScript'i zaman uyumsuz olarak tanımlamak belki de yanıltıcıdır. JavaScript'in senkronize ve çeşitli geri arama mekanizmalarıyla tek iş parçacıklı olduğunu söylemek daha doğru. Daha fazla oku.

Bununla birlikte, bazen bazı şeyler sırayla yapılmalıdır, aksi takdirde kaos ve beklenmedik sonuçlara neden olur. Bu nedenle, onu yapılandırmak için sözler ve geri aramalar kullanabiliriz. Bir örnek, bir sonraki işleme geçmeden önce kullanıcı kimlik bilgilerini doğrulamak olabilir.

2. AJAX Nedir?

AJAX, Asenkron JavaScript ve XML anlamına gelir ve uygulama çalışırken bir web sunucusuyla veri alışverişinde bulunarak web sayfalarının asenkron olarak güncellenmesine olanak tanır. Kısacası, esasen, tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncelleyebileceğiniz anlamına gelir (URL aynı kalır).

AJAX yanıltıcı bir isimdir. AJAX uygulamaları veri aktarmak için XML kullanabilir, ancak verileri düz metin veya JSON metni olarak taşımak da aynı derecede yaygındır.
 - w3shools.com

AJAX sonuna kadar mı?

Birçok geliştiricinin, tek sayfalık bir uygulamada (SPA) her şeyin olması konusunda gerçekten heyecanlanma eğiliminde olduğunu gördüm ve bu da pek çok zaman uyumsuz acıya neden oluyor! Ama neyse ki, bu süreci çok daha kolay ve pratik yapan Angular, VueJS ve React gibi kütüphanelerimiz var.

Genel olarak, sayfanın tamamını veya sayfanın bölümlerini neyin yeniden yüklemesi gerektiği arasında bir denge olması önemlidir.

Çoğu durumda, bir sayfa yeniden yükleme, tarayıcıların ne kadar güçlü hale geldiğine göre iyi çalışır. Günler içinde, bir sayfanın yeniden yüklenmesi saniyeler sürebilir (sunucunun konumuna ve tarayıcı özelliklerine bağlı olarak). Ancak günümüzde tarayıcılar oldukça hızlıdır, bu nedenle AJAX veya sayfa yeniden yüklemesi yapıp yapmayacağınıza karar vermek büyük bir fark değildir.

Kişisel deneyimim, basit bir arama düğmeli bir arama motoru oluşturmanın, düğmeden yapmaktan çok daha kolay ve hızlı olmasıdır. Çoğu durumda, müşteri bir SPA veya fazladan sayfa yeniden yükleme yapması ile ilgilenmez. Tabii ki beni yanlış anlamayın, SPA'ları seviyorum, ancak sınırlı bir bütçe ve kaynak yetersizliği ile ilgilenirsek, belki de hızlı bir çözüm daha iyi bir yaklaşım olabilir.

Sonunda, bu gerçekten kullanım durumuna bağlı, ancak şahsen SPA'ların basit bir sayfanın yeniden yüklemesinden daha fazla geliştirme süresi ve biraz baş ağrısı gerektirdiğini hissediyorum.

3. Neden API Al?

Bu, bir sunucuya bildirimsel HTTP istekleri gerçekleştirmemizi sağlar. Her istek için, içerik türünü tanımlamak ve verilere erişmek için çözülmesi gereken bir Söz Verir.

Şimdi, Fetch API'nin yararı, JS ekosistemi tarafından tamamen desteklenmesi ve ayrıca MDN Mozilla belgelerinin bir parçası olması. Ve son fakat en az değil, çoğu tarayıcıda (IE hariç) kutudan çıktı. Uzun vadede, bunun web API'lerini çağırmanın standart yolu olacağını tahmin ediyorum.

Not! RXJS ile Gözlenebilir'i kullanma ve abone / abonelikten çıkma vb. Gibi bellek yönetimi / sızıntıya nasıl odaklandığı gibi diğer HTTP yaklaşımlarının farkındayım. Ve belki bu HTTP isteklerini yapmanın yeni standart yolu olabilir, kim bilir?
Her neyse, bu makalede sadece Fetch API'ye odaklanıyorum, ancak gelecekte gözlemlenebilir ve RXJS hakkında bir makale yazabilir.

4. API Get hızlı bir giriş

Fetch () yöntemi, Durumu Gösterme Talebini Yanıttan (başarılı veya değil) gösteren bir Söz Verir. Bu mesajın konsol günlük ekranınızda {} sözünü alırsanız, panik yapmayın - bu temelde Sözün işe yaradığı ancak çözülmeyi beklediği anlamına gelir. Bu nedenle, sorunu çözmek için içeriğe erişmek için .then () işleyicisine (geri arama) ihtiyacımız var.

Kısacası, önce yolu (Al) tanımlarız, ikincisi sunucudan (İstek) veri isteriz, üçüncü olarak içerik türünü (Gövde) tanımlar ve en sonuncusu değil, verilere erişiriz (Yanıt).

Bu kavramı anlamakta zorlanıyorsanız endişelenmeyin. Aşağıda gösterilen örneklerle daha iyi bir genel bakış elde edersiniz.

Örneklerimiz için kullanacağımız yol
https://jsonplaceholder.typicode.com/users // JSON’yi döndürür

5. API getir - HTTP örnekleri

Verilere erişmek istiyorsak iki .then () işleyicisine (geri arama) ihtiyacımız var. Ancak, kaynağı manipüle etmek istiyorsak, sadece bir .then () işleyicisine ihtiyacımız var. Ancak, değerin gönderildiğinden emin olmak için ikincisini kullanabiliriz.

Temel Fetch API şablonu:

Not! Yukarıdaki örnek sadece açıklama amaçlıdır. Çalıştırırsanız kod çalışmaz.

API örnekleri al

  1. Bir kullanıcı gösteriliyor
  2. Bir kullanıcı listesi gösteriliyor
  3. Yeni bir kullanıcı oluşturma
  4. Bir kullanıcıyı silmek
  5. Bir kullanıcıyı güncelleme
Not! Kaynak sunucuda gerçekten oluşturulmayacak, ancak gerçek bir sunucuyu taklit etmek için sahte bir sonuç döndürecek.

1. Bir kullanıcıyı gösterme

Daha önce belirtildiği gibi, tek bir kullanıcıyı gösterme işlemi, iki .then () işleyicisinden (geri arama), nesneyi tanımlayan ilk ve verilere erişmek için ikincisinden oluşur.

Sadece / users / 2 sorgusunu okuyarak API'nın ne yaptığını anlayabiliyoruz / tahmin edebiliyoruz. Yüksek kaliteli REST API'sinin nasıl yazılacağı hakkında daha fazla bilgi için Mahesh Haldar tarafından yazılan bu kurallara göz atın.

Örnek

2. Bir kullanıcı listesi gösteriliyor

Örnek, sorgu dizgisinin / users / / users / 2 değil, önceki örnekle neredeyse aynıdır.

Örnek

3. Yeni bir kullanıcı oluşturma

Bu, önceki örnekten biraz farklı görünüyor. HTTP protokolünü bilmiyorsanız, bize POST, GET, DELETE, UPDATE, PATCH ve PUT gibi birkaç tatlı yöntem sunar. Bu yöntemler, yürütülecek eylemin türünü tanımlayan fiillerdir ve çoğunlukla sunucudaki kaynak / veriyi manipüle etmek için kullanılır.

Neyse, Fetch API ile yeni bir kullanıcı oluşturmak için, POST fiilini kullanmamız gerekir. Ama önce onu bir yerde tanımlamamız gerekiyor. Neyse ki, isteğe bağlı bir argüman var İnit, yöntem türü, gövde, kimlik bilgileri, başlıklar ve benzeri gibi özel ayarları tanımlamak için URL ile birlikte geçebiliriz.

Not: fetch () yönteminin parametreleri Request () yapıcısının parametreleriyle aynıdır.

Örnek

4. Bir kullanıcıyı silmek

Kullanıcıyı silmek için önce kullanıcıyı / users / 1 ile hedeflememiz ve ardından DELETE olan yöntem türünü tanımlamamız gerekir.

Örnek

5. Bir kullanıcıyı güncelleme

HTTP fiili PUT, hedef kaynağı değiştirmek için kullanılır ve kısmi değişiklikler yapmak istiyorsanız PATCH kullanmanız gerekir. Bu HTTP fiillerinin ne yaptığı hakkında daha fazla bilgi için, bunu kontrol edin.

Örnek

Sonuç

Artık, JavaScript’in Fetch API'sını kullanarak sunucudan bir kaynağın nasıl alınacağına ya da değiştirileceğine ve ayrıca vaatlerle nasıl başa çıkacağınıza dair temel bir anlayışınız var. Bu makaleyi, CRUD işlemleri için API isteklerinizin nasıl yapılandırılacağına dair bir rehber olarak kullanabilirsiniz.

Şahsen, Fetch API'sinin bildirici olduğunu hissediyorum ve herhangi bir teknik kodlama deneyimi olmadan neler olduğunu kolayca anlayabilirsiniz.

Tüm örnekler, sonradan geri arama kullanarak isteği zincirlediğimiz söz verilen temel istek içinde gösterilmektedir. Bu, birçok geliştiricinin aşina olduğu standart bir yaklaşımdır, ancak eğer async / await kullanmak istiyorsanız, bu makaleyi inceleyin. Konsept aynıdır, ancak zaman uyumsuzluk / bekleme okumak ve yazmak daha kolaydır.

İşte kişisel programlama ipuçları ve püf noktaları ile birlikte web ekosistemi hakkında yazdığım birkaç makale.

  • Açısal ve Tepki arasında bir karşılaştırma
  • Kaotik bir zihin kaotik koda yol açar
  • Sürekli yeni şeyler öğrenmek isteyen geliştiriciler
  • ES6 modülleri için pratik bir rehber
  • Bu temel Web Kavramlarını öğrenin
  • Bu önemli JavaScript yöntemleriyle becerilerinizi geliştirin
  • Özel bash komutları oluşturarak daha hızlı programlayın

Beni haftalık olarak yayınladığım Orta'da bulabilirsin. Veya kişisel hikayelerin yanı sıra ilgili web geliştirme ipuçlarını ve püf noktalarını gönderdiğim Twitter'da beni takip edebilirsiniz.

Not; Bu makaleyi beğendiyseniz ve daha fazlasını isterseniz, lütfen ❤'yı alkışlayın ve ihtiyaç duyabilecek arkadaşlarınızla paylaşın, bu iyi bir karma.