Zaman uyumsuz bir ├ža─čr─▒n─▒n yan─▒t─▒n─▒ nas─▒l d├Ând├╝r├╝r├╝m?


Al─▒nan cevaba git


foo Ajax iste─či yapan bir i┼čleve sahibim . Yan─▒t─▒ nas─▒l iade edebilirim foo ?

success Geri ├ža─č─▒rmadaki de─čeri d├Ând├╝rmeyi ve i┼člev i├žindeki yerel bir de─či┼čkene yan─▒t─▒ atamay─▒ ve bunu d├Ând├╝rmeyi denedim , ancak bu yollardan hi├žbiri yan─▒t─▒ geri d├Ând├╝rmedi.

 function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- I tried that one as well
        }
    });

    return result;
}

var result = foo(); // It always ends up being `undefined`.
 

5149









Cevap say─▒s─▒n─▒ say: 30






Ôćĺ Farkl─▒ ├Ârneklerle e┼čzamans─▒z davran─▒┼č─▒n daha genel bir a├ž─▒klamas─▒ i├žin, l├╝tfen bkz. De─či┼čkenim bir i┼člevin i├žinde de─či┼čtirdikten sonra neden de─či┼čmiyor? - Asenkron kod referans─▒

Ôćĺ Sorunu daha ├Ânce anlad─▒ysan─▒z, a┼ča─č─▒daki olas─▒ ├ž├Âz├╝mlere atlay─▒n.

Sorun

Bir de Ajax a├ž─▒l─▒m─▒ asenkron . Bu, iste─čin g├Ânderilmesi (veya daha do─črusu cevab─▒n al─▒nmas─▒) normal uygulama ak─▒┼č─▒ndan al─▒nd─▒─č─▒ anlam─▒na gelir. ├ľrnekte, $.ajax hemen geri d├Âner ve bir sonraki ifade, geri arama olarak return result; iletti─činiz i┼člev success ├ža─čr─▒lmadan ├Ânce ├žal─▒┼čt─▒r─▒l─▒r .

Burada, senkronize ve senkronize olmayan ak─▒┼č aras─▒ndaki fark─▒ daha net bir ┼čekilde a├ž─▒klayan bir benzetme ┼č├Âyledir:

Senkron

Bir arkada┼č─▒n─▒za bir telefon g├Âr├╝┼čmesi yapt─▒─č─▒n─▒z─▒ ve ondan sizin i├žin bir ┼čey aramas─▒n─▒ istedi─činizi hayal edin. Biraz zaman alabilir, ancak arkada┼č─▒n─▒z size gereken cevab─▒ verene kadar telefonda bekleyin ve uzaya bak─▒n.

Ayn─▒s─▒ "normal" kod i├žeren bir i┼člev ├ža─čr─▒s─▒ yapt─▒─č─▒n─▒zda oluyor:

 function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();
 

Y├╝r├╝t├╝lmesi findItem uzun zaman alabilir olsa da, daha sonra gelen herhangi bir kod i┼člev sonucu d├Ând├╝rene kadar beklemek var item = findItem(); zorundad─▒r .

e┼čzamanl─▒ olmayan

Ayn─▒ sebepten dolay─▒ arkada┼č─▒n─▒ tekrar ara. Ama bu sefer ona acelesi oldu─čunu ve seni cep telefonundan arayaca─č─▒n─▒ s├Âylemelisin . Telefonu kapat, evden ayr─▒l ve ne yapmay─▒ planl─▒yorsan onu yap. Arkada┼č─▒n─▒z sizi geri arad─▒─č─▒nda, size verdi─či bilgilerle ilgileniyorsunuz.

Ajax iste─činde bulundu─čunda olan tam olarak bu.

 findItem(function(item) {
    // Do something with item
});
doSomethingElse();
 

Yan─▒t─▒ beklemek yerine, y├╝r├╝tme derhal devam eder ve Ajax ├ža─čr─▒s─▒ndan sonraki ifade y├╝r├╝t├╝l├╝r. Sonunda yan─▒t─▒ almak i├žin, yan─▒t al─▒nd─▒ kez ├ža─čr─▒lacak bir i┼člev, bir sa─člamak geri arama (bildirim ┼čey? ├ça─čr─▒ geri ?). Bu ├ža─čr─▒dan sonra gelen herhangi bir ifade, geri arama ├ža─čr─▒lmadan ├Ânce ger├žekle┼čtirilir.


├ç├Âz├╝m (ler)

JavaScript'in asenkron yap─▒s─▒n─▒ kucakla! Baz─▒ e┼čzamans─▒z i┼člemler e┼čzamanl─▒ meslekta┼člar─▒ sa─člarken ("Ajax" da ayn─▒ ┼čekilde), bunlar─▒ genellikle taray─▒c─▒ ba─člam─▒nda kullanmaktan ka├ž─▒n─▒rlar.

Neden soruyorsun k├Ât├╝?

JavaScript, taray─▒c─▒n─▒n UI i┼č par├žac─▒─č─▒nda ├žal─▒┼č─▒r ve uzun s├╝ren herhangi bir i┼člem kullan─▒c─▒ arabirimini kilitleyerek yan─▒t vermez. Ek olarak, JavaScript i├žin y├╝r├╝tme s├╝resinde bir ├╝st s─▒n─▒r vard─▒r ve taray─▒c─▒ kullan─▒c─▒dan y├╝r├╝tmeye devam edip etmeyece─čini soracakt─▒r.

B├╝t├╝n bunlar ger├žekten k├Ât├╝ bir kullan─▒c─▒ deneyimi. Kullan─▒c─▒ her ┼čeyin yolunda olup olmad─▒─č─▒n─▒ s├Âyleyemez. Ayr─▒ca, yava┼č ba─člant─▒ya sahip kullan─▒c─▒lar i├žin bu etki daha da k├Ât├╝le┼čecektir.

A┼ča─č─▒da, her biri ├╝st ├╝ste in┼ča edilmi┼č ├╝├ž farkl─▒ ├ž├Âz├╝me bakaca─č─▒z:

  • S├Âzler async/await (ES2017 +, bir aktar─▒c─▒ veya rejenerat├Âr kullan─▒yorsan─▒z, eski taray─▒c─▒larda kullan─▒labilir)
  • Geri aramalar (d├╝─č├╝mde pop├╝ler)
  • S├Âzler then() (ES2015 +, ├žok say─▒da s├Âz k├╝t├╝phanesinden birini kullan─▒yorsan─▒z, eski taray─▒c─▒larda kullan─▒labilir)

Her ├╝├ž├╝ de mevcut taray─▒c─▒larda ve d├╝─č├╝m 7 + 'da kullan─▒labilir.


ES2017 +: ile vaat ediyor async/await

2017'de yay─▒nlanan ECMAScript s├╝r├╝m├╝ , zaman uyumsuz i┼člevler i├žin s├Âzdizimi d├╝zeyinde destek sa─člam─▒┼čt─▒r. Yard─▒m─▒yla async ve await bir "senkron tarz─▒" asenkron yazabilir. Kod hala e┼čzamans─▒zd─▒r ancak okunmas─▒ / anla┼č─▒lmas─▒ daha kolayd─▒r.

async/await Bir vaat ├╝zerine in┼ča: bir async fonksiyon her zaman bir s├Âz verir. await Bir vaadi "├ž├Âzer" ve ya vaadin ├ž├Âz├╝ld├╝─č├╝ de─čerle sonu├žlan─▒r ya da vaat reddedilirse bir hata yapar.

├ľnemli: Yaln─▒zca await bir async i┼člev i├žinde kullanabilirsiniz . ┼×u anda, ├╝st d├╝zey await hen├╝z desteklenmiyor, bu nedenle bir ba─člam ba┼člatmak i├žin bir zaman uyumsuz IIFE ( An─▒nda ├ça─čr─▒lan ─░┼člev ─░fadesi ) yapman─▒z gerekebilir async .

MDN async ve hakk─▒nda daha fazla bilgi edinebilirsiniz await .

─░┼čte yukar─▒daki gecikmenin ├╝st├╝ne ├ž─▒kan bir ├Ârnek:

 // Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}


async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();
 

Mevcut taray─▒c─▒ ve d├╝─č├╝m s├╝r├╝mleri deste─či async/await . Rejenerat├Âr├╝ (veya Babel gibi rejenerat├Âr kullanan ara├žlar─▒) kullanarak kodunuzu ES5'e d├Ân├╝┼čt├╝rerek daha eski ortamlar─▒ da destekleyebilirsiniz .


─░┼člevlerin geri aramalar─▒ kabul etmesine izin ver

Geri ├ža─č─▒rma, basit├že ba┼čka bir i┼čleve ge├žen bir i┼člevdir. Di─čer i┼člev, haz─▒r oldu─čunda, ge├žirilen i┼člevi ├ža─č─▒rabilir. Zaman uyumsuz bir i┼člem ba─člam─▒nda, zaman uyumsuz i┼člem yap─▒ld─▒─č─▒nda geri ├ža─čr─▒ ├ža─čr─▒l─▒r. Genellikle, sonu├ž geri aramaya iletilir.

Soru ├Ârne─činde, foo geri aramay─▒ kabul edebilir ve success geri ara olarak kullanabilirsiniz . Yani bu

 var result = foo();
// Code that depends on 'result'
 

olur

 foo(function(result) {
    // Code that depends on 'result'
});
 

Burada "inline" fonksiyonunu tan─▒mlad─▒k fakat herhangi bir fonksiyon referans─▒n─▒ ge├žebilirsiniz:

 function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);
 

foo kendisi ┼č├Âyle tan─▒mlan─▒r:

 function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}
 

callback foo biz onu ├ža─č─▒rd─▒─č─▒m─▒zda iletti─čimiz fonksiyona at─▒fta bulunaca─č─▒z ve basit├že onu kullanaca─č─▒z success . Bir ba┼čka deyi┼čle, Ajax talebi ba┼čar─▒l─▒ oldu─čunda, $.ajax cevap arayacak callback ve geri aramaya cevap verecektir (bununla geri d├Ân├╝┼č├╝ tan─▒mlayaca─č─▒m─▒zdan bu adresten yararlan─▒labilir result ).

Yan─▒t─▒ geri aramaya ge├žirmeden ├Ânce de i┼čleyebilirsiniz:

 function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}
 

Geri aramalar─▒ kullanarak kod yazmak g├Âr├╝nd├╝─č├╝nden daha kolayd─▒r. Ne de olsa, taray─▒c─▒daki JavaScript b├╝y├╝k oranda olay odakl─▒ (DOM olaylar─▒). Ajax yan─▒t─▒n─▒ almak bir olaydan ba┼čka bir ┼čey de─čildir.
├ť├ž├╝nc├╝ taraf kodlarla ├žal─▒┼čmak zorunda oldu─čunuzda zorluklar ortaya ├ž─▒kabilir, ancak ├žo─ču sorun yaln─▒zca uygulama ak─▒┼č─▒n─▒ d├╝┼č├╝nerek ├ž├Âz├╝lebilir.


ES2015 +: O zamanlar vaat ediyor ()

Promise API ECMAScript'e 6 (ES2015) yeni bir ├Âzelliktir, ama iyi vard─▒r taray─▒c─▒ deste─či zaten. Standart Promises API'sini uygulayan ve asenkron fonksiyonlar─▒n (├Ârne─čin bluebird ) kullan─▒m─▒n─▒ ve bile┼čimini kolayla┼čt─▒rmak i├žin ek y├Ântemler sa─člayan bir├žok k├╝t├╝phane de vard─▒r .

S├Âzler gelecekteki de─čerler i├žin kapsay─▒c─▒d─▒r . S├Âz├╝n de─čeri ald─▒─č─▒nda ( ├ž├Âz├╝l├╝r ) veya iptal edildi─činde ( reddedildi─činde ), bu de─čere eri┼čmek isteyen t├╝m "dinleyicilerini" bildirir.

