JavaScript'de Promises

Bu makale JavaScript'de Promises konusuna ayrılmıştır Promiseler, asenkron işlemleri yönetmek için kullanılan bir yapıcıdır Bu yazıda Promiselerin kullanımı ve avantajları detaylı olarak açıklanmaktadır Tek tek kod örnekleriyle açıklanan bu makale, JavaScript öğrenirken Promiseler hakkında bilgi edinmek isteyenler için çok yararlıdır

JavaScript'de Promises, asenkron programlama alanında oldukça önemli bir konudur. Bu konu, JavaScript kodunun HTTP istekleri gibi asenkron işlemlerinin yönetiminde büyük bir kolaylık sağlar. Özellikle büyük uygulamaların geliştirilmesi sırasında, asenkron işlemlerin yönetimi oldukça zorlayıcı olabilir, ancak Promises yapısıyla bu işlem oldukça basitleştirilebilir.

Promises, temel olarak bir işlem tamamlandığında ne olacağını açıklayan bir yapıdır. İşlem başarılı olursa, Promises yapısı bu durumu başarı ile sonlandırdığını ifade eder. Ancak, işlem başarılı olmazsa da, Promises yapıları bu durumu başarısızlık olarak tanımlayarak izleyen işlemler için gerekli uyarıları verir.

HTTP isteklerinde Promises yapısı oldukça önemlidir. Promises yapısı sayesinde, kullanıcının browser'ı donmasını engelleyen ve aynı zamanda daha hızlı ve stabil çalışan bir kod yazım şekli elde edilir. HTTP isteklerini yönetmek için, Axios ve Fetch API gibi Promise tabanlı kütüphaneler kullanılabilir. Bu kütüphaneler, HTTP isteklerinin yönetimini kolaylaştırır ve daha az kod yazımı gerektirir.

Promises Nedir?

Promises, JavaScript'te asenkron işlemleri daha okunaklı ve yönetilebilir hale getirmeye yarayan bir yapıdır. Asenkron işlemler, bir işlem gerçekleşene kadar beklemek yerine diğer işlemleri yapmaya devam edebilirler. Bu özellik JavaScript'te oldukça yaygın bir şekilde kullanılır.

Promises, asenkron işlemleri yaparken kullanılan bir yapıdır. Promisler işlemin başarılı olup olmadığını belirlemek için bir yapıdır. Bu yapıda işlem başarılı bir şekilde tamamlandığında, işlem sonucu değeri döndürülür. Eğer işlem başarısız bir şekilde sonuçlanırsa, Promise hata değerleri döndürür.

Promises, sadece JavaScript'te asenkron işlemleri yönetmekle kalmaz, aynı zamanda dosya yükleme, veri doğrulama ve animasyon gibi birçok farklı alanda kullanılabilir. Promises, hem daha okunaklı hem de daha kolay yönetilebilir kodlar yazmaya olanak sağlar.

Promise Aşamaları
Pending	Promis şu anda gerçekleşmekte olan bir işlemi ifade eder.
Fulfilled	Promis işlem başarılı bir şekilde tamamlandığında bu aşama gerçekleşir.
Rejected	Promis işlem başarısız bir şekilde tamamlandığında bu aşama gerçekleşir.

Promises, asenkron işlemleri daha okunaklı ve yönetilebilir hale getirmek için kullanılır.
Promisler işlemin başarılı olup olmadığını belirlemek için bir yapıdır.
Promises, dosya yükleme, veri doğrulama ve animasyon gibi birçok farklı alanda da kullanılabilir.
Promises, dönen değerleri yönlendirmek için kullanılır.

HTTP İstekleri ve Promises

Web uygulamalarında en sık kullanılan işlemlerden biri, web sunucularına HTTP isteklerinin gönderilmesidir. Bu işlemler genellikle asenkron şekilde gerçekleştirilir. Promises kullanarak HTTP isteklerinin yönetilmesi, işlemin daha kolay bir şekilde yazılmasını sağlar.

Promise yapısı, bir işlemin tamamlanması durumunda sonucun geri döndürüleceğini taahhüt eden bir JavaScript nesnesidir. HTTP isteklerinde bu yapının kullanılması, kaynakların yönetimini ve kullanımını düzenler. Ayrıca, Promise yapısı kodun daha okunaklı ve anlaşılır olmasını sağlar ve hata yönetimi için daha iyi olanaklar sunar.

Promise yapısının kullanımı, HTTP istekleri için çok önemlidir. Kodu daha güvenilir ve daha az hata yapmaya yatkın hale getirir. Promise yapıları kodun paralel olarak çalışmasını sağlar ve isteklerin cevaplarının beklenmesi gerekmeksizin diğer işlemlerin devam etmesine imkan verir. Bu, web sitesinin daha hızlı yüklenmesini sağlar.

HTTP isteklerinin yönetimi için kullanılan kütüphaneler arasında en yaygın olanı, Axios'tur. Axios, Promise tabanlı bir kütüphanedir ve HTTP istekleri yapmak için kullanılabilecek çeşitli kod yazım teknikleri sunar. HTTP isteklerinde Promises kullanılması, Axios kullanarak kod yazımını daha basit hale getirir.

HTTP isteklerinin yönetimi, web uygulamalarının temel özelliklerinden biridir. Promise yapısının kullanımı, web geliştiricilerine HTTP isteklerinin yönetimi için daha etkili ve güvenli bir şekilde kod yazma imkanı sağlar. Axios gibi kütüphaneler, HTTP isteklerinin yönetimi için çok yararlıdır ve Promises kullanarak bunları daha kolay ve daha okunaklı hale getirebilirsiniz.

Axios ile HTTP İstekleri

Axios, HTTP isteklerini Promise tabanlı bir kütüphane olarak oldukça kolaylaştırır. Axios, XMLHttpRequest'ler ve node.js tarafından sunulan http modülü ile entegre olabilen Promise tabanlı bir HTTP istemcidir ve modern tarayıcılar ve node.js destekleyerek her yerde kullanılabilir.

Axios kullanarak, HTTP isteklerinin yanı sıra, Request ve Response'lar ile işleme yapılabilmektedir. Request ile HTTP isteği ayarlanır ve Response ile cevap işlenir.

Axios kullanımı oldukça basittir. Endpoint URL'sine GET veya POST isteği yapmak istediğinizde, öncelikle Axios'u projenize dahil etmelisiniz. Ardından, axios.get() veya axios.post() yöntemlerini kullanarak ilgili HTTP istekleri yapabilirsiniz. Örneğin, axios.get() yöntemi, Promise geri döndürür.

Axios kullanırken, request veya response ile yapmak istediğiniz eylemleri Promise yapısını kullanarak işleme alabilirsiniz. Örneğin, bir post isteği sonrasında, then() metoduyla istek sonucu işlenebilir.

Axios kullanarak yapılan HTTP istekleri, işlem süreci sırasında otomatik olarak belirtilen formatlarda gönderilir. Örneğin, POST isteği yapmak istediğinizde, Axios, verileri otomatik olarak JSON formatında gönderir.

Sonuç olarak, Axios ile HTTP istekleri yapmak, Promise yapısı sayesinde oldukça kolaylaştırılmıştır. Axios, modern tarayıcılar ve node.js tarafından desteklendiği için, tüm projelerde rahatlıkla kullanılabilir.

Get İstekleri

Axios kullanarak Get istekleri ile verilerimizi kolayca çekebiliriz. Axios'un Promise tabanlı yapısı sayesinde bu işlemi yapmak oldukça kolaydır. Bu isteklerde değişken atamaları yapmak için de Promise yapısını kullanabiliriz.

Örneğin, bir veri tabanından tüm kullanıcıları çekmek için Axios kullanarak bir Get isteği yazabiliriz.

axios.get('http://example.com/api/users')  .then(function (response) {    console.log(response.data);  })  .catch(function (error) {    console.log(error);  });

Bu kod bloğu, veri tabanından tüm kullanıcıları çekmek için bir Get isteği yapar ve gelen cevabı console ekranına yazdırır. Eğer bir hata olursa, hatayı da console ekranına yazdırır.

Ayrıca, Get isteği sırasında kullanıcıya bir bildirim de göstermek istiyorsak, Promise yapısını kullanabiliriz. Örneğin:

function getUser() {  return axios.get('http://example.com/api/users');}
function displayUser() {  getUser().then(function (response) {    // kullanıcının verileri burada işlenebilir    // kullanıcıya bir bildirim de gösterilebilir  });}
displayUser();

Bu kod bloğunda, displayUser fonksiyonu çağrıldığında, getUser fonksiyonu çağrılır ve veri tabanından kullanıcı verileri çekilir. Sonrasında Promise yapısı kullanılarak, kullanıcının verilerini işlemek ve kullanıcıya bir bildirim gösterebilmek için işlemler gerçekleştirilebilir.

Post İstekleri

Axios ile Post istekleri yapmak oldukça kolaydır. Axios kütüphanesi, Promise tabanlı bir yapıya sahip olduğu için Post istekleri de Promise yapısının avantajlarından yararlanabilir. Post isteği yapmak için Axios kütüphanesinin sağladığı özel bir fonksiyon kullanılır. Bu fonksiyon, istek yapılacak adresi ikinci parametre olarak alırken, üçüncü parametre olarak da gönderilecek veriyi alır.

Axios ile yapılan Post isteğinin Promise yapısından yararlanması için, then() ve catch() yöntemleri kullanılır. then() yöntemi, istek başarılı bir şekilde tamamlandığında geri döndürülen veriyi işlemek için kullanılırken, catch() yöntemi hatalı bir durumda geri döndürülen hatayı yakalamak için kullanılır.

Örnek olarak, Axios ile bir Post isteği oluşturma işlemini aşağıdaki gibi gerçekleştirebiliriz:

``````

Yukarıdaki örnekte, bir Post isteği oluşturuluyor ve istek adresi ve gönderilecek veri belirtiliyor. İstek başarılı bir şekilde tamamlandığında then() yöntemi geri döndürülen veriyi konsola yazar. Eğer istek bir hata ile sonuçlanırsa, catch() yöntemi hatayı yakalar ve konsola yazdırır.

Axios ile Post isteklerinin yanı sıra, Fetch API ile de Post istekleri yapılabilir. Fetch API de Promise tabanlı bir yapıya sahip olduğu için Post istekleri de Promise yapısının avantajlarından yararlanabilir. Fetch API ile Post isteği yapmak için fetch() fonksiyonu kullanılır. Bu fonksiyon, istek yapılacak adresi ve gönderilecek veriyi alır.

Post isteği yaparken Fetch API'da also ikinci bir parametre daha gönderilir. Bu parametre, Post isteği yaparken kullanılacak olan HTTP methodunu belirtir. Bu parametrenin değeri "POST" olarak belirlenmelidir.

Örnek olarak, Fetch API ile bir Post isteği oluşturma işlemini aşağıdaki gibi gerçekleştirebiliriz:

``````

Axios ve Fetch API ile Post istekleri yapmak oldukça kolay ve Promise yapısının avantajlarından yararlanarak kod yazmak daha kolay hale gelir.

Fetch API ile HTTP İstekleri

Fetch API, modern web tarayıcılarında bulunan bir HTTP istekleri API'sidir. Promise tabanlıdır, bu nedenle asenkron programlama için oldukça kullanışlıdır. Fetch API ile HTTP istekleri yaparken, API'yi kullanarak bir fetch () isteğinde bulunuruz ve sonra Promise tabanlı bir yanıt elde ederiz. Fetch API'de, HTTP istek yönetimi yapmak için birçok özellik mevcuttur. Örneğin, istek yaparken headers, mode, cache gibi isteğe özel ayarlar yapılabilir.

Fetch API ile yapılacak bir HTTP isteği, bir URL ve bir istek yapmak istediğimiz metod (GET, POST veya diğerleri) belirtilerek oluşturulur. Daha sonra bu istek ile devam etmek adına, Promise tabanlı bir yanıt elde edilir. Bu yanıt içindeki veri kullanılarak sayfada veri manipülasyonu yapılabilir. Örnek olarak, belirli bir URL'e GET isteği yaparak, sayfa içinde istenen verilerin listelenmesi sağlanabilir.

Fetch API kullanarak yapılan HTTP istekleri oldukça hızlıdır ve özellikle modern web tarayıcılarında çalışması sayesinde, birçok farklı projede kullanılabilir. Özellikle tek bir sayfada birden fazla istek yapıp, yanıtları bir araya toplama gerektiğinde Fetch API ile çalışmak oldukça kolaydır.

Fetch API, modern tarayıcılarda bulunan bir HTTP istekleri API'sidir.
Promise tabanlıdır, bu nedenle asenkron programlama için oldukça kullanışlıdır.
Fetch API ile HTTP istekleri yaparken, API'yi kullanarak bir fetch () isteğinde bulunuruz ve sonra Promise tabanlı bir yanıt elde ederiz.

Özetle, Fetch API, modern web tarayıcılarında bulunan bir HTTP istekleri API'sidir ve Promise tabanlıdır. Bu nedenle asenkron programlama için oldukça kullanışlıdır. İstekler yaparken bir URL ve bir HTTP metod belirtilir ve bu istek Promise tabanlı bir yanıt elde edilmesini sağlar. Bu yanıt verileri kullanarak, sayfada veri manipülasyonu yapılabileceği gibi, Fetch API ile yapılan HTTP istekleri oldukça hızlıdır.

Get İstekleri

Fetch API ile yapılmış Get istekleri, sunucudan veri almak için kullanılır. Veri, bir URL aracılığıyla sunucuya talep edilir. Fetch API, gönderilen istekten sonra sunucudan cevap aldıktan sonra Promise yapısını kullanarak veriyi işler.

Get istekleri, Promise kullanarak daha kolay ve daha verimli bir şekilde yönetilebilir. Örneğin, aşağıdaki kodda URL'ye yapılan bir Get isteği gösterilmiştir.

fetch('http://example.com/data')  .then(response => response.json())  .then(data => console.log(data))  .catch(error => console.error(error))

Bu kodda, fetch() metodu ile URL adresine bir istek yapılmıştır. Sonrasında, .then() yöntemi response.json() yöntemi ile cevap verisini JSON formatında alır.

Daha sonra, gelen veri .then() yöntemi ile bir callback fonksiyonuna gönderilir ve bu callback fonksiyonunda yapılacak işlemler belirlenir. Hata durumuna karşın .catch() yöntemi kullanılarak hata mesajları kontrol edilebilir.

Bu şekilde Get istekleri, Promise yapısının avantajları ile kolayca yönetilebilir ve veri işlemleri hızlı ve hatasız bir şekilde gerçekleştirilebilir.

Post İstekleri

Fetch API ile Post istekleri yapmak için, isteğin methodunu 'POST' olarak belirtmek gerekir. Ayrıca, HTTP header bilgileriyle birlikte fetch() fonksiyonuna verilir. Body kısmı ise verileri içeren bir objedir. Bu obje, FormData() ya da JSON.stringify() fonksiyonlarıyla oluşturulabilir. Örneğin;

fetch('https://www.example.com/api/create', {  method: 'POST',  headers: {    'Content-Type': 'application/json'  },  body: JSON.stringify({    name: 'John',    age: 25  })}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

Bu örnekte, bir POST isteği gönderilirken 'Content-Type' header bilgisi 'application/json' olarak belirtilir. Body kısmı ise JSON.stringify() fonksiyonu kullanılarak 'name' ve 'age' değerlerini içeren bir objeye dönüştürülür. Gelen yanıt ise önce .json() fonksiyonu ile parse edilir ve sonra console.log() ile yazdırılır.

Fetch API için yazılmış bir Promise fonksiyonu da aynı işlemi yapar. Örneğin;

function createNewUser(data) {  return new Promise((resolve, reject) => {    fetch('https://www.example.com/api/create', {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify(data)    })    .then(response => response.json())    .then(data => resolve(data))    .catch(error => reject(error));  });}createNewUser({  name: 'John',  age: 25}).then(data => console.log(data)).catch(error => console.error(error));

Bu örnekte, createNewUser() adlı bir Promise fonksiyonu oluşturulur ve 'resolve' ya da 'reject' olarak sonuç döndürür. Post isteği yine fetch() fonksiyonu ile yapılır ve gelen yanıt .json() ile parse edilir. Gelen veri 'resolve' ile döndürülür, hata durumunda ise 'reject' ile döndürülür.

Bu şekilde Fetch API kullanarak, kolaylıkla Post istekleri yapılabilir ve Promise yapısıyla sonuçların yönetimi sağlanabilir.