Temel Tanımlar
setTimeout()
setTimeout() içerisine fonksiyon ve çalışma zamanını alır. Ve istenen zamanda asenkron olarak çalışır. Bir kere çalışır. Kullanımına dikkat edilmelidir.
setTimeout(
() => console.log("Benim çalışmam 5 sn geciktirildi. Bir kere çalışacağım."),
5000
);setInterval()
- setInterval() parametre olarak fonksşyon ve çalışma aralığını alır. Belirlenen zaman içerisinde çalışır ve tekrar eder asenkron değildir çalıştığı sürece bir sonraki kodu çalıştırmaz.
setInterval(
() =>
console.log("1 sn'de bir çalışırım. Durdurulmadığım sürece devam ederim."),
1000
);Callback Function
- callback function bir fonksiyonun diğer bir fonksiyona paremetre olaral geçilmesidir. Temel olarak Asenkron değildir. Ancak kullandığı bağlama göre de değişiklik göstermektedir. setTimeout bunlardan biridir.
Basit bir örnenk verecek isek sayHi adında selamlama fonksiyonumuz bulunsun ve içerisine fonksiyon albilsin ve daha sonra parametre verelim.
const sayHi = (cb) => {
cb();
};
sayHi(() => {
console.log("Merhaba");
});Asenkron async ve await
- JavaScript satır satır okuyarak veriyi döndürür fakat sistemin ve işleyişin durumuna göre fonksiyonların senkron veya asenkron çalışması gerekebilir. Bu durumda ise verinin veya fonksiyonun çalışma zamanı değişebilir. Bu durumu simüle etmek için fetch kütükhanesine kullanarak https://jsonplaceholder.typicode.com/ web sayfasından örnek apiler edineceğim. Fetch kütüphanesi promise yapısı olduğundan dolayı asenkron olarak bize verileri getirecek bir den fazla aynı anda kullanılır ise veriyi kim daha önce ulaşır ise bize veriyi yansıtan hızlı fetch çağrısı olacaktır. Fakat bu durum çoğu kes istenen bir durum değildir. Bu duruma asenkriyon durumlar karşımıza çıkar ve bir işlem diğer işlemin bitimini beklemesi gerekebilir. Bunun nedeni bir sonraki verinin bir önceki veriyle bağlantılı olmasıdır. Bu durumda bir işlemi async fonksiyon olarak tanımlamamız gerekecektir. await ise gerçekleşmesi ise gerçekleşmesi durumunu belirtir ve bekletir.
Örnek te olduğu gibi eğer user nesnesinin belli bir id si olan kullanıcının postlarını göster der ve birbirine bağımlı olurlar ise aşağıdaki kod asenkriyon çalışacağı için bu durumda istediğimiz sonucu veremeyecektir.
index.js
fetch("https://jsonplaceholder.typicode.com/users")
.then((data) => data.json())
.then((users) => console.log(users));
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((data) => data.json())
.then((post) => console.log(post));Bir birine bağımlı olmaları durumunda then anahtar kelimesi ile birbirini takip eden fonksiyonlardan yararlanabiliriz. Aşağıdaki örnekte useId si bir olan user kullanıcı bilgilerini ayrıca bu işlem tamamlanınca userId bir olan post ları getirecektir. Böylece asentron olarak başlatılan işlem belli bir mantığa oluşturulmuş olacaktır.
index.js
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((data) => data.json())
.then((data) => {
console.log("User", data);
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((data) => data.json())
.then((data) => console.log("User Post", data));
});console
User {
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz',
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
},
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
company: {
name: 'Romaguera-Crona',
catchPhrase: 'Multi-layered client-server neural-net',
bs: 'harness real-time e-markets'
}
}
User Post {
userId: 1,
id: 1,
title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
body: 'quia et suscipit\n' +
'suscipit recusandae consequuntur expedita et cum\n' +
'reprehenderit molestiae ut ut quas totam\n' +
'nostrum rerum est autem sunt rem eveniet architecto'
}Bu işlem async ve await olarakta gerçekleştirilebilmektedir. Bu yöntem karmaşıklığı önler.
index.js
const getData = async () => {
const user = await fetch("https://jsonplaceholder.typicode.com/users/1").then(
(data) => data.json()
);
const post = await fetch("https://jsonplaceholder.typicode.com/posts/1").then(
(data) => data.json()
);
console.log("User", user);
console.log("Post", post);
};
getData();console
User {
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz',
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
},
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
company: {
name: 'Romaguera-Crona',
catchPhrase: 'Multi-layered client-server neural-net',
bs: 'harness real-time e-markets'
}
}
Post {
userId: 1,
id: 1,
title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
body: 'quia et suscipit\n' +
'suscipit recusandae consequuntur expedita et cum\n' +
'reprehenderit molestiae ut ut quas totam\n' +
'nostrum rerum est autem sunt rem eveniet architecto'
}Fonksiyon getData olarak çağrılmalıdır. Çağrılması için anonim fonsksiyon kullanılabilir. ()() kullanılır.
index.js
(async () => {
const user = await fetch("https://jsonplaceholder.typicode.com/users/1").then(
(data) => data.json()
);
const post = await fetch("https://jsonplaceholder.typicode.com/posts/1").then(
(data) => data.json()
);
console.log("User", user);
console.log("Post", post);
})();console
User {
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz',
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
},
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
company: {
name: 'Romaguera-Crona',
catchPhrase: 'Multi-layered client-server neural-net',
bs: 'harness real-time e-markets'
}
}
Post {
userId: 1,
id: 1,
title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
body: 'quia et suscipit\n' +
'suscipit recusandae consequuntur expedita et cum\n' +
'reprehenderit molestiae ut ut quas totam\n' +
'nostrum rerum est autem sunt rem eveniet architecto'
}
Kaynak