D├╝z geri aramalara g├Âre avantaj─▒, kodunuzu ay─▒rman─▒za izin vermesi ve olu┼čturmas─▒ daha kolay olmas─▒d─▒r.

─░┼čte bir s├Âz kullanman─▒n basit bir ├Ârne─či:

 function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay()
  .then(function(v) { // `delay` returns a promise
    console.log(v); // Log the value once it is resolved
  })
  .catch(function(v) {
    // Or do something else if it is rejected 
    // (it would not happen in this example, since `reject` is not called).
  });
 

Ajax ├ža─čr─▒m─▒za uyguland─▒─č─▒nda ┼č├Âyle s├Âzler kullanabiliriz:

 function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  });
}

ajax("/echo/json")
  .then(function(result) {
    // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });
 

Teklif vaat eden t├╝m avantajlar─▒ a├ž─▒klamak, bu cevab─▒n kapsam─▒ d─▒┼č─▒ndad─▒r, ancak yeni bir kod yazarsan─▒z, bunlar─▒ ciddiye almal─▒s─▒n─▒z. Kodunuzun m├╝kemmel bir soyutlamas─▒n─▒ ve ayr─▒lmas─▒n─▒ sa─člarlar.

S├Âzler hakk─▒nda daha fazla bilgi: HTML5 rocks - JavaScript Promises

Yan not: jQuery'nin ertelenmi┼č nesneleri

Ertelenen nesneler , jQuery'nin vaatlerin ├Âzel uygulamas─▒d─▒r (Promise API standardize edilmeden ├Ânce). Neredeyse vaat ettikleri gibi davran─▒rlar, ancak biraz farkl─▒ bir API g├Âsterirler.

Her jQuery metodunun Ajax metodu, fonksiyonunuzdan sadece geri d├Ânebilece─činiz bir "ertelenmi┼č nesne" (asl─▒nda ertelenmi┼č bir nesnenin vaadi) d├Ând├╝r├╝r:

 function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});
 

Yan not: Promise gotchas

Vaat edilen ve ertelenen nesnelerin gelecekteki bir de─čer i├žin kaplar oldu─čunu, de─čerin kendisi olmad─▒─č─▒n─▒ unutmay─▒n. ├ľrne─čin, a┼ča─č─▒dakilere sahip oldu─čunuzu varsayal─▒m:

 function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}
 

Bu kod yukar─▒daki e┼čzamans─▒z sorunlar─▒ yanl─▒┼č anl─▒yor. ├ľzellikle, $.ajax() sunucunuzdaki '/ password' sayfas─▒n─▒ kontrol ederken kodu dondurmaz; sunucuya bir istek g├Ânderir ve beklerken sunucudan gelen yan─▒t─▒ de─čil, hemen bir jQuery Ajax Deferred nesnesini d├Ând├╝r├╝r. Bu, if ifadenin her zaman bu Ertelenmi┼č nesneyi alaca─č─▒, onu oldu─ču true gibi kabul edece─či ve kullan─▒c─▒ giri┼č yapm─▒┼č gibi devam edece─či anlam─▒na gelir . ─░yi de─čil.

Ancak d├╝zeltme kolayd─▒r:

 checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});
 

Tavsiye edilmiyor: Senkron "Ajax" ├ža─čr─▒lar─▒

Bahsetti─čim gibi, baz─▒ (!) Zaman uyumsuz i┼člemlerin zaman uyumlu muadilleri var. Kullan─▒mlar─▒n─▒ savunmuyorum, ancak b├╝t├╝nl├╝k u─čruna, nas─▒l senkronize bir ├ža─čr─▒ yapaca─č─▒n─▒z:

JQuery olmadan

Do─črudan bir XMLHTTPRequest nesneyi kullan─▒yorsan─▒z, false ├╝├ž├╝nc├╝ bir arg├╝man olarak iletin .open .

jQuery

JQuery kullan─▒yorsan─▒z , async se├žene─či i├žin ayarlayabilirsiniz false . Bu se├ženek unutmay─▒n kald─▒r─▒lm─▒┼č jQuery 1.8 beri. Daha sonra hala bir success geri arama kullanabilir veya jqXHR nesnesinin responseText ├Âzelli─čine eri┼čebilirsiniz :http://api.jquery.com/jQuery.ajax/%23jqXHR#jqXHR

 function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}
 

Ba┼čka jQuery Ajax y├Ântemi gibi kullan─▒rsan─▒z $.get , $.getJSON vb, a┼ča─č─▒da belirtilen yerlere de─či┼čtirmek zorunda $.ajax (sadece yap─▒land─▒rma parametreleri ge├žirebilirsiniz beri $.ajax ).

├ľn├╝ne bak! E┼čzamanl─▒ bir JSONP iste─či yapmak m├╝mk├╝n de─čildir . JSONP, do─čas─▒ gere─či, her zaman asenkrondir (bu se├žene─či d├╝┼č├╝nmemek i├žin bir neden daha).


5417







E─čer ediyorsan─▒z de─čil kodunuzda jQuery kullanarak, bu cevap size g├Âre

Kodunuz, bu sat─▒rlar boyunca bir ┼čey olmal─▒d─▒r:

 function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'
 

Felix Kling, AJAX i├žin jQuery kullanan ki┼čilere cevap yazma konusunda iyi bir i┼č yapt─▒, olmayan insanlara bir alternatif sunmaya karar verdim.

( Yeni fetch API, Angular veya a┼ča─č─▒da ba┼čka bir cevap ekledi─čim s├Âzler kullananlar i├žin ) dikkat edin.


Neyle y├╝zle┼čiyorsun

Bu, di─čer cevab─▒n "Sorunun a├ž─▒klamas─▒" n─▒n k─▒sa bir ├Âzetidir, bunu okuduktan sonra emin de─čilseniz, bunu okuyun.

Bir AJAX a├ž─▒l─▒m─▒ asenkron . Bu, iste─čin g├Ânderilmesi (veya daha do─črusu cevab─▒n al─▒nmas─▒) normal uygulama ak─▒┼č─▒ndan al─▒nd─▒─č─▒ anlam─▒na gelir. ├ľrnekte, .send hemen geri d├Âner ve bir sonraki ifade, geri arama olarak return result; iletti─činiz i┼člev success ├ža─čr─▒lmadan ├Ânce ├žal─▒┼čt─▒r─▒l─▒r .

Bu, geri d├Ând├╝─č├╝n├╝zde, tan─▒mlad─▒─č─▒n─▒z dinleyici hen├╝z ├žal─▒┼čmad─▒, bu da d├Ând├╝rd├╝─č├╝n├╝z de─čerin tan─▒mlanmad─▒─č─▒ anlam─▒na gelir.

─░┼čte basit bir benzetme

 function getFive(){ 
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}
 

(Keman)

a ─░ade edilen de─čer undefined , a=5 par├žan─▒n hen├╝z y├╝r├╝t├╝lmedi─činden beri . AJAX b├Âyle davran─▒r, sunucu taray─▒c─▒n─▒za bu de─čerin ne oldu─čunu s├Âyleme ┼čans─▒n─▒ yakalamadan ├Ânce de─čeri d├Ând├╝r├╝rs├╝n├╝z.

Bu sorunun olas─▒ bir ├ž├Âz├╝m├╝ yeniden etkin olarak kodlamak ve hesaplama tamamland─▒─č─▒nda program─▒n─▒za ne yapaca─č─▒n─▒z─▒ s├Âylemek.

 function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){ 
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}
 

Buna CPS denir . Temel olarak, getFive tamamland─▒─č─▒nda ger├žekle┼čtirecek bir eylemden ge├žiyoruz , kodumuza bir etkinlik tamamland─▒─č─▒nda nas─▒l tepki verece─čimizi s├Âyl├╝yoruz (AJAX ├ža─čr─▒m─▒z gibi veya bu durumda zaman a┼č─▒m─▒ gibi).

Kullan─▒m olurdu:

 getFive(onComplete);
 

Hangi "5" ekrana uyarmal─▒d─▒r. (Keman) .

Olas─▒ ├ž├Âz├╝mler

Bunu ├ž├Âzmenin temelde iki yolu var:

  1. AJAX aramas─▒n─▒ senkronize edin (SJAX olarak adland─▒ral─▒m).
  2. Geri aramalar ile d├╝zg├╝n ├žal─▒┼čmas─▒ i├žin kodunuzu yeniden yap─▒land─▒r─▒n.

1. Senkron AJAX - Yapmay─▒n !!

Senkron AJAX gelince, yapma! Felix'in cevab─▒, neden k├Ât├╝ bir fikir oldu─ču konusunda zorlay─▒c─▒ tart─▒┼čmalara yol a├ž─▒yor. ├ľzetlemek gerekirse, sunucu yan─▒t─▒ d├Ând├╝rene ve ├žok k├Ât├╝ bir kullan─▒c─▒ deneyimi yaratana kadar kullan─▒c─▒n─▒n taray─▒c─▒s─▒n─▒ dondurur. ─░┼čte MDN'den neden al─▒nd─▒─č─▒ hakk─▒nda k─▒sa bir ├Âzet:

XMLHttpRequest, hem senkron hem de asenkron ileti┼čimleri destekler. Ancak, genel olarak, zaman uyumsuz istekler, performans nedenlerinden dolay─▒ senkronize istekler i├žin tercih edilmelidir.

K─▒sacas─▒, senkronize istekler kodun y├╝r├╝t├╝lmesini engeller ... ... bu ciddi sorunlara neden olabilir ...

E─čer varsa sahip bunu yapmak i├žin, bir bayrak ge├žirebilirsiniz: Bu ┼čekilde yap─▒labilir:

 var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}
 

2. Yeniden yap─▒land─▒rma kodu

─░┼čleviniz bir geri aramay─▒ kabul etsin. ├ľrnek kodda foo bir geri aramay─▒ kabul etmek i├žin yap─▒labilir. Biz nas─▒l bizim kod s├Âyl├╝yorum olacak tepki zaman foo tamamlar.

Yani:

 var result = foo();
// code that depends on `result` goes here
 

Oluyor:

 foo(function(result) {
    // code that depends on `result`
});
 

Burada anonim bir i┼člevi ge├žtik, ancak mevcut bir i┼čleve bir referans─▒ kolayca ileterek ┼č├Âyle g├Âr├╝nmesini sa─člad─▒k:

 function myHandler(result) {
    // code that depends on `result`
}
foo(myHandler);
 

Bu t├╝r bir geri arama tasar─▒m─▒n─▒n nas─▒l yap─▒ld─▒─č─▒na dair daha fazla ayr─▒nt─▒ i├žin Felix'in cevab─▒n─▒ kontrol edin.

┼×imdi, foo'nun kendisini buna g├Âre davranmas─▒n─▒ tan─▒mlayal─▒m.

 function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // when the request is loaded
       callback(httpRequest.responseText);// we're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}
 

(keman)

Foo fonksiyonumuzu AJAX ba┼čar─▒yla tamamland─▒─č─▒nda ├žal─▒┼čt─▒r─▒lacak bir eylemi kabul ettirdik, yan─▒t durumunun 200 olup olmad─▒─č─▒n─▒ kontrol ederek ve buna g├Âre hareket ederek bunu daha da uzatabiliriz (bir ba┼čar─▒s─▒z i┼čleyici ve benzeri olu┼čturabiliriz). Sorunumuzu etkin bir ┼čekilde ├ž├Âzme.

Hala bunu anlamakta zorluk ├žekiyorsan─▒z , MDN'deki AJAX ba┼člang─▒├ž ÔÇőÔÇők─▒lavuzunu okuyun .


1034







XMLHttpRequest 2 (her ┼čeyden ├Ânce Benjamin Gruenbaum ve Felix Kling'in cevaplar─▒n─▒ okuyun)

E─čer jQuery kullanm─▒yorsan─▒z ve modern taray─▒c─▒larda ve ayr─▒ca mobil taray─▒c─▒larda ├žal─▒┼čan g├╝zel bir k─▒sa XMLHttpRequest 2 istiyorsan─▒z, bu ┼čekilde kullanman─▒z─▒ ├Âneririm:

 function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}
 

G├Ârd├╝─č├╝n gibi:

  1. Listelenen di─čer t├╝m i┼člevlerden daha k─▒sa.
  2. Geri arama do─črudan ayarlan─▒r (bu y├╝zden fazladan fazladan kapatma gerekmez).
  3. Yeni a┼č─▒r─▒ y├╝k├╝ kullan─▒r (bu nedenle, okuma sistemi durumunu ve durumunu kontrol etmeniz gerekmez)
  4. XMLHttpRequest 1'i sinirlendiren, hat─▒rlamad─▒─č─▒m ba┼čka durumlar da var.

Bu Ajax ├ža─čr─▒s─▒n─▒n yan─▒t─▒n─▒ alman─▒n iki yolu vard─▒r (├╝├ž├╝ XMLHttpRequest var ad─▒n─▒ kullanarak):

En basit:

 this.response
 

Veya bir nedenden dolay─▒ bind() bir s─▒n─▒fa geri arama yapman─▒z durumunda:

 e.target.response
 

├ľrnek:

 function callback(e){
  console.log(this.response);
}
ajax('URL', callback);
 

Veya (yukar─▒dakilerden daha iyisi anonim i┼člevler her zaman bir problemdir):

 ajax('URL', function(e){console.log(this.response)});
 

Daha kolay de─čil.

┼×imdi baz─▒ insanlar muhtemelen onreadystatechange'i veya hatta XMLHttpRequest de─či┼čken ad─▒n─▒ kullanman─▒n daha iyi olaca─č─▒n─▒ s├Âyleyecekler. Bu yanl─▒┼č.

XMLHttpRequest geli┼čmi┼č ├Âzelliklerine g├Âz at─▒nhttp://caniuse.com/xhr2

T├╝m * modern taray─▒c─▒lar─▒ destekledi. XMLHttpRequest 2 var oldu─čundan beri bu yakla┼č─▒m─▒ kulland─▒─č─▒m─▒ do─črulayabilirim. Kulland─▒─č─▒m t├╝m taray─▒c─▒larda hi├žbir zaman sorun ya┼čamad─▒m.

onreadystatechange yaln─▒zca ba┼čl─▒klar─▒ 2 durumuna almak istiyorsan─▒z kullan─▒┼čl─▒d─▒r.

XMLHttpRequest De─či┼čken ad─▒n─▒ kullanmak, onu kaybetti─činiz ba┼čka bir b├╝y├╝k hatad─▒r, aksi halde onu kaybetti─činiz ba┼čka bir b├╝y├╝k hatad─▒r.


┼×imdi post ve FormData kullanarak daha karma┼č─▒k bir ┼čey istiyorsan─▒z, bu i┼člevi kolayca geni┼čletebilirsiniz:

 function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}
 

Yine ... ├žok k─▒sa bir i┼člev, ama alma ve g├Ânderme.

Kullan─▒m ├Ârnekleri:

 x(url, callback); // By default it's get so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set post data
 

Veya tam bir form eleman─▒ ( document.getElementsByTagName('form')[0] ) iletin :

 var fd = new FormData(form);
x(url, callback, 'post', fd);
 

Veya baz─▒ ├Âzel de─čerler ayarlay─▒n:

 var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);
 

G├Ârd├╝─č├╝n├╝z gibi senkronizasyon yapmad─▒m ... bu k├Ât├╝ bir ┼čey.

Bunu s├Âyledikten sonra ... neden kolay yoldan yapm─▒yorsun?


Yorumda da belirtildi─či gibi, && senkronize hata kullan─▒m─▒ tamamen cevab─▒ i┼čaret ediyor. Ajax'─▒ uygun ┼čekilde kullanmak i├žin g├╝zel bir k─▒sa yol hangisidir?

Hata i┼čleyicisi

 function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);
 

Yukar─▒daki komut dosyas─▒nda, statik olarak tan─▒mlanm─▒┼č bir hata i┼čleyiciniz vard─▒r, b├Âylece i┼člevden ├Âd├╝n vermez. Hata i┼čleyicisi di─čer i┼člevler i├žin de kullan─▒labilir.

Ancak ger├žekten bir hatay─▒ gidermek i├žin tek yol yanl─▒┼č bir URL yazmakt─▒r; bu durumda her taray─▒c─▒ bir hata atar.

Hata i┼čleyicileri, e─čer ├Âzel ba┼čl─▒klar belirlerseniz, responseType'─▒ bir dizi arabellek ya da her neyse blob ...

'POSTAPAPAP' ├Â─česini y├Ântem olarak ge├žseniz bile, hata atmaz.

'Fdggdgilfdghfldj' formdata olarak ge├žseniz bile, hata atmaz.

─░lk durumda hata, displayAjax() alt─▒nda this.statusText oldu─ču gibidir Method not Allowed .

─░kinci durumda, sadece ├žal─▒┼č─▒r. Do─čru g├Ânderi verilerinden ge├žip ge├žmedi─činizi sunucu taraf─▒nda kontrol etmeniz gerekir.

etki alanlar─▒ aras─▒ izin verilmiyor, otomatik olarak hata veriyor.

Hata yan─▒t─▒nda hata kodu yoktur.

Sadece bir this.type tanesi hataya ayarlanm─▒┼č.

Hatalar ├╝zerinde tamamen kontrol├╝n├╝z yoksa neden bir hata i┼čleyicisi ekleyin? Geri arama i┼člevinde hatalar─▒n ├žo─ču bunun i├žinde d├Ând├╝r├╝l├╝r displayAjax() .

Yani: URL'yi d├╝zg├╝n bir ┼čekilde kopyalay─▒p yap─▒┼čt─▒rabiliyorsan─▒z hata kontrollerine gerek yok. ;)

Not: ─░lk test olarak x ('x', displayAjax) yazd─▒m ... ve tamamen bir yan─▒t ald─▒ ... ??? B├Âylece HTML'nin bulundu─ču klas├Âr├╝ kontrol ettim ve 'x.xml' ad─▒nda bir dosya vard─▒. Bu nedenle, dosyan─▒z─▒n uzant─▒s─▒n─▒ unutsan─▒z bile XMLHttpRequest 2 WILL FIND IT . Ben yedim


Bir dosyay─▒ senkronize oku

Yapma bunu.

Bir s├╝re taray─▒c─▒y─▒ engellemek istiyorsan─▒z .txt senkronize g├╝zel bir b├╝y├╝k dosya y├╝kleyin .

 function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}
 

┼×imdi yapabilirsin

  var res = omg('thisIsGonnaBlockThePage.txt');
 

Bunu asenkronize olmayan bir ┼čekilde yapman─▒n ba┼čka bir yolu yoktur. (Evet, setTimeout d├Âng├╝s├╝yle ... ama cidden?)

Ba┼čka bir nokta ┼čudur: API'larla veya yaln─▒zca kendi listenizin dosyalar─▒yla ├žal─▒┼č─▒yorsan─▒z veya her istek i├žin farkl─▒ i┼člevler kullan─▒yorsan─▒z ...

Yaln─▒zca her zaman ayn─▒ XML / JSON'u y├╝kledi─činiz bir sayfan─▒z veya yaln─▒zca bir i┼čleve ihtiyac─▒n─▒z olan bir sayfa varsa. Bu durumda, biraz Ajax i┼člevini de─či┼čtirin ve b'yi ├Âzel i┼člevinizle de─či┼čtirin.


Yukar─▒daki i┼člevler temel kullan─▒m i├žindir.

Fonksiyonu geni┼čletmek istiyorsan─▒z ...

Evet yapabilirsin.

├çok fazla API kullan─▒yorum ve her HTML sayfas─▒na entegre etti─čim ilk i┼člevlerden biri bu cevab─▒n ilk Ajax i┼člevi, yaln─▒zca GET ile ...

Ancak XMLHttpRequest 2 ile bir├žok ┼čey yapabilirsiniz:

Bir indirme y├Âneticisi yapt─▒m (her iki tarafta da ├Âzge├žmi┼č, filereader, dosya sistemi ile aral─▒klar─▒ kullanarak), tuval kullanarak ├že┼čitli g├Âr├╝nt├╝ d├╝zenleyicileri d├Ân├╝┼čt├╝rd├╝m, base64images i├žeren web SQL veritabanlar─▒n─▒ doldurdum ve ├žok daha fazlas─▒ ... Ancak bu durumlarda sadece bunun i├žin bir i┼člev olu┼čturmal─▒s─▒n─▒z Ama├ž ... Bazen bir blob, dizi tamponlar─▒ gerekir, ba┼čl─▒klar─▒ ayarlayabilir, mime tipini ge├žersiz k─▒labilir ve ├žok daha fazlas─▒ ...

Fakat buradaki soru, bir Ajax yan─▒t─▒n─▒ nas─▒l iade edece─čimiz ... (Kolay bir yol ekledim.)


380







E─čer s├Âz kullan─▒yorsan─▒z, bu cevap tam size g├Âre.

Bu, AngularJS, jQuery (ertelenmi┼č), yerel XHR'nin de─či┼čtirilmesi (getirme), EmberJS, BackboneJS'in kaydetmesi veya s├Âz veren herhangi bir d├╝─č├╝m k├╝t├╝phanesi anlam─▒na gelir.

Kodunuz, bu sat─▒rlar boyunca bir ┼čey olmal─▒d─▒r:

 function foo() {
    var data;
    // or $.get(...).then, or request(...).then, or query(...).then
    fetch("/echo/json").then(function(response){
        data = response.json();
    });
    return data;
}

var result = foo(); // result is always undefined no matter what.
 

Felix Kling, jQuery kullanan ki┼čilere AJAX'in geri ├ža─čr─▒lar─▒yla cevap yazmak i├žin iyi bir i┼č yapt─▒. Yerel XHR i├žin bir cevab─▒m var. Bu cevap s├Âzlerin ya ├Ân u├žta ya da arka u├žta genel kullan─▒m─▒ i├žindir.


Çekirdek sorunu

Taray─▒c─▒da ve NodeJS / io.js ile sunucudaki JavaScript e┼čzamanl─▒l─▒k modeli, zaman uyumsuz ve reaktif .

Ne zaman s├Âz veren bir y├Ântem ├ža─č─▒r─▒rsan─▒z, then i┼čleyiciler her zaman e┼čzamans─▒z olarak y├╝r├╝t├╝l├╝r - bu, altlar─▒ndaki kodun ard─▒ndan .then i┼čleyicide bulunmaz .

Bu ara├žlar size iade ederken hen├╝z y├╝r├╝t├╝lmedi─či tan─▒mlad─▒─č─▒n─▒z i┼čleyicisi. Bu da, d├Ând├╝rd├╝─č├╝n├╝z de─čerin zaman i├žinde do─čru de─čere ayarlanmad─▒─č─▒ anlam─▒na gelir. data then

─░┼čte sorun i├žin basit bir benzetme:

     function getFive(){
        var data;
        setTimeout(function(){ // set a timer for one second in the future
           data = 5; // after a second, do this
        }, 1000);
        return data;
    }
    document.body.innerHTML = getFive(); // `undefined` here and not 5 

De─čeri data olan undefined beri data = 5 par├žas─▒ hen├╝z infaz edilmemi┼čtir. Muhtemelen bir saniyede ger├žekle┼čecek, fakat o zamana kadar iade edilen de─čer ile ilgisi yok.

─░┼člem hen├╝z ger├žekle┼čmedi─činden (AJAX, sunucu ├ža─čr─▒s─▒, IO, zamanlay─▒c─▒), istek geri d├Ând├╝─č├╝nde de─čeri geri d├Ând├╝r├╝yorsunuz, kodunuza bu de─čerin ne oldu─čunu s├Âyleme ┼čans─▒n─▒z var.

Bu sorunun olas─▒ bir ├ž├Âz├╝m├╝ yeniden etkin olarak kodlamak ve hesaplama tamamland─▒─č─▒nda program─▒n─▒za ne yapaca─č─▒n─▒z─▒ s├Âylemek. S├Âzler, do─čada ge├žici (zamana duyarl─▒) olarak bunu aktif olarak m├╝mk├╝n k─▒lar.

S├Âzlerde h─▒zl─▒ ├Âzetleme

Bir S├Âz, zaman i├žindeki bir de─čerdir . Vaatlerde devlet var, hi├žbir de─čeri olmadan beklemeye ba┼čl─▒yorlar ve buna raz─▒ olabiliyorlar:

  • yerine hesaplama ba┼čar─▒yla tamamland─▒ anlam─▒na gelir.
  • Hesaplaman─▒n ba┼čar─▒s─▒z oldu─ču anlam─▒na gelen reddedildi .

Bir s├Âz, ancak bir kez durumlar─▒ de─či┼čtirebilir ; bundan sonra daima ayn─▒ durumda kal─▒r. then De─čerlerini almak ve hatalar─▒ ele almak i├žin s├Âzler ekleyebilirsiniz . then i┼čleyiciler ├ža─čr─▒lar─▒n zincirlenmesini sa─člar . S├Âzler, geri d├Ânen API'ler kullan─▒larak olu┼čturulur . ├ľrne─čin, daha modern AJAX de─či┼čimi fetch veya jQuery'nin $.get geri d├Ân├╝┼č├╝ vaat ediyor.

Bir .then s├Âz verdi─čimizde ve ondan bir ┼čey iade etti─čimizde - i┼členen de─čer i├žin bir s├Âz al─▒r─▒z . Ba┼čka bir s├Âz verirsek harika ┼čeyler elde ederiz, ama atlar─▒m─▒z─▒ tutal─▒m.

S├Âzlerle

Yukar─▒daki konuyu vaatlerle nas─▒l ├ž├Âzebilece─čimizi g├Ârelim. ├ľncelikle, bir gecikme i┼člevi olu┼čturmak i├žin Promise yap─▒c─▒s─▒n─▒ kullanarak yukar─▒dan vaat eden devletler hakk─▒ndaki anlay─▒┼č─▒m─▒z─▒ g├Âsterelim :

 function delay(ms){ // takes amount of milliseconds
    // returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // when the time is up
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}
 

┼×imdi setTimeout'u vaatleri kullanmak then ├╝zere d├Ân├╝┼čt├╝rd├╝kten sonra, saymak i├žin kullanabiliriz :

 function delay(ms){ // takes amount of milliseconds
  // returns a new promise
  return new Promise(function(resolve, reject){
    setTimeout(function(){ // when the time is up
      resolve(); // change the promise to the fulfilled state
    }, ms);
  });
}

function getFive(){
  // we're RETURNING the promise, remember, a promise is a wrapper over our value
  return delay(100).then(function(){ // when the promise is ready
      return 5; // return the value 5, promises are all about return values
  })
}
// we _have_ to wrap it like this in the call site, we can't access the plain value
getFive().then(function(five){ 
   document.body.innerHTML = five;
}); 

Temel olarak, bir d├Ânen yerine de─čerini biz ├ž├╝nk├╝ e┼čzamanl─▒l─▒k modeli yapamaz - bir geri d├Ân├╝yoruz sarmalay─▒c─▒ biz ki bir de─čeri paketini ile then . A├žabilece─čin bir kutu gibi then .

Bunu uygulamak

Bu, orijinal API ├ža─čr─▒n─▒z i├žin ayn─▒ kal─▒r:

 function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // process it inside the `then`
    });
}

foo().then(function(response){
    // access the value inside the `then`
})
 

Yani bu ayn─▒ ┼čekilde ├žal─▒┼č─▒r. Zaten e┼čzamans─▒z ├ža─čr─▒lardan de─čer d├Ând├╝remedi─čimizi ├Â─črendik, ancak s├Âzleri kullanabilir ve bunlar─▒ i┼čleme koymak i├žin zincirleyebiliriz. ┼×imdi, zaman uyumsuz bir ├ža─čr─▒dan yan─▒t─▒n nas─▒l d├Ând├╝r├╝lece─čini biliyoruz.

ES2015 (ES6)

ES6 , ortada d├Ânebilen ve sonra bulunduklar─▒ noktaya devam edebilen fonksiyonlar olan jenerat├Ârleri tan─▒t─▒r . Bu genellikle diziler i├žin kullan─▒┼čl─▒d─▒r, ├Ârne─čin:

 function* foo(){ // notice the star, this is ES6 so new browsers/node/io only
    yield 1;
    yield 2;
    while(true) yield 3;
}
 

Bir yineleyiciyi 1,2,3,3,3,3,.... yinelenebilen dizinin ├╝zerine d├Ând├╝ren bir i┼člevdir . Bu kendi ba┼č─▒na ilgin├ž olsa da ve bir ├žok olas─▒l─▒k i├žin oday─▒ a├ž─▒yorsa, belli bir ilgin├ž vaka var.

├ťretti─čimiz dizi, say─▒lar yerine bir eylemler dizisiyse - bir eylem ger├žekle┼čtirildi─činde i┼člevi duraklatabilir ve i┼člevi s├╝rd├╝rmeden ├Ânce onu bekleyebiliriz. Dolay─▒s─▒yla, bir say─▒ dizisi yerine gelecekteki de─čerler dizisine ihtiyac─▒m─▒z var - yani: s├Âzler.

Bu biraz zor ama ├žok g├╝├žl├╝ bir numara, senkronize olmayan bir ┼čekilde asenkron kod yazmam─▒za izin veriyor. Bunu sizin i├žin yapan birka├ž "ko┼čucu" var, birini yazmak k─▒sa bir kod sat─▒r─▒ ama bu cevab─▒n kapsam─▒ d─▒┼č─▒nda. Promise.coroutine Burada Bluebird's'i kullanaca─č─▒m , ama co ya da gibi ba┼čka paketleyiciler var Q.async .

 var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // notice the yield
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
});
 

Bu y├Ântem, di─čer coroutinler'den alabilece─čimiz bir s├Âz veriyor. ├ľrne─čin:

 var main = coroutine(function*(){
   var bar = yield foo(); // wait our earlier coroutine, it returns a promise
   // server call done here, code below executes when done
   var baz = yield fetch("/api/users/"+bar.userid); // depends on foo's result
   console.log(baz); // runs after both requests done
});
main();
 

ES2016 (ES7)

ES7'de, bu daha da standardize edilmi┼čtir, ┼ču anda birka├ž teklif var ancak hepsinde await s├Âz verebilirsiniz . Bu sadece yukar─▒daki ES6 teklifi i├žin async ve await anahtar kelimeleri ekleyerek "┼čeker" (daha iyi s├Âzdizimi) 'dir . Yukar─▒daki ├Ârne─či yapmak:

 async function foo(){
    var data = await fetch("/echo/json"); // notice the await
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
}
 

Hala ayn─▒ s├Âz verir :)


304







Ajax'─▒ yanl─▒┼č kullan─▒yorsunuz. Buradaki fikir, herhangi bir ┼čey d├Ând├╝rmesini de─čil, verileri verileri i┼čleyen bir geri ├ža─č─▒rma i┼člevi ad─▒ verilen bir ├Â─čeye teslim etmektir.

Yani:

 function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});
 

G├Ânderim i┼čleyicisinde herhangi bir ┼čey d├Ând├╝rmek hi├žbir ┼čey yapmaz. Bunun yerine verileri vermelisiniz ya da istedi─činizi do─črudan ba┼čar─▒ fonksiyonunun i├žinde yapmal─▒s─▒n─▒z.


238


2014-05-23





En basit ├ž├Âz├╝m bir JavaScript i┼člevi olu┼čturmak ve onu Ajax success geri ├ža─č─▒rma i├žin ├ža─č─▒rmakt─▒r .

 function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);    
}); 
 

225







Korkun├ž g├Âr├╝n├╝ml├╝, elle ├žizilmi┼č bir ├žizgi romanla cevap verece─čim. ─░kinci resim nedeni budur result oldu─čunu undefined sizin kod ├Ârne─činde.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin


208







Angular1

AngularJS kullananlar i├žin bu durumu kullanarak halledebilirsiniz Promises .

─░┼čte diyor ki

S├Âzler e┼čzamanl─▒ olmayan e┼čzamans─▒z i┼člevlerde kullan─▒labilir ve birinin birden ├žok i┼člevi birlikte zincirlemesine izin verir.

Burada ayr─▒ca g├╝zel bir a├ž─▒klama bulabilirsiniz .

A┼ča─č─▒da belirtilen belgelerde bulunan ├Ârnek .

   promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      //Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved 
 // and its value will be the result of promiseA incremented by 1.
 

A├ž─▒sal2 ve Sonra

In Angular2 a┼ča─č─▒daki ├Ârnekte bakmak, ama onun ile ├Ânerilen kullan─▒m─▒na Observables sahip Angular2 .

  search(term: string) {
     return this.http
  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
  .map((response) => response.json())
  .toPromise();
 

}

Bunu bu ┼čekilde t├╝ketebilirsiniz,

 search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}
 

Orijinal yay─▒n─▒ burada g├Âr├╝n . Ancak Typescript yerel es6'yi desteklemiyor Promises , kullanmak istiyorsan─▒z, bunun i├žin bir eklentiye ihtiyac─▒n─▒z olabilir.

Ek olarak, burada tan─▒mlanm─▒┼č olan s├Âzler spec .


151







Buradaki yan─▒tlar─▒n ├žo─ču, tek bir zaman uyumsuz i┼čleminiz oldu─čunda faydal─▒ ├Ânerilerde bulunur, ancak bazen bu , bir dizideki veya di─čer liste benzeri yap─▒daki her giri┼č i├žin zaman uyumsuz bir i┼člem yapman─▒z gerekti─činde ortaya ├ž─▒kar . Temptation bunu yapmakt─▒r:

 // WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.
 

├ľrnek:

 // WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

─░┼če yaramazl─▒─č─▒n nedeni doSomethingAsync , sonu├žlar─▒ kullanmaya ├žal─▒┼čt─▒─č─▒n─▒z zaman gelen geri aramalar─▒n hen├╝z ba┼člat─▒lmad─▒─č─▒d─▒r.

Bu nedenle, bir diziniz varsa (veya bir t├╝r listeniz varsa) ve her giri┼č i├žin e┼čzamans─▒z i┼člemler yapmak istiyorsan─▒z, iki se├žene─činiz vard─▒r: ─░┼člemleri paralel (├╝st ├╝ste binen) veya seri olarak (s─▒rayla arka arkaya) yap─▒n.

Paralel

Hepsini ba┼člatabilir ve ka├ž tane geri arama bekledi─činizi takip edebilir ve ard─▒ndan o kadar geri arama ald─▒─č─▒n─▒zda sonu├žlar─▒ kullanabilirsiniz:

 var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});
 

├ľrnek:

 var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

(Yapabiliriz expecting ve sadece kullanabilirdik results.length === theArray.length , ama bu bizi theArray ├ža─čr─▒lar s─▒ra d─▒┼č─▒yken de─či┼čtirilme ihtimaline a├ž─▒k b─▒rak─▒r ...)

Sonu├žlar─▒ s─▒ral─▒ olmasa bile (sonu├žlar─▒ zaman uyumsuz ├ža─čr─▒lar ba┼člat─▒ld─▒klar─▒ s─▒rayla tamamlamad─▒klar─▒ndan), ilgili girdiyle ayn─▒ konumda kaydetmek i├žin index ' forEach yi nas─▒l kulland─▒─č─▒m─▒za dikkat edin results .

Peki ya bu sonu├žlar─▒ bir fonksiyondan d├Ând├╝rmeniz gerekirse ? Di─čer cevaplar─▒n i┼čaret etti─či gibi; fonksiyonunuzun bir geri aramay─▒ kabul etmesi ve ├ža─č─▒rmas─▒ (veya bir S├Âz├╝ geri vermeniz ) gerekir. ─░┼čte bir geri arama s├╝r├╝m├╝:

 function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});
 

├ľrnek:

 function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

Veya Promise bunun yerine d├Ânen bir s├╝r├╝m├╝ :

 function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});
 

Elbette, e─čer doSomethingAsync bize hatalar ge├žerse, reject bir hata oldu─čunda s├Âz vermeyi reddetmek i├žin kullan─▒r─▒z.)

├ľrnek:

 function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

(Ya da d├Ân├╝┼č├╝ml├╝ olarak, bunun kar┼č─▒l─▒─č─▒nda doSomethingAsync bir s├Âz verebilir, bir s├Âz verebilir ve sonra a┼ča─č─▒dakileri yapabilirsiniz ...)

E─čer doSomethingAsync size verir Promise , ┼čunlar─▒ kullanabilirsiniz Promise.all :

 function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry);
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});
 

doSomethingAsync Bunun ikinci ve ├╝├ž├╝nc├╝ bir arg├╝man─▒ g├Ârmezden gelece─čini biliyorsan─▒z, do─črudan do─črudan ┼čuna iletebilirsiniz map ( map geri ├ža─čr─▒s─▒n─▒ ├╝├ž arg├╝manla ├ža─č─▒r─▒r, ancak ├žo─ču ki┼či yaln─▒zca ilkini kullan─▒r):

 function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});
 

├ľrnek:

 function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

Not Promise.all s├Âz├╝n├╝ hepsi ├ž├Âz├╝ld├╝kten sonra bunu vermek s├Âzlerin hepsi sonu├žlar─▒n─▒n bir dizi s├Âz├╝n├╝ giderir veya reddeder zaman ilk bunu reddeder vermek s├Âzlerin.

Dizi

─░┼člemlerin paralel olmas─▒n─▒ istemedi─činizi varsayal─▒m. Birbiri ard─▒na ├žal─▒┼čt─▒rmak istiyorsan─▒z, bir sonraki i┼čleme ba┼člamadan ├Ânce her bir i┼člemin tamamlanmas─▒n─▒ beklemeniz gerekir. ─░┼čte bunu yapan ve sonu├žla geri arama yapan bir fonksiyonun ├Ârne─či:

 function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});
 

(├çal─▒┼čmay─▒ seri olarak yapt─▒─č─▒m─▒zdan, results.push(result) s─▒ral─▒ sonu├žlar─▒ alamayaca─č─▒m─▒z─▒ bildi─čimiz i├žin kullanabiliriz . Yukar─▒dakilerde kullanabilirdik results[index] = result; , ancak a┼ča─č─▒daki ├Ârneklerin baz─▒lar─▒nda bir dizine sahip de─čiliz) kullanmak.)

├ľrnek:

 function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

(Veya, yine, bunun i├žin bir sar─▒c─▒ olu┼čturun doSomethingAsync , size bir s├Âz verin ve a┼ča─č─▒dakileri yap─▒n ...)

E─čer doSomethingAsync size S├Âz├╝ verir size (belki gibi bir transpiler ile ES2017 + s├Âzdizimini kullanabilirsiniz e─čer, Babil ), bir kullanabilir async fonksiyonu ile for-of ve await :

 async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});
 

├ľrnek:

 async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

ES2017 + s├Âzdizimini (hen├╝z) kullanam─▒yorsan─▒z, "S├Âz azaltma" modelinde bir varyasyon kullanabilirsiniz (bu, s├Âz verilen s├Âz azaltma y├Ânteminden daha karma┼č─▒kt─▒r; ├ž├╝nk├╝ sonucu bir ba┼čkas─▒na aktarm─▒yoruz , bunun yerine sonu├žlar─▒n─▒ bir dizide toplamak):

 function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});
 

├ľrnek:

 function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 

... ES2015 + ok i┼člevleriyle daha az hantal olan :

 function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});
 

├ľrnek:

 function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
} 
 .as-console-wrapper {
  max-height: 100% !important;
} 


140







┼×u ├Ârne─če bir g├Âz at─▒n:

 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});
 

G├Ârd├╝─č├╝n├╝z gibi getJoke olan bir d├Ânen ├ž├Âz├╝lmesi s├Âz (d├Ând├╝r├╝rken ├ž├Âz├╝lene res.data.value ). B├Âylece $ http.get iste─či tamamlan─▒ncaya kadar bekleyin ve sonra konsol.log (res.joke) y├╝r├╝t├╝l├╝r (normal bir asenkron ak─▒┼č olarak).

Bu plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

ES6 yolu (zaman uyumsuz - bekliyor)

 (function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();
 

104







Bu, bir├žok yeni JavaScript ├žer├ževesinde kullan─▒lan veri ba─člama ya da saklama konseptinin iki yolun sizin i├žin harika ├žal─▒┼čaca─č─▒ yerlerden biri ...

Yani kullan─▒yorsan─▒z a├ž─▒sal, Tepki veya yapmak ba┼čka ├žer├ževeler iki yolu veri ba─člama veya ma─čaza konsepti ├žok kolay kelimeyle bu sorun sadece sizin i├žin sabittir, sizin sonucudur undefined sahipsin, b├Âylece ilk a┼čamada result = undefined ald─▒─č─▒n─▒z ├Ânce veriyi ve sonucu al─▒r almaz, g├╝ncellenecek ve Ajax ├ža─čr─▒n─▒z─▒n cevab─▒n─▒ veren yeni de─čere atanacakt─▒r ...

Ancak , ├Ârne─čin bu soruda sordu─čunuz gibi saf javascript veya jQuery ile nas─▒l yapabilirsiniz ?

├ľrne─čin, sizin i├žin i┼člemek i├žin bir geri arama , s├Âz ve son zamanlarda g├Âzlemlenebilir olan bir geri arama kullanabilirsiniz ; ├Ârne─čin , verileriniz sizin i├žin haz─▒r oldu─čunda , g├Âzlemlenebilir olarak geri ├ža─č─▒rma veya abone i┼člevi gibi baz─▒ i┼člevlere sahip oldu─čumuz success() veya then() ger├žekle┼čtirece─čimiz s├Âzlerde .

├ľrne─čin , jQuery kullan─▒yorsan─▒z , bunun gibi bir ┼čey yapabilirsiniz:

 $(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});
 

Bu async i┼člemlerini ger├žekle┼čtirmenin daha yeni yollar─▒ olan vaatler ve g├Âzlemlenebilirler hakk─▒nda daha fazla bilgi ├žal─▒┼čmas─▒ i├žin.


96







E┼čzamans─▒z bir i┼člevden de─čer d├Ând├╝rmek i├žin ba┼čka bir yakla┼č─▒m, e┼čzamans─▒z i┼člevden sonucu depolayacak bir nesneye ge├žmektir.

─░┼čte ayn─▒ bir ├Ârnek:

 var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});
 

result E┼čzamans─▒z i┼člem s─▒ras─▒nda de─čeri depolamak i├žin nesneyi kullan─▒yorum . Bu, sonucun zamanuyumsuz i┼čten sonra bile kullan─▒labilir olmas─▒n─▒ sa─člar.

Bu yakla┼č─▒m─▒ ├žok kullan─▒r─▒m. Sonucun ard─▒┼č─▒k mod├╝ller arac─▒l─▒─č─▒yla kablolanmas─▒n─▒n s├Âz konusu oldu─ču yerlerde bu yakla┼č─▒m─▒n ne kadar iyi ├žal─▒┼čt─▒─č─▒n─▒ bilmek isterdim.


92







S├Âzler ve geri aramalar bir├žok durumda iyi ├žal─▒┼č─▒yor olsa da, arkada ┼č├Âyle bir ┼čey ifade etmek ac─▒ vericidir:

 if (!name) {
  name = async1();
}
async2(name);
 

Sonunda i├žinden ge├žeceksin async1 ; name tan─▒ms─▒z olup olmad─▒─č─▒n─▒ kontrol edin ve uygun ┼čekilde geri arama ├ža─č─▒r─▒n.

 async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)
 

K├╝├ž├╝k ├Ârneklerde sorun yok olsa da, pek ├žok benzer durumunuz ve hata i┼člemeniz oldu─čunda sinir bozucu olur.

Fibers sorunun ├ž├Âz├╝m├╝nde yard─▒mc─▒ olur.

 var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}
 

Projeyi buradan kontrol edebilirsiniz .


83







K─▒sa cevap, ┼č├Âyle bir geri arama yapman─▒z gerekiyor:

 function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});
 

78







Yazd─▒─č─▒m a┼ča─č─▒daki ├Ârnek nas─▒l yap─▒laca─č─▒n─▒ g├Âsteriyor

  • E┼čzamans─▒z HTTP ├ža─čr─▒lar─▒n─▒ y├Ânetin;
  • Her bir API ├ža─čr─▒s─▒ndan yan─▒t bekleyin;
  • Promise kal─▒b─▒ kullan─▒n ;
  • Birden fazla HTTP ├ža─čr─▒s─▒na kat─▒lmak i├žin Promise.all desenini kullan─▒n ;

Bu ├žal─▒┼čma ├Ârne─či kendi kendine yetendir. XMLHttpRequest Arama yapmak i├žin pencere nesnesini kullanan basit bir istek nesnesini tan─▒mlayacakt─▒r . Bir s├╝r├╝ s├Âz├╝n tamamlanmas─▒n─▒ beklemek i├žin basit bir i┼člev tan─▒mlayacakt─▒r.

Ba─člam. ├ľrnek, belirli bir sorgu dizesi k├╝mesi i├žin nesneleri aramak i├žin Spotify Web API u├ž noktas─▒n─▒ playlist sorguluyor:

 [
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]
 

Her bir ├Â─če i├žin yeni bir S├Âz, bir blo─ču ate┼čler - ExecutionBlock sonucu ayr─▒┼čt─▒r─▒r, sonu├ž dizisini temel alan, Spotify user nesnelerinin bir listesi olan ve yeni HTTP ├ža─čr─▒s─▒n─▒ ExecutionProfileBlock e┼čzamans─▒z olarak y├╝r├╝ten bir dizi sonu├ž zamanlar .

Daha sonra, birden ├žok ve tamamen e┼čzamans─▒z i├ž i├že HTTP ├ža─čr─▒lar─▒ olu┼čturman─▒za olanak sa─člayan i├ž i├že ge├žmi┼č bir Promise yap─▒s─▒n─▒ g├Ârebilir ve sonu├žlar─▒ her ├ža─čr─▒ alt grubundan birle┼čtirebilirsiniz Promise.all .

NOT Son Spotify search API'leri, istek ba┼čl─▒klar─▒nda belirtilecek bir eri┼čim belirteci gerektirecektir:

 -H "Authorization: Bearer {your access token}" 
 

Bu nedenle, a┼ča─č─▒daki ├Ârne─či ├žal─▒┼čt─▒rman─▒z i├žin eri┼čim belirtecinizi istek ba┼čl─▒klar─▒na koyman─▒z gerekir:

 var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  }); 
 <div id="console" /> 

Bu ├ž├Âz├╝m├╝ burada ├žok tart─▒┼čm─▒┼čt─▒m .


77







2017 cevab─▒: ┼čimdi her mevcut taray─▒c─▒da ve d├╝─č├╝mde tam olarak ne istersen yapabilirsin

Bu olduk├ža basit:

  • Bir s├Âz ver
  • Kullan─▒n 'bekliyoruz' s├Âz├╝n├╝ beklemek ├╝zere JavaScript s├Âyleyecektir (HTTP yan─▒t─▒ gibi) bir de─čere i├žine ├ž├Âz├╝lecek
  • 'Async' anahtar s├Âzc├╝─č├╝n├╝ ana i┼člevine ekleyin

