Javscript

JavaScript’te Getirme API’sinin Sizi Kariyerinizde Uzaklaştıracak Tek Parçası – JSManifest

bu fetch JavaScript’teki api, geliştiricilere HTTP istekleri ve HTTP ardışık düzeni ile çalışmak için bir arabirim sağlar. Bu isteklerden alınan yanıtları işlemek için de kullanılır. Fetch API ile istek gönderme, global kullanarak asenkron kodla çalışıyor. Promise esnek bir şekilde sunmak için JavaScript’te nesne.

halefi olduğunu XMLHttpRequest ağ üzerinden kaynaklarla uzaktan iletişim kurmak için daha iyi (ve modern) bir alternatiftir. Tüm görevleri yerine getirebilir XMLHttpRequest ile yetenekliydi.

Ben bir baş mühendisim ve zamanımın %100’ünü JavaScript’e harcadım. Rahat olduğum tek dilim bu. Ayrıca ustalaşmak için çok fazla zaman harcadım fetch tüm giriş ve çıkışlarında çünkü gerçek dünyada büyük olasılıkla şöyle şeyler kullanmanıza gerek kalmayacak TextDecoder veya HTTP istekleri/yanıtlarıyla çalışmak için bu ekstra şeylerden herhangi biri. Bunun arkasında iyi bir sebep var: garip parçalar zaten sizin için halka açık kütüphanelerde yapılmıştır.

Bu nedenle, genel olarak projeler üzerinde çalışırken zamanla öğrendiğim şey, mükemmellik için çabalamanın başarıya ulaşmak için bir çözüm olmadığıdır. Mükemmel bir çözüm yok. Ama hayatta çok uzağa gitmenin iyi bir yolu, akıllıca çalış.

Bu yazıda bölümlerin üzerinden geçeceğiz. fetch api yani Sadece yeterli geliştirme kariyerinizde sizi çok ileriye götürmek için. Bu, şu anlama gelir: seyrek yöntemlerini kullanıyor olmak fetch API bu öğreticinin dışında. Başka bir deyişle, bu makaledeki bilgiler JavaScript geliştirme kariyerinizin diğer bölümlerine odaklanmanız için yeterlidir. Sen getirme ile ilgili her şeyi anlamanıza gerek yok başarılı olmak için. Sadece anlaman gerekiyor projelerinizde yapmanız istenecek parçalar.

Şirketimdeki (BT dışındaki bir beceride uzmanlaşmış) bir baş görevli, kısa süre önce başka bir departmanda çalışan bir üyeyi hızlı bir şekilde çalıştıran bir web sitesini alkışladı. çok hızlı. O çalışan wordpress kullandı. O akıllı çalıştı.

İstek Gönderme ve Yanıt Alma

aşina olmalısın Request ve Response itiraz etmek fetch nesne ile iletişim kurar. Bu iki nesneyle çalıştığınızda aslında bir taşla çok sayıda kuş vurmuş olursunuz, çünkü gerçek dünyaya adım attığınızda bu iki nesnenin ya taklit edildiğini ya da aşağıdaki gibi çerçevelerde yeniden kullanıldığını fark edeceksiniz. Gatsby işlevler, geliştirme sunucusu webpackNode.js’deki yerel kitaplıklar bu arabirimi kendi yazılımlarında da kullanır. http modül.

Özellikler/yöntemler ayrıca bilerek gibi kitaplıklarda yanıtlarla çalışmak için bir kural olarak kullanılır varyani bilerek Request ve Response açık kaynaklı araçların öğrenme sürecinde bir çeşit “kısayol”a sahip olacaksınız.

Kullanacağınız en yaygın yöntem fetch bu get yöntem.

Aşağıdaki örnek bir get listesini getirme isteği hound köpek ırkları:

window.addEventListener('load', async (event) => {
  const url = `https://dog.ceo/api/breed/hound/list`

  const response = await fetch(url)
  const result = await response.json()

  console.log(result)
})

Sonuç:

{
  "message": [
    "afghan",
    "basset",
    "blood",
    "english",
    "ibizan",
    "plott",
    "walker"
  ],
  "status": "success"
}

Kaynak olarak kullanılabilir hale gelir Response istek tamamlandıktan sonra nesne.

Bu Response nesne, en hassas kısım olan verilerinizi içerir, bu nedenle bebeğiniz gibi ilgilenilmesi gerekir. fetch ile çalışmak için farklı yöntemler de sağlar. Response. Yararlı özellikler ve onu incelemek için yöntemler ile birlikte gelen, alınan kaynağın sarıcısıdır.

Verileri elde etme şeklimiz kullandığımız yöntemlere ve çoğu zaman aynı zamanda kullanılan yöntemlere de bağlıdır. tip içeriğinden. JavaScript’i kullanarak yanıtın içeriğini çözerdik Promise İçeriği beklediğimiz son biçime ayrıştırmamıza yardımcı olan API.

Örneğin, yanıt döndürüldüğünde ve içindeki verileri elde etmek istediğimizde ham metin biçimi, Response sağlar .text() getirilen kaynağın içeriğini okuma yöntemi:

const result = await response.text()

