Çözüldü JavaScript await ve async nedir?

BreaKSooN05 dedi:

Arkadaşlar, bu konuyu YT Proturk'ten ve yabancı bir kanaldan dinledim. Hiç anlamadım bunun başlangıç konusu promise imiş onu da Proturk'ten izledim. Ama yine anlamadım. Şu an kafam hiç almıyor salağa anlatır gibi anlatan bir kanal var mı?

Bu konu önemli anladığım kadarıyla neden kullanıldığını anlıyorum ancak kullanamıyorum.

https://codepen.io/dogukanhanifi/pen/mdxEQjq

=> Bu attığım en basit örnektir herhalde bunu bile yapamıyorum. 2-3 farklı web sitesinde inceledim herkes farklı tarzlarda yapmış. Kafam çok karıştı.

Genişletmek için tıkla...

function one() {
    setTimeout(() => {
        console.log("zaman bitti");
    }, 2500);
}

function two() {
    console.log("iki")
}

function test() {
    console.log("test çalıştı");
    one();
    two();
}

test();

function one() {
    setTimeout(() => {
        console.log("zaman bitti");
    }, 2500);
}

function two() {
    console.log("iki")
}

async function test() {
    console.log("test çalıştı");
    await one();
    two();
}

test();

• Await kullanmak için Async bir fonksiyonda olmanız gerekiyor vanilla Javascriptte.
• Async/Await genel olarak diğer sitelerden veri çekmek istediğimizde kullanılıyor.

SirY dedi:

Prototurk önermem. Devletin kendi sitesi olan Btk Akademi baya iyidir, kimlik bilgisi falan isterse de güvenli.

Genişletmek için tıkla...

Kxaan dedi:

JavaScript:Panoya kopyala

function one() {
 setTimeout(() => {
 console.log("zaman bitti");
 }, 2500);
}

function two() {
 console.log("iki")
}

function test() {
 console.log("test çalıştı");
 one();
 two();
}

test();

Yukarıdaki kodu çalıştırdığımızda "One" isimli fonksiyon çalışıyor ve "setTimeout" ile beraber 2.5 saniye bekledikten sonra "zaman bitti" yazıyor konsola. 2.5 saniye bittikten sonra "two" isimli fonksiyon çalışıyor ve konsola "iki" yazıyor. Yani program işin bitmesini bekliyor. Konsol çıktısı şu şekilde olur;
- "Test çalıştı"
- "Zaman bitti"
- "İki"

JavaScript:Panoya kopyala

function one() {
 setTimeout(() => {
 console.log("zaman bitti");
 }, 2500);
}

function two() {
 console.log("iki")
}

async function test() {
 console.log("test çalıştı");
 await one();
 two();
}

test();

Eğer bu şekilde async/await kullanırsanız program "One" isimli fonksiyonun işini bitirmesini beklemez ve devam eder. Konsol çıktısı şu şekilde olur;
- "Test çalıştı"
- "İki"
- "Zaman bitti"

• Await kullanmak için Async bir fonksiyonda olmanız gerekiyor vanilla JavaScript'te.
• Async/Await genel olarak diğer sitelerden veri çekmek istediğimizde kullanılıyor.

Yanlışım olabilir kendi bildiğim kadarınca anlatmaya çalıştım.

Hocam prototurk neden önermediniz? Ben içeriklerini yararlı buluyorum açıkçası.

Genişletmek için tıkla...

Kxaan dedi:

Hocam prototurk neden önermediniz? Ben içeriklerini yararlı buluyorum açıkçası.

Genişletmek için tıkla...

tabii efendim dedi:

Verdiğin örnek çalışıyor ama 'setTimeout' içindekilerin çalışmasını beklemiyor. Çalıştırılıyor ve koda devam ediyor, ne kadar süre sonra içindekilerin çalışmasını istediysen o zaman da içindekiler çalışıyor. Async, await kullanmak için önce "Promise"lere bakman gerek. Onu da söz vermek olarak düşünebilirsin. Çalıştırdığın zaman geriye bir değer döndürür. Koduna göre beklenen ve beklenmeyen durumlarda ne olacağına karar verebilirsin. "Resolve" metoduyla beklenen durumları, "reject" ile de beklenmeyenleri karşılayabilirsin. "reject" çalıştığında bir hata gönderir, "catch" kullanarak hata durumunda olacakları kontrol edebilirsin. Aşağıdaki örneklerde "Resolve" ile "reject" satırlarının yerini değiştirerek deneyebilirsin. "Resolve, reject" isimleri yerine istediğini kullanabilirsin(değişken kurallarıyla uyumlu olacak şekilde) ama sıralaması önemli(Promise((Resolve, reject) => {}), Promise((basarili, basarisiz) => {}) vb.).

JavaScript:Panoya kopyala

function one() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve("Başarılı");
 reject("Promise: Reject");
 }, 2500)
 })
}

function two() {
 console.log("iki");
}

async function test() {
 try {
 console.log("test çalıştı");
 const data = await one();
 console.log(data);
 two();
 } catch (e) {
 console.log("Hata: ", e);
 }
}

test();

JavaScript:Panoya kopyala

function one() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve("Başarılı");
 reject("Promise: Reject");
 }, 2500)
 })
}

function two() {
 console.log("iki");
}

async function test() {
 console.log("test çalıştı");
 await one().then((data) => {
 console.log(data);
 }).catch((err) => {
 console.log(err);
 });
 two();
}

test();

Genişletmek için tıkla...