─░┼čte kodunuzun ├žal─▒┼čan bir s├╝r├╝m├╝:

 (async function(){

var response = await superagent.get('...')
console.log(response)

})()
 

Bekleyen t├╝m ge├žerli taray─▒c─▒larda ve d├╝─č├╝m 8'de desteklenir


73







Uzaktan arama yapmak i├žin bu ├Âzel k├╝t├╝phaneyi (Promise kullan─▒larak yaz─▒lm─▒┼č) kullanabilirsiniz.

 function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}
 

Basit kullan─▒m ├Ârne─či:

 $http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});
 

65







JavaScript'in gizemleri ile m├╝cadele ederken kar┼č─▒la┼čt─▒─č─▒m─▒z ├žok yayg─▒n bir konudur. Bug├╝n bu gizemi a├ž─▒─ča ├ž─▒karmay─▒ deneyeyim.

Basit bir JavaScript i┼člevi ile ba┼člayal─▒m:

 function foo(){
// do something 
 return 'wohoo';
}

let bar = foo(); // bar is 'wohoo' here
 

Bu basit bir senkronize fonksiyon ├ža─čr─▒s─▒ (her kod sat─▒r─▒n─▒n bir sonraki s─▒rada olandan ├Ânce 'i┼či ile bitti─či') ve sonu├ž beklendi─či gibi ayn─▒.

┼×imdi, fonksiyonumuza k├╝├ž├╝k bir gecikme ekleyerek biraz kod ekleyelim, b├Âylece t├╝m kod sat─▒rlar─▒ s─▒rayla 'bitmedi'. B├Âylece, asenkron i┼člevin davran─▒┼č─▒n─▒ taklit eder:

 function foo(){
 setTimeout( ()=>{
   return 'wohoo';
  }, 1000 )
}

let bar = foo() // bar is undefined here
 

├ľyleyse i┼čte, bu gecikme bekledi─čimiz i┼člevselli─či bozdu! Ama tam olarak ne oldu? Eh, koda bakarsan─▒z olduk├ža mant─▒kl─▒. i┼člev foo() y├╝r├╝tme sonras─▒nda hi├žbir ┼čey d├Ând├╝rmez (bu nedenle d├Ând├╝r├╝len de─čer ┼čudur undefined ), ancak 1 saniye sonra 'wohoo' i┼člevini d├Ând├╝rmek i├žin bir i┼člev y├╝r├╝ten bir zamanlay─▒c─▒ ba┼člat─▒r. Ama g├Ârd├╝─č├╝n├╝z gibi, ├žubu─ča atanan de─čer, daha sonra gelen ba┼čka bir ┼čey de─čil, foo () 'dan derhal geri g├Ânderilen ┼čeylerdir.

Peki bu konuyla nas─▒l ba┼ča ├ž─▒kaca─č─▒z?

Fonksiyonumuzu bir PROMISE i├žin soral─▒m . S├Âz vermek ger├žekten ne anlama geldi─čidir: bu, i┼člevin gelecekte elde edece─či herhangi bir ├ž─▒kt─▒y─▒ sa─člaman─▒z─▒ garanti etti─či anlam─▒na gelir. ├Âyleyse, yukar─▒daki k├╝├ž├╝k sorunumuz i├žin eylemde g├Ârelim:

 function foo(){
   return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){ 
      // promise is RESOLVED , when execution reaches this line of code
       resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar ; 
foo().then( res => {
 bar = res;
 console.log(bar) // will print 'wohoo'
});
 

Bu nedenle, ├Âzet - ajax tabanl─▒ ├ža─čr─▒lar vb. Gibi asenkron i┼člevlerin ├╝stesinden gelmek i├žin resolve , de─čere (geri d├Ânmek istedi─činiz) s├Âz verebilirsiniz . Bu nedenle k─▒saca size ├ž├Âzmek yerine de─čerini d├Ânen asenkron fonksiyonlarda.

G├ťNCELLEME (Async / bekliyor ile vaat ediyor)

Vaatlerle then/catch ├žal─▒┼čmaktan ba┼čka bir yakla┼č─▒m daha var. Fikir etmektir zaman uyumsuz bir i┼člevi tan─▒mak ve sonra vaat bekleyin kod sonraki sat─▒ra ge├žmeden ├Ânce, gidermek i├žin. Hala promises kaputun alt─▒nda, ama farkl─▒ bir s├Âzdizimsel yakla┼č─▒mla. ─░┼čleri netle┼čtirmek i├žin, a┼ča─č─▒da bir kar┼č─▒la┼čt─▒rma bulabilirsiniz:

sonra / s├╝r├╝m yakalamak:

 function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
         throw err;
       })
 }
 

async / bekliyor s├╝r├╝m├╝:

   async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        throw err;
     }
  }
 

65







Di─čer bir ├ž├Âz├╝m, kodu s─▒ral─▒ uygulay─▒c─▒ nsynjs arac─▒l─▒─č─▒yla ├žal─▒┼čt─▒rmakt─▒r .

Altta yatan fonksiyon s├Âz veriliyorsa

nsynjs t├╝m s├Âzleri ard─▒┼č─▒k olarak de─čerlendirecek ve s├Âz sonucunu data m├╝lkiyete sokacak :

 function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
}); 
 <script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script> 

Temel fonksiyon s├Âz verilmezse

Ad─▒m 1. Geri ├ža─č─▒rma i┼člevini nsynjs-fark─▒nda sarmalay─▒c─▒ya sar─▒n (s├Âz verilmi┼č s├╝r├╝m├╝ varsa, bu ad─▒m─▒ atlayabilirsiniz):

 var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;
 

Ad─▒m 2. Fonksiyona senkron mant─▒─č─▒ yerle┼čtirin:

 function process() {
    console.log('got data:', ajaxGet(nsynjsCtx, "data/file1.json").data);
}
 

Ad─▒m 3. nsynjs ile fonksiyonu senkronize bir ┼čekilde ├žal─▒┼čt─▒r─▒n:

 nsynjs.run(process,this,function () {
    console.log("synchronous function finished");
});
 

Nsynjs, baz─▒ yava┼č fonksiyonlar─▒n sonu├žlar─▒n─▒n haz─▒r olmamas─▒ durumunda y├╝r├╝tmeyi duraklatan t├╝m operat├Ârleri ve ifadeleri ad─▒m ad─▒m de─čerlendirecek.

Burada daha fazla ├Ârnek: https://github.com/amaksr/nsynjs/tree/master/examples


62







Js tek di┼člidir.

Taray─▒c─▒ ├╝├ž b├Âl├╝me ayr─▒labilir:

1) Olay D├Âng├╝s├╝

2) Web API'si

3) Etkinlik Kuyru─ču

Olay D├Âng├╝s├╝ sonsuza kadar s├╝r├╝yor, yani sonsuz t├╝rden bir d├Âng├╝ var.Event Queue, t├╝m i┼člevlerinizin bir olaya itildi─či (├Ârnek: klik) bu, s─▒radan y├╝r├╝t├╝len ve bu i┼člevi y├╝r├╝ten ve kendini haz─▒rlayan Olay d├Âng├╝s├╝ne yerle┼čtirilen teker tekerdir. ilki birinciden sonra bir tane y├╝r├╝t├╝l├╝r. Bu, bir i┼člevin y├╝r├╝t├╝lmesi, s─▒radaki olay d├Âng├╝s├╝nde y├╝r├╝t├╝lene kadar i┼člevin ba┼člat─▒lamayaca─č─▒ anlam─▒na gelir.

┼×imdi s─▒radaki iki i┼člevi itti─čimizi d├╝┼č├╝nelim, biri sunucudan veri almak i├žin di─čeri bu verileri kullan─▒r. Biz s─▒radaki serverRequest () i┼člevini ├Ânce iterek sonra da useiseData () i┼člevini ittik. serverRequest i┼člevi olay d├Âng├╝s├╝ne gider ve sunucudan veri almak i├žin ne kadar zaman alaca─č─▒m─▒z─▒ asla bilmedi─čimizden sunucuya ├ža─čr─▒ yapar, bu nedenle bu i┼člemin zaman almas─▒ beklenir ve b├Âylece olay d├Âng├╝s├╝m├╝z├╝ me┼čgul ederiz, bu nedenle sayfam─▒za as─▒l─▒r; API, bu i┼člevi olay d├Âng├╝s├╝nden al─▒r ve sunucuyu olay d├Âng├╝s├╝n├╝ serbest hale getirir, b├Âylece s─▒radaki i┼člevden sonraki i┼člevi ├žal─▒┼čt─▒rabiliriz. S─▒radaki i┼člev, d├Âng├╝ i├žine giren ancak uygun veri olmad─▒─č─▒ i├žin d├Âner. israf ve sonraki fonksiyonun y├╝r├╝t├╝lmesi kuyru─čun sonuna kadar devam eder. (Buna Async ├ža─čr─▒s─▒ denir, yani veri alana kadar ba┼čka bir ┼čey yapabiliriz)

ServerRequest () i┼člevimizin bir kodda bir return ifadesi oldu─čunu varsayal─▒m, sunucudan verileri geri ald─▒─č─▒m─▒zda Web API'si kuyruk sonunda kuyru─ča sokar. S─▒ran─▒n sonunda ilerledik├že, bu verileri kullanmak i├žin kuyru─čumuzda kalan hi├žbir i┼člev olmad─▒─č─▒ndan verilerini kullanamay─▒z. Bu nedenle, Async ├ça─čr─▒s─▒ndan bir ┼čey d├Ând├╝rmek m├╝mk├╝n de─čildir.

B├Âylece bunun i├žin ├ž├Âz├╝m geri arama veya s├Âzd├╝r .

Buradaki cevaplardan birinden bir g├Âr├╝nt├╝, Geri arama kullan─▒m─▒n─▒ do─čru ┼čekilde a├ž─▒kl─▒yor ... ├ça─čr─▒lan sunucuyu i┼člevimize (sunucudan d├Ând├╝r├╝len verileri kullanan i┼člev) veriyoruz.


Geri aramak

  function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}
 

Kodumda buna denir.

 function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}
 

Zaman uyumsuz arama yapmak i├žin ECMA'daki (2016/17) yeni y├Ântemler i├žin buray─▒ okuyun (@Felix Kling'in Yan─▒t─▒) https://stackoverflow.com/a/14220323/7579856


60







ECMAScript 6, asenkron bir tarzda kolayca programlaman─▒za izin veren 'jenerat├Ârlere' sahiptir.

 function* myGenerator() {
    const callback = yield;
    let [response] = yield $.ajax("https://stackoverflow.com", {complete: callback});
    console.log("response is:", response);

    // examples of other things you can do
    yield setTimeout(callback, 1000);
    console.log("it delayed for 1000ms");
    while (response.statusText === "error") {
        [response] = yield* anotherGenerator();
    }
}
 

Yukar─▒daki kodu ├žal─▒┼čt─▒rmak i├žin ┼čunu yap─▒n:

 const gen = myGenerator(); // Create generator
gen.next(); // Start it
gen.next((...args) => gen.next([...args])); // Set its callback function
 

ES6'y─▒ desteklemeyen taray─▒c─▒lar─▒ hedeflemeniz gerekirse, ECMAScript 5'i olu┼čturmak i├žin kodu Babel veya closure compiler arac─▒l─▒─č─▒yla ├žal─▒┼čt─▒rabilirsiniz.

Geri arama ...args , bir diziye sar─▒l─▒r ve bunlar─▒ okudu─čunuzda imha edilir; b├Âylece desen, birden ├žok arg├╝man i├žeren geri aramalarla ba┼ča ├ž─▒kabilir. ├ľrne─čin, fs d├╝─č├╝m├╝ ile :

 const [err, data] = yield fs.readFile(filePath, "utf-8", callback);
 

39







Asenkron isteklerle ├žal─▒┼čmak i├žin baz─▒ yakla┼č─▒mlar:

  1. Taray─▒c─▒ Promise nesnesi
  2. S - JavaScript i├žin s├Âz k├╝t├╝phanesi
  3. A + Promises.js
  4. ertelenmi┼č jQuery
  5. XMLHttpRequest API
  6. Geri arama kavram─▒n─▒n kullan─▒lmas─▒ - ─░lk cevapta uygulama olarak

├ľrnek: jQuery birden ├žok istekle ├žal─▒┼čmak i├žin ertelenen uygulama

 var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init(); 


38







K─▒sa cevap : foo() Metodunuz derhal geri d├Âner, $ajax() ├ža─čr─▒ i┼člev d├Ând├╝kten sonra senkronize olmayan bir ┼čekilde y├╝r├╝t├╝l├╝r . As─▒l sorun, zaman uyumsuz ├ža─čr─▒ taraf─▒ndan al─▒nan sonu├žlar─▒n geri d├Ând├╝─č├╝nde nas─▒l veya nereye kaydedilece─čidir.

Bu i┼č par├žac─▒─č─▒nda ├že┼čitli ├ž├Âz├╝mler verilmi┼čtir. Belki de en kolay yol, bir nesneyi foo() y├Ânteme aktarmak ve sonu├žlar─▒ e┼čzamans─▒z ├ža─čr─▒ tamamland─▒ktan sonra bu nesnenin bir ├╝yesinde saklamakt─▒r.

 function foo(result) {
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;   // Store the async result
        }
    });
}

var result = { response: null };   // Object to hold the async result
foo(result);                       // Returns before the async completes
 

Aramaya foo() devam etmenin yine de yararl─▒ bir ┼čey olmayaca─č─▒n─▒ unutmay─▒n . Ancak, zaman uyumsuz arama sonucu ┼čimdi i├žinde saklan─▒r result.response .


36







Ba┼čar─▒ callback() i├žinde bir i┼člev kullan─▒n foo() . Bu ┼čekilde dene. Basit ve anla┼č─▒lmas─▒ kolayd─▒r.  

 var lat = "";
var lon = "";
function callback(data) {
    lat = data.lat;
    lon = data.lon;
}
function getLoc() {
    var url = "http://ip-api.com/json"
    $.getJSON(url, function(data) {
        callback(data);
    });
}

getLoc();
 

35







Kendimizi "zaman" olarak adland─▒rd─▒─č─▒m─▒z bir boyutta ilerleyen g├Âr├╝nen bir evrende buluyoruz. Zaman─▒n ger├žekte ne oldu─čunu anlam─▒yoruz, ancak bunun hakk─▒nda konu┼čmam─▒za ve konu┼čmam─▒za izin veren soyutlamalar ve kelimeler geli┼čtirdik: "ge├žmi┼č", "┼čimdi", "gelecek", "├Ânce", "sonra".

Olu┼čturdu─čumuz bilgisayar sistemleri - giderek daha fazla - ├Ânemli bir boyut olarak zaman al─▒yor. Gelecekte ger├žekle┼čecek baz─▒ ┼čeyler var. ├ľyleyse sonunda ilk ┼čeyler ger├žekle┼čtikten sonra ba┼čka ┼čeylerin de olmas─▒ gerekir. Bu "asenkroniklik" olarak adland─▒r─▒lan temel kavramd─▒r. Gittik├že a─čla┼čan d├╝nyam─▒zda, en yayg─▒n e┼čzamans─▒zl─▒k vakas─▒, baz─▒ uzak sistemlerin baz─▒ isteklere cevap vermesini beklemektedir.

Bir ├Ârnek d├╝┼č├╝n├╝n. Siz s├╝t├ž├╝y├╝ aray─▒n ve biraz s├╝t sipari┼č edin. Geldi─činde kahvene koymak istiyorsun. ┼×u anda s├╝t├╝ kahvenize koyamazs─▒n─▒z, ├ž├╝nk├╝ hen├╝z burada de─čil. Kahvene koymadan ├Ânce gelmesini beklemelisin. Ba┼čka bir deyi┼čle, a┼ča─č─▒daki i┼če yaramaz:

 var milk = order_milk();
put_in_coffee(milk);
 

JS o gerekti─čini bilmenin bir yolu olmad─▒─č─▒ i├žin beklemek i├žin order_milk ├žal─▒┼čmas─▒ndan ├Ânce sona put_in_coffee . Ba┼čka bir deyi┼čle, o bilmiyor order_milk olan asenkron gelecekteki bir s├╝re kadar s├╝t├╝n neden gitmiyor --is ┼čey. JS ve di─čer bildirici diller, birbirini beklemeden birbiri ard─▒na y├╝r├╝t├╝r.

JS'nin, ├ževreye at─▒labilecek birinci s─▒n─▒f nesneler olarak i┼člevleri desteklemesi ger├že─činden faydalanan klasik JS yakla┼č─▒m─▒, bir i┼člevi bir i┼člevi bir asenkron iste─če bir parametre olarak ge├žirerek, daha sonra tamamland─▒─č─▒nda ├ža─č─▒racakt─▒r. Gelecekte g├Ârevini. Bu "geri arama" yakla┼č─▒m─▒d─▒r. Bu gibi g├Âr├╝n├╝yor:

 order_milk(put_in_coffee);
 

order_milk ba┼člad─▒, s├╝t sipari┼či verdi, sonra, ne zaman ve ne zaman gelirse, onu ├ža─č─▒r─▒yor put_in_coffee .

Bu geri ├ža─č─▒rma yakla┼č─▒m─▒ndaki sorun, sonucunu bildiren bir i┼člevin normal anlambilimini kirletmesidir return ; bunun yerine, i┼člevler parametre olarak verilen bir geri ├ža─čr─▒y─▒ arayarak sonu├žlar─▒n─▒ bildirmemelidir. Ayr─▒ca, bu yakla┼č─▒m daha uzun olay dizileriyle u─čra┼č─▒rken h─▒zl─▒ bir ┼čekilde hantalla┼čabilir. Mesela, s├╝t├╝n kahveye konmas─▒n─▒ beklemek istedi─čimi ve daha sonra sadece kahve i├žmek gibi ├╝├ž├╝nc├╝ bir ad─▒m atmak istedi─čimi varsayal─▒m. Sonunda b├Âyle bir ┼čey yazmaya ihtiyac─▒m var:

 order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }
 

put_in_coffee hem i├žine koymak i├žin hem de s├╝te ge├žti─čimde, hem de s├╝t konulduktan sonra uygulanacak eylem ( drink_coffee ). Bu kodlar─▒ yazmak, okumak ve hata ay─▒klamak zorla┼č─▒yor.

Bu durumda, sorudaki kodu ┼ču ┼čekilde yeniden yazabiliriz:

 var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}
 

S├Âzleri girin

Bu, bir t├╝r gelece─či veya asenkron bir sonucu temsil eden belirli bir de─čer t├╝r├╝ olan ÔÇťs├ÂzÔÇŁ kavram─▒n─▒n motivasyonuydu . Zaten olan veya gelecekte ger├žekle┼čecek olan veya hi├ž ger├žekle┼čmeyecek bir ┼čeyi temsil edebilir. S├Âzlerin then , s├Âz├╝n temsil etti─či sonu├ž ger├žekle┼čti─činde ger├žekle┼čtirilecek bir eylemi ge├žirdi─činiz adl─▒ tek bir y├Ântemi vard─▒r.

S├╝t ve kahvelerimizde, order_milk gelen s├╝t i├žin bir s├Âz vermek ├╝zere tasarl─▒yoruz , ard─▒ndan put_in_coffee bir then eylem olarak belirtiyoruz:

 order_milk() . then(put_in_coffee)
 

Bunun bir avantaj─▒, gelecekteki olu┼čumlar─▒n dizilerini ("zincirleme") olu┼čturmak i├žin bunlar─▒ birbirine ba─člayabilmemizdir:

 order_milk() . then(put_in_coffee) . then(drink_coffee)
 

├ľzel probleminize s├Âzler uygulayal─▒m. ─░stek mant─▒─č─▒m─▒z─▒ s├Âz veren bir fonksiyonun i├žine saraca─č─▒z:

 function get_data() {
  return $.ajax('/foo.json');
}
 

Asl─▒nda yapt─▒─č─▒m─▒z tek ┼čey return ├ža─čr─▒ya bir ┼čey eklemek $.ajax . Bu i┼če yar─▒yor, ├ž├╝nk├╝ jQuery $.ajax zaten bir ├že┼čit vaat tarz─▒ ┼čey d├Ând├╝r├╝yor. (Uygulamada, ayr─▒nt─▒lara girmeden, bu aramay─▒ ger├žek bir s├Âz vermek i├žin sarmay─▒ tercih ederiz veya buna alternatif bir y├Ântem kullan─▒r─▒z $.ajax .) ┼×imdi, dosyay─▒ y├╝klemek ve bitmesini beklemek istiyorsak, o zaman bir ┼čeyler yap, basit├že s├Âyleyebiliriz

 get_data() . then(do_something)
 

├ľrne─čin,

 get_data() . 
  then(function(data) { console.log(data); });
 

then Vaatleri kullan─▒rken, bir├žok fonksiyonun i├žine ge├žiyoruz , bu nedenle daha kompakt ES6 tarz─▒ ok fonksiyonlar─▒n─▒ kullanmak genellikle yararl─▒ olur:

 get_data() . 
  then(data => console.log(data));
 

async anahtar kelime

Ancak yine de, senkronize oldu─čunda bir ┼čekilde kod yazmak zorunda kalmas─▒ ve zamanuyumsuz olarak olduk├ža farkl─▒ bir ┼čekilde yap─▒lmas─▒ konusunda tatmin edici olmayan bir ┼čey var. Senkron i├žin, biz yaz─▒yoruz

 a();
b();
 

fakat e─čer a asenkronize ise, s├Âzlerle birlikte yazmak zorunday─▒z.

 a() . then(b);
 

Yukar─▒da, ÔÇťJS'nin, ikincisini y├╝r├╝tmeden ├Ânce ilk ├ža─čr─▒n─▒n bitmesini beklemesinin gerekmedi─čini bilmenin bir yolu olmad─▒─č─▒n─▒ÔÇŁ dedik . Orada e─čer ho┼č olmaz idi o JS anlatmak i├žin bir yol? Var oldu─ču ortaya ├ž─▒kt─▒ - await anahtar kelime, "async" i┼člevi olarak adland─▒r─▒lan ├Âzel bir i┼člev t├╝r├╝ i├žinde kullan─▒lan. Bu ├Âzellik ES'nin yakla┼čmakta olan versiyonunun bir par├žas─▒ ancak ├Ânceden belirlenmi┼č Babil gibi transpillerde mevcut. Bu bize basit├že yazmam─▒z─▒ sa─člar

 async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}
 

Senin durumunda, b├Âyle bir ┼čey yazabilirsin

 async function foo() {
  data = await get_data();
  console.log(data);
}
 

33







Tabii ki senkron istek, vaadi gibi bir├žok yakla┼č─▒m var, ama deneyimlerime g├Âre geri arama yakla┼č─▒m─▒n─▒ kullanmal─▒s─▒n. JavascriptÔÇÖin e┼čzamans─▒z davran─▒┼č─▒ do─čald─▒r. B├Âylece, kod snippet'iniz biraz farkl─▒ olabilir:

 function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            myCallback(response);
        }
    });

    return result;
}

function myCallback(response) {
    // Does something.
}
 

28







Soru ┼čuydu:

Zaman uyumsuz bir ├ža─čr─▒n─▒n yan─▒t─▒n─▒ nas─▒l d├Ând├╝r├╝r├╝m?

hangi olarak yorumlanabilir:

Nas─▒l yapmak i├žin asenkron kod bakmak senkron ?