Bu örnekte kullandığımız text yöntem ve bize başarıyla çözüldü. Bu iyi ama içeriğe baktığımızda aslında bir JSON dizesi.

Veriler zaten bir JSON dizisi olduğundan, sadece json dizeyi bizim için bir javascript nesnesine otomatik olarak ayrıştırma yöntemi (aksi takdirde her seferinde kullanarak onu kendimiz ayrıştırmak zorunda kalırdık) JSON.parse):

const response = await fetch(url)
const result = await response.json()

Çoğu zamanın özellikle modern web geliştirmede çoğunlukla .json() veri okuma yöntemi. Ancak ne zaman farkında olmamız gerektiğini belirtmekte fayda var. olumsuzluk kullanmak için, yoksa böyle bir şeyle sonuçlanırdık:

const response = await fetch(url)
const result = await response.json()

console.log(result)

Bu feci bir hatadır çünkü genellikle uygulamamızın daha sonra beklediğimiz şekilde davranmasını engeller.

Yanıt verilerini okumanın başka yolları da vardır (bunların tümü Promise) gibi:

  1. response.blob()
  2. response.formData()
  3. response.arrayBuffer()

Yanıt Durum Kodları

bu Response object ayrıca, isteğin başarılı olup olmadığını kontrol etmek için kullanabileceğimiz üç özellikle birlikte gelir:

const response = await fetch(url)

console.log(response.status) 
console.log(response.statusText) 
console.log(response.ok) 

Buradaki en önemli özellik, .status Emlak. Uygulamamız için sonraki adımları buna göre işlemek için kullanabileceğimiz, istek yanıtının durumunu tanımlayan bir HTTP durum kodu döndürür.

Bilmemiz gereken en yaygın (ve gerekli) durum kodları 404 ve 500 (ve 200 başarı için) web’de sık sık meydana gelmesi nedeniyle.

Yanıtlar bir ile döndüğünde 404 durum kodu genellikle şunlardan biri anlamına gelir:

  1. İstenen kaynak bulunamadı
  2. URL tanınmadı
  3. Uç nokta tanındı, ancak kaynak gitti veya eksik
  4. İstek kaynağı, yetkisiz kullanıcıların onu görüntülemesine karşı korunur

Yanıtlar yukarıdaki bir şeyin durum koduyla döndüğünde 500 sunucunun kendisinden kaynaklanan bir hatadır. genelde görüyorum 500 gibi ilgili kodlarının aksine 503 bu, sunucunun aldığı hatayı işleyemediği ve bunun yerine yanıtın boş döndürüldüğü anlamına gelir.

Kullanım Durumlarını Getir

kullanabiliriz fetch JavaScript tarayıcı ortamlarında veri almak için (daha önce gösterildiği gibi), ancak bunu bir konuma kaynak eklemenin veya değiştirmenin bir yolu olarak da kullanabiliriz.

Örneğin, DOM’da dosya yüklemeyi seçtikten sonra verileri işlemek için kullanabiliriz:

<form name="upload-form" method="post">
  <label for="upload-files">Click to upload one or more files</label>
  <input
    name="upload-files"
    type="file"
    placeholder="Select file(s)"
    multiple
  /><input />
</form>

Bununla kullanabiliriz fetch bizim form kullanıcılarımız için dosya yüklemek üzere işleyiciler gönderin:

async function onSubmit(event) {
  event.preventDefault()
  const fileInput = [...event.target.elements].find((el) => el.type === 'file')
  const filesList = fileInput.files
  const file = filesList[0]

  await fetch(`/upload-my-data?filename=${file.name}`, {
    body: file,
    method: 'post',
  })
}

document
  .querySelector(`form[name="upload-form"]`)
  .addEventListener('submit', onSubmit)

Uzak bir konumda düz nesne kaynakları oluşturmak için verileri JSON biçiminde yüklemek için de kullanabiliriz:

<form name="new-profile-form" method="post">
	<div>
		<input type="text" name="name" placeholder="Your Name"></input>
	</div>
	<div>
		<input type="text" name="email" placeholder="Your Email"></input>
	</div>
	<div>
		<textarea name="message" placeholder="Message" ></textarea>
	</div>
	<button type="submit">Submit</button>
</form>
async function onSubmit(event) {
  event.preventDefault()
  const body = {}
  const formElements = [...this.elements].filter((el) =>
    el.hasAttribute('name'),
  )

  for (const el of formElements) {
    body[el.getAttribute('name')] = el.value
  }

  const response = await fetch(`/upload-my-data`, {
    body: JSON.stringify(body),
    method: 'post',
  })

  console.log(`[onSubmit] data`, await response.json())
}

document
  .querySelector(`form[name="new-profile-form"]`)
  .addEventListener('submit', onSubmit)

fetch-post-json-data-javascript.png

Çözüm

Bunlar, web geliştirme kariyerinizde gerçekten çok ilerlemeniz gereken temel özelliklerdir. Eğer kapsamınız dışında bir şey yapmanız istendiğinde bir zaman gelir fetch yapabilir, o zaman tek yapman gereken google’da aratmak.

Ve bu yazının sonu burada bitiyor! Bunu değerli bulduğunuzu ve gelecekte daha fazlasını aradığınızı fark ettim!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu