JS Promises

JavaScript Promises Cheatsheet

1. Basit Promise Tanımı

let sayHello = new Promise(function(resolve, reject) {
  // Hata durumunda reject kullanılır
  reject('Unable to say hi.');

  // 5 saniye sonra Promise resolve edilir
  setTimeout(function () {
    resolve('Hi, universe!');
  }, 5000);
});

sayHello.then(function(msg) {
  console.log(msg);
}).catch(function(error) {
  console.warn(error);
});

2. Promise Zincirleme

let count = new Promise(function(resolve, reject) {
  resolve(1);
});

count.then(function(num) {
  console.log(num);
  return num + 1;
}).then(function(num) {
  console.log(num);
  return num + 1;
}).then(function(num) {
  console.log(num);
  return num + 1;
});

3. Anında Çözümlenen Promise

let question = new Promise(function(resolve, reject) {
  resolve(42);
});

setTimeout(function () {
  question.then(function(answer) {
    console.log(answer);
  });
}, 5000);

4. 50/50 Şansı Olan Promise

new Promise(function(resolve, reject) {
  if (Math.random() < 0.5) {
    reject('We'll never know...');
  } else {
    resolve(42);
  }
}).then(function(answer) {
  console.log(answer);
}).catch(function(error) {
  console.warn(error);
}).finally(function () {
  console.log('I run no matter what!');
});

5. `Promise.all` Kullanımı

Promise.all([
  fetch('https://jsonplaceholder.typicode.com/posts'),
  fetch('https://jsonplaceholder.typicode.com/users')
]).then(function(responses) {
  return Promise.all(responses.map(function(response) {
    return response.json();
  }));
}).then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});

6. Geleneksel ve Async/Await Fonksiyonları

// Geleneksel
function traditionalFn() {
  fetch('https://jsonplaceholder.typicode.com/posts/')
    .then(function(response) {
      return response.json();
    }).then(function(data) {
      console.log('Traditional Fetch', data);
    });
  console.log('Traditional Message');
}
traditionalFn();

// Async/Await
async function asyncFn() {
  await fetch('https://jsonplaceholder.typicode.com/posts/')
    .then(function(response) {
      return response.json();
    }).then(function(data) {
      console.log('Async Fetch', data);
    });
  console.log('Async Message');
}
asyncFn();

7. Async Fonksiyon ve Promise `then`

async function getTheAnswer() {
  return 42;
}

let answer = getTheAnswer();
console.log(answer);  // Promise<42>

answer.then(function(data) {
  console.log(data);  // 42
});

async function logAnswer() {
  let answer = await getTheAnswer();
  console.log(answer);  // 42
}
logAnswer();

8. Hata Yönetimi

async function getArticleByIDAsync(id) {
  let response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  if (!response.ok) {
    throw 'Something went wrong.';
  }
  let data = await response.json();
  console.log(data);
}

getArticleByIDAsync(3);

async function getArticleByIDErrors(id) {
  try {
    let response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    if (!response.ok) {
      throw 'Something went wrong.';
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.warn(error);
  }
}

getArticleByIDErrors(999999);

Ek Öneriler ve Örnek Kodlar

1. `Promise.race`

Promise.race, verilen Promiselardan ilk çözümlenen veya reddedileni döner.

let promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // "two"
});

2. `Promise.allSettled`

Promise.allSettled, tüm Promiselar çözümlendiğinde veya reddedildiğinde bir dizi sonucu döner.

let promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'two');
});

Promise.allSettled([promise1, promise2]).then((results) => {
  results.forEach((result) => console.log(result.status));
  // "fulfilled"
  // "rejected"
});

Hata Yönetimi ve En Önerilen Kullanım Şekli

Asenkron fonksiyonlarda hata yönetimi için try...catch blokları kullanılması önerilir. Bu sayede, hata durumunda kodun nasıl davranacağı açıkça belirtilebilir.

async function fetchData(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
    throw error; // Hatanın yukarıya taşınmasını sağlar
  }
}

async function main() {
  try {
    let data = await fetchData('https://jsonplaceholder.typicode.com/posts/1');
    console.log(data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

main();

Bu yapı, kodun daha okunabilir ve sürdürülebilir olmasını sağlar. Hatalar düzgün bir şekilde ele alınır ve gerektiğinde yukarıya taşınarak ana akışta da işlenebilir.

hkkcngz/promises.md