├ç├Âz├╝m, geri aramalardan ka├ž─▒nmak ve Promises ve async / await kombinasyonunu kullanmak olacakt─▒r .

Bir Ajax talebi i├žin bir ├Ârnek vermek istiyorum.

(Javascript'te yaz─▒labilmesine ra─čmen, Python'da yazmay─▒ ve Transcrypt kullanarak Javascript'te derlemeyi tercih ediyorum . Yeterince a├ž─▒k.)

─░lk ├Ânce JQuery kullan─▒m─▒n─▒ etkinle┼čtirelim, ┼č├Âyle olmas─▒ $ m├╝mk├╝n S :

 __pragma__ ('alias', 'S', '$')
 

S├Âz veren bir i┼člev tan─▒mlay─▒n , bu durumda bir Ajax ├ža─čr─▒s─▒:

 def read(url: str):
    deferred = S.Deferred()
    S.ajax({'type': "POST", 'url': url, 'data': { },
        'success': lambda d: deferred.resolve(d),
        'error': lambda e: deferred.reject(e)
    })
    return deferred.promise()
 

Kullan─▒m asenkron o sanki kodu senkron :

 async def readALot():
    try:
        result1 = await read("url_1")
        result2 = await read("url_2")
    except Exception:
        console.warn("Reading a lot failed")
 

27







S├Âz Kullan─▒m─▒

Bu sorunun en m├╝kemmel cevab─▒ kullan─▒yor Promise .

 function ajax(method, url, params) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open(method, url);
    xhr.send(params);
  });
}
 

kullan─▒m

 ajax("GET", "/test", "acrive=1").then(function(result) {
    // Code depending on result
})
.catch(function() {
    // An error occurred
});
 

Fakat bekle...!

Vaatleri kullanmada bir sorun var!

Neden kendi ├Âzel S├Âz├╝m├╝z├╝ kullanmal─▒y─▒z?

Eski taray─▒c─▒larda bir hata oldu─čunu bulana kadar bir s├╝re bu ├ž├Âz├╝m├╝ kullan─▒yordum:

 Uncaught ReferenceError: Promise is not defined
 

Bu y├╝zden, e─čer tan─▒mlanmam─▒┼čsa , ES3 i├žin kendi Promise s─▒n─▒f─▒m─▒, js derleyicilerinin alt─▒nda uygulamaya karar verdim . Bu kodu ana kodunuzdan ├Ânce ekleyin ve g├╝venli bir ┼čekilde Promise kullan─▒n!

 if(typeof Promise === "undefined"){
    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) { 
            throw new TypeError("Cannot call a class as a function"); 
        }
    }
    var Promise = function () {
        function Promise(main) {
            var _this = this;
            _classCallCheck(this, Promise);
            this.value = undefined;
            this.callbacks = [];
            var resolve = function resolve(resolveValue) {
                _this.value = resolveValue;
                _this.triggerCallbacks();
            };
            var reject = function reject(rejectValue) {
                _this.value = rejectValue;
                _this.triggerCallbacks();
            };
            main(resolve, reject);
        }
        Promise.prototype.then = function then(cb) {
            var _this2 = this;
            var next = new Promise(function (resolve) {
                _this2.callbacks.push(function (x) {
                    return resolve(cb(x));
                });
            });
            return next;
        };
        Promise.prototype.catch = function catch_(cb) {
            var _this2 = this;
            var next = new Promise(function (reject) {
                _this2.callbacks.push(function (x) {
                    return reject(cb(x));
                });
            });
            return next;
        };
        Promise.prototype.triggerCallbacks = function triggerCallbacks() {
            var _this3 = this;
            this.callbacks.forEach(function (cb) {
                cb(_this3.value);
            });
        };
        return Promise;
    }();
}
 

22







Size kod yazmak yerine, JS'nin geri aramalar─▒ ve e┼čzamans─▒zl─▒─č─▒ nas─▒l ele ald─▒─č─▒n─▒ anlamak i├žin anahtar olan 2 kavram vard─▒r. (bu bir kelime bile mi?)

Olay D├Âng├╝s├╝ ve E┼čzamanl─▒l─▒k Modeli

Dikkat etmeniz gereken ├╝├ž ┼čey var; Kuyruk; olay d├Âng├╝s├╝ ve y─▒─č─▒n

Geni┼č, basit terimlerle, olay d├Âng├╝s├╝ proje y├Âneticisi gibidir, s─▒ra ile y─▒─č─▒n aras─▒nda ├žal─▒┼čt─▒rmak ve ileti┼čim kurmak isteyen t├╝m fonksiyonlar─▒ s├╝rekli olarak dinler.

 while (queue.waitForMessage()) {
   queue.processNextMessage();
}
 

Bir ┼čeyi ├žal─▒┼čt─▒rmak i├žin bir mesaj ald─▒─č─▒nda, onu s─▒raya ekler. S─▒ra, y├╝r├╝tmeyi bekleyenlerin listesidir (AJAX iste─činiz gibi). b├Âyle d├╝┼č├╝n├╝n:

  1. call foo.com/api/bar using foobarFunc
 2. Go perform an infinite loop
 ... and so on
 

Bu mesajlardan biri ├žal─▒┼čt─▒r─▒lacaksa, mesaj kuyru─čundan ├ž─▒kar ve bir y─▒─č─▒n olu┼čturur, y─▒─č─▒n mesaj─▒n talimat─▒n─▒ yerine getirmek i├žin JS'nin y├╝r├╝tmesi gereken her ┼čeydir. Yani bizim ├Ârne─čimizde aramak i├žin s├Âyleniyor foobarFunc

 function foobarFunc (var) {
  console.log(anotherFunction(var));
}
 

Bu y├╝zden foobarFunc uygulamas─▒n─▒n ├žal─▒┼čmas─▒ gereken her ┼čey (bizim durumumuzda anotherFunction ) y─▒─č─▒na itilir. y├╝r├╝t├╝ld├╝ ve sonra unutuldu - olay d├Âng├╝s├╝ daha sonra s─▒radaki bir sonraki ┼čeye ge├žecektir (veya mesajlar─▒ dinler)

Buradaki kilit ┼čey, y├╝r├╝tme emridir. Yani

WHEN ka├žacak bir ┼čey

AJAX kullanarak harici bir tarafa ├ža─čr─▒ yapt─▒─č─▒n─▒zda veya herhangi bir asenkron kod ├žal─▒┼čt─▒rd─▒─č─▒n─▒zda (├Ârne─čin bir setTimeout), Javascript devam etmeden ├Ânce bir cevaba ba─čl─▒d─▒r.

B├╝y├╝k soru ne zaman yan─▒t alaca─č─▒? Cevap bilmiyoruz - bu y├╝zden olay d├Âng├╝s├╝ bu mesaj─▒n "hey ko┼č beni" demesini bekliyor. E─čer JS bu mesaj i├žin e┼čzamanl─▒ olarak bekleseydi, uygulaman─▒z donar ve emer. B├Âylece JS, s─▒radaki iletinin s─▒raya eklenmesini beklerken s─▒radaki bir sonraki ├Â─čeyi ├žal─▒┼čt─▒rmaya devam eder.

Bu y├╝zden zaman uyumsuz i┼člevlerde geri arama denilen ┼čeyleri kullan─▒yoruz . Kelimenin tam anlam─▒yla bir s├Âz gibi . Bir noktada bir ┼čeyi iade edece─čime s├Âz verdi─čim gibi, jQuery deffered.done deffered.fail ve deffered.always di─čerlerinin yan─▒ s─▒ra belirli geri aramalar─▒ kullan─▒yor . Hepsini burada g├Ârebilirsinizhttps://api.jquery.com/category/deferred-object/

Yani yapman─▒z gereken ┼čey, kendisine iletilen verilerle bir noktada y├╝r├╝tmeye s├Âz verilen bir i┼člevi ge├žmek.

Bir geri ├ža─č─▒rma hemen y├╝r├╝t├╝lmedi─činden, ancak daha sonraki bir zamanda, ba┼čvuruyu y├╝r├╝t├╝lmeyen i┼čleve iletmek ├Ânemlidir. yani

 function foo(bla) {
  console.log(bla)
}
 

b├Âylece ├žo─ču zaman (ama her zaman de─čil) size ge├žmek olacak foo de─čil foo()

Umar─▒m bu biraz mant─▒kl─▒ olur. B├Âyle kafa kar─▒┼čt─▒r─▒c─▒ g├Âr├╝nen bir ┼čeyle kar┼č─▒la┼čt─▒─č─▒n─▒zda - en az─▒ndan anlaman─▒z i├žin belgeleri tamamen okuman─▒z─▒ tavsiye ederim. Seni ├žok daha iyi bir geli┼čtirici yapacakt─▒r.


17







ES2017'yi kullanarak bunu i┼člev bildirimi olarak almal─▒s─▒n─▒z.

 async function foo() {
    var response = await $.ajax({url: '...'})
    return response;
}
 

Ve bu ┼čekilde y├╝r├╝tmek.

 (async function() {
    try {
        var result = await foo()
        console.log(result)
    } catch (e) {}
})()
 

Veya s├Âz s├Âzdizimi

 foo().then(response => {
    console.log(response)

}).catch(error => {
    console.log(error)

})
 

16



─░lgili yay─▒nlar


Bir diziden rastgele nas─▒l se├žim yapabilirim?

Zaman uyumsuz bir geri ├ža─č─▒rma i┼člevinden de─čer nas─▒l d├Ând├╝r├╝l├╝r? [├žift]

Flask g├Âr├╝n├╝m├╝nden JSON yan─▒t─▒n─▒ d├Ând├╝r

G├╝nl├╝k dosyas─▒n─▒ bir Android cihazdan nas─▒l edinebilirim?

Temel s─▒n─▒ftan ├ža─čr─▒ld─▒─č─▒nda GetType () en ├žok t├╝retilmi┼č t├╝r├╝ d├Ând├╝r├╝r m├╝?

A├ž─▒sal 2: Etiketleri kullan─▒c─▒ya g├Âstermeden HTML'i JSON yan─▒t─▒ndan nas─▒l olu┼čturursunuz? [├žift]

ASP.NET MVC i┼čleminden HTTP 404 yan─▒t─▒ g├Ândermenin do─čru yolu nedir?

A├ž─▒sal bir G├Âzlemlenebilir / http / asenkron ├ža─čr─▒dan gelen yan─▒t─▒ nas─▒l geri g├Ânderirim?

S─▒n─▒f ad─▒n─▒ geni┼čletilmi┼č bir PHP s─▒n─▒f─▒ndaki statik bir ├ža─čr─▒dan nas─▒l alabilirim?

Java'daki bir diziden nesneleri nas─▒l kald─▒rabilirim?

Etiketle ilgili di─čer sorular [javascript]


Yerel dosyalar─▒n ├╝zerine ÔÇťgit pullÔÇŁ u nas─▒l zorlar─▒m?

.NET'te bir bi├žim dizesinde ka┼čl─▒ ayra├žlar (k├╝me parantezleri) nas─▒l kullan─▒l─▒r

D├╝z ─░ngilizce olarak Monad? (FP arka plan─▒ olmayan OOP programc─▒s─▒ i├žin)

Bir const dizisi bildir

'IIS APPPOOL \ ASP.NET v4.0' kullan─▒c─▒s─▒ i├žin giri┼č ba┼čar─▒s─▒z oldu

Tamamen i┼člevsel programlama etkinli─či

Java 8 paralel ak─▒┼č─▒nda ├Âzel i┼č par├žac─▒─č─▒ havuzu

FFmpeg kullanarak iki MP4 dosyas─▒ nas─▒l birle┼čtirilir?

Paket ad─▒ i├žin e┼čle┼čen bir istemci bulunamad─▒ (Google Analytics) - birden ├žok ├╝r├╝nFlavors ve buildTypes [kapal─▒]

$ NON-NLS-1 $ ne anlama geliyor?