path: root/files/tr/web/javascript/guide/ifadeler/index.html

---
title: Kontrol akışı ve hata yakalama
slug: Web/JavaScript/Guide/Ifadeler
tags:
  - Başlangıç
  - JavaScript
  - Rehberi
translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>

<p class="summary">JavaScript, uygulamanızın etkilişim halinde olmasını sağlayan kontrol akışı ifadeleri gibi birçok ifadeyi destekler. Bu bölümde, bu ifadeler üzerine durulacaktır.</p>

<p>En basit olarak anlatmak gerekirse, JavaScript tarafından çalıştırılacak her komuta ifade adı verilir. Noktalı virgül (<code>;</code>) karakteri ise, JavaScript kodundaki ifadelerin birbirinden ayrılması için kullanılmaktadır.</p>

<h2 id="Blok_ifadesi">Blok ifadesi</h2>

<p>En temel ifade türü, ifadelerin gruplanmasını sağlayan blok ifadesidir. Blok ifadesi,  bir çift süslü parantezle sınırlandırılır:</p>

<pre class="syntaxbox">{ ifade_1; ifade_2; . . . ifade_n; }
</pre>

<h3 id="Örnek"><strong>Örnek</strong></h3>

<p>Blok ifadeleri genellikle kontrol akışı ifadeleri ile birlikte kullanılır (örn: <code>if</code>, <code>for</code>, <code>while</code>).</p>

<pre class="brush: js">while (x &lt; 10) {
  x++;
}
</pre>

<p>Buradaki, <code>{ x++; } bir </code>blok ifadesidir.</p>

<p><strong>Önemli</strong>: ECMAScript2015'ten önceki JavaScript'te blok etki alanı bulunmamaktadır. Blok içerisinde yer alan değişkenlerin etki alanı, onları içeren fonksiyon veya .js dosyası kadar geniş bir alanı kapsar, ve bu değişkenler üzerinde yapılan değişiklikler bloğun ötesinde de kalıcılık gösterir. Başka bir deyişle blok ifadeleri, değişkenler için bir etki alanı oluşturmazlar. C ve Java dilinden aşina olduğunuz değişkenden bağımsız blok ifadeleri, JavaScript'te tamamıyla farklı bir davranış sergileyebilirler. Aşağıdaki örneği inceleyelim:</p>

<pre class="brush: js">var x = 1;
{
  var x = 2;
}
console.log(x); // Ekrandaki çıktı: 2
</pre>

<p>Kodun çıktısı 2 olacaktır. Çünkü blok içerisindeki <code>var x</code> ifadesi  ile bloktan önce gelen var x ifadesi aynı etki alanı içerisindedir. Eğer üstteki kod C veya Java dilinde olsaydı, ekrandaki çıktı 1 olacaktı.</p>

<p>ECMAScript 6 ile birlikte gelen <code>let</code> tanımıyla oluşturulan değişkenler, blok seviyesinde etki alanına sahiptir. Daha fazla bilgi için {{jsxref("Statements/let", "let")}} sayfasına bakınız.</p>

<h2 id="Koşullu_ifadeler">Koşullu ifadeler</h2>

<p>Belirli bir koşul sağlandığında çalışacak komutlar kümesine <strong>koşullu ifade</strong> denilir. JavaScript, iki adet koşullu ifadeyi destekler: <code>if...else</code> ve <code>switch</code>.</p>

<h3 id="if...else_ifadesi"><code>if...else</code> ifadesi</h3>

<p>Belirli bir mantıksal durum sağlandığında bir ifadenin çalıştırılması için <code>if</code> ifadesi kullanılır. Mantıksal durum sağlanmadığında çalıştırılacak komutlar için ise <code>else</code> kelimesi kullanıılabilir. Bir <code>if</code> ifadesi aşağıdaki şekilde oluşturulur:</p>

<pre class="syntaxbox">if (mantıksal_durum) {
  ifade_1;
} else {
  ifade_2;
}</pre>

<p><code>mantıksal_durum</code>, true veya false değerler alabilen herhangi bir ifade olabilir. Eğer <code>mantıksal_durum, </code>true olursa <code>ifade_1</code> çalışacak; aksi halde, <code>ifade_2</code> is çalışacaktır. <code>ifade_1</code> ve <code>ifade_2 ifadeleri</code>, çalıştırılacak herhangi bir ifade olabilir.</p>

<p>Birçok mantıksal durumun kontrolünün bütün bir halde yapılabilmesi için aşağıdaki şekilde <code>else if</code> tanımlamalarını kullanabilirsiniz.</p>

<pre class="syntaxbox">if (mantıksal_durum_1) {
  ifade_1;
} else if (mantıksal_durum_2) {
  ifade_2;
} else if (mantıksal_durum_n) {
  ifade_n;
} else {
  ifade_son;
}
</pre>

<p>Üstteki gibi çoklu mantıksal durumların olduğu ifadelerde,  yalnızca <code>true</code> olan ilk mantıksal durum çalıştırılır, ilişkili diğer kontrol ifadeleri çalıştırılmaz. Birçok ifadenin çalıştırılması için ifadeler, blok ifadesi (<code>{ ... }</code>) içerisinde gruplandırılır. Özellikle iç içe <code>if</code> ifadelerinin olduğu durumlar başta olmak üzere blok ifadeleri, geliştiriciler arasında yaygın olarak kullanılmaktadır:</p>

<pre class="syntaxbox">if (mantıksal_durum) {
  eğer_durum_true_ise_çalışacak_ifade_1;
  eğer_durum_true_ise_çalışacak_ifade_2;
} else {
  eğer_durum_false_ise_çalışacak_ifade_3;
  eğer_durum_false_ise_çalışacak_ifade_4;
}
</pre>

<div><code>mantıksal_durum</code> kısmında herhangi bir değişkene değer atamak yanlış bir kullanımdır, çünkü kodunuza sizden sonra bakan biri atama işlemini ilk bakışta eşitlik olarak görebilir. Örneğin aşağıdaki şekilde bir kullanım yanlıştır:</div>

<div></div>

<pre class="example-bad brush: js">if (x = y) {
  /* diğer ifadeler */
}
</pre>

<p>Eğer <code>mantıksal_durum</code> kısmında gerçekten atama yapmanız gerekiyorsa, bunu yapmanın en iyi yolu atama ifadesini parantezler içerisine almaktır. Örneğin:</p>

<pre class="brush: js">if ((x = y)) {
  /* diğer ifadeler */
}
</pre>

<h4 id="Yanlışımsı_falsy_değerler">Yanlışımsı (falsy) değerler</h4>

<p>Aşağıdaki değerler JavaScript tarafından false olarak değerlendirilir ve ({{Glossary("Falsy")}} değerler olarak bilinir):</p>

<ul>
 <li><code>false</code></li>
 <li><code>undefined</code></li>
 <li><code>null</code></li>
 <li><code>0</code></li>
 <li><code>NaN</code></li>
 <li>Boş string (<code>""</code>)</li>
</ul>

<p>Mantıksal durum içerisine alınan diğer bütün değerler ve nesneler, JavaScript tarafından true olarak değerlendirilir.</p>

<p>{{jsxref("Boolean")}} nesnesindeki true ve false ile ilkel tipteki <code>true</code> ve <code>false</code> değerlerini karıştırmayınız. Örneğin:</p>

<pre class="brush: js">var b = new Boolean(false);
if (b) // bu ifade true olarak değerlendirilir
</pre>

<h4 id="Örnek_2"><strong>Örnek</strong></h4>

<p>Aşağıdaki örnekte bulunan <code>checkData</code> fonksiyonu, HTML dokümanındaki formda yer alan <code>ikiKarakter</code> isimli girdi nesnesine ait değerin, karakter sayısı 2 ise <code>true</code> döndürülür, değilse ekrana bir uyarı metni basılır ve <code>false</code> döndürülür:</p>

<pre class="brush: js">function checkData() {
  if (document.form1.ikiKarakter.value.length == 2) {
    return true;
  } else {
    alert("Tam olarak iki karakter giriniz. " +
    document.form1.ikiKarakter.value + " geçersizdir.");
    return false;
  }
}
</pre>

<h3 id="switch_ifadesi"><code>switch</code> ifadesi</h3>

<p>Bir <code>switch</code> ifadesine, mantıksal bir ifade verilir ve bu ifade ile eşleşen bir etiket varsa, etiketi içeren <code>case</code> ifadesi çalıştırılır, yoksa varsayılan ifade (<code>default)</code> çalıştırılır. Örnek:</p>

<pre class="syntaxbox">switch (mantıksal_ifade) {
  case etiket_1:
    ifadeler_1
    [break;]
  case etiket_2:
    ifadeler_2
    [break;]
    ...
  default:
    varsayılan_ifadeler
    [break;]
}
</pre>

<p>Üstteki kodu çalıştırırken JavaScript, <code>mantıksal_ifade</code> ile eşleşen etikete sahip <code>case</code> cümleciğini arar ve ilişkili ifadeleri çalıştırır. Eğer eşleşen hiçbir etiket bulunamadıysa, <code>default</code> cümleciğinin olup olmadığına bakar, varsa ve ilgili varsayılan ifadeleri çalıştırır. Eğer <code>default</code> cümleciği de yoksa, <code>switch</code> bloğundan çıkılır.  <code>default</code> cümleciğinin sırası önemli olmamakla birlikte, genel kullanımlarda hep en sonda yer almaktadır.</p>

<p>Her <code>case</code> cümleciğinde, isteğe bağlı olarak konulan <code>break</code> ifadesi,  eşleşen ifadenin çalıştırılıp tamamlandıktan sonra switch bloğundan çıkmayı sağlar. Eğer <code>break</code> ifadesi yazılmazsa, program <code>switch</code> ifadesi içerisindeki bir sonraki case ifadesini çalıştırarak yoluna devam eder. </p>

<h4 id="Örnek_3"><strong>Örnek</strong></h4>

<p>Aşağıdaki örnekte, <code>meyve</code> ifadesinin değeri "Muz" ise,  program "Muz" değeri ile eşleşen <code>case</code> "Muz" ifadesini çalıştırır. <code>break</code> ile karşılaşıldığında, program <code>switch</code> bloğundan çıkar ve <code>switch</code> bloğundan sonraki kodları çalıştırır. Eğer <code>break</code> ifadesi olmasaydı, "Muz" ile alakasız olan, <code>case "Kiraz"</code> ifadesi de çalıştırılacaktı.</p>

<pre class="brush: js">switch (meyve) {
  case "Portakal":
    console.log("Portakalların kilosu ₺1.99 lira.");
    break;
  case "Elma":
    console.log("Elmaların kilosu ₺1.49 lira.");
    break;
  case "Muz":
    console.log("Muzların kilosu ₺2.49 lira.");
    break;
  case "Kiraz":
    console.log("Kirazların kilosu ₺2.19 lira.");
    break;
  case "Çilek":
    console.log("Çileklerin kilosu ₺2.49 lira.");
    break;
  case "Avokado":
    console.log("Avokadoların kilosu ₺5.99 lira.");
    break;
  default:
   console.log("Maalesef elimizde hiç " + meyve + " kalmadı.");
}
console.log("Başka bir şey lazım mı?");</pre>

<h2 id="Exception_Hata_yakalama_ifadeleri">Exception (Hata) yakalama ifadeleri</h2>

<p><code>throw</code> ifadesi ile exception fırlatabilir, <code>try...catch</code> ifadeleri kullanarak hata yakalama işlemlerinizi yürütebilirsiniz.</p>

<ul>
 <li><code><a href="#throw_ifadesi">throw ifadesi</a></code></li>
 <li><a href="#try...catch_ifadesi"><code>try...catch</code> ifadesi</a></li>
</ul>

<h3 id="Exception_türleri">Exception türleri</h3>

<p>JavaScript'te neredeyse her nesne fırlatılabilir. Buna rağmen fırlatılacak türdeki nesnelerin hepsi aynı şekilde oluşturulmamışlardır. Sayı ve string değerlerinin hata olarak fırlatılması oldukça yaygın olmasına rağmen, bu amaç için belirli olarak  oluşturulan aşağıdaki exception türlerinden birinin kullanılması daha anlamlıdır:</p>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">ECMAScript exception</a></li>
 <li>{{domxref("DOMException")}} ve {{domxref("DOMError")}}</li>
</ul>

<h3 id="throw_ifadesi"><code>throw</code> ifadesi</h3>

<p>Bir exception fırlatmak için <code>throw</code> ifadesini kullanılır. Bir exception fırlattığınız zaman, fırlatılacak ifadeyi de belirlersiniz:</p>

<pre class="syntaxbox">throw ifade;
</pre>

<p>Herhangi bir türdeki ifadeyi exception olarak fırlatabilirsiniz. Aşağıdaki kodda çeşitli türlerdeki exception'lar fırlatılmaktadır:</p>

<pre class="brush: js">throw "Hata2";   // String türü
throw 42;         // Sayı türü
throw true;       // Boolean türü
throw { toString: function() { return "Ben bir nesneyim."; } };
</pre>

<div class="note"><strong>Not:</strong> Bir exception fırlatırken ilgili exception nesnesini belirleyebilirsiniz. Daha sonra catch bloğunda hatayı yakaladığınızda ilgili exception nesnesinin özelliklerine erişebilirsiniz. Aşağıdaki ifadede, KullanıcıHatası sınıfından bir nesne oluşturulmakta, ve throw ifadesinde bu nesne fırlatılmaktadır.</div>

<pre class="brush: js">// KullanıcıHatası türünde nesne oluşturuluyor
function KullanıcıHatası(mesaj){
  this.mesaj=mesaj;
  this.adı="KullanıcıHatası";
}

// Oluşturulan KullanıcıHatası nesnesinin konsola yazıldığında güzel bir
// ifade yazılması için aşağıdaki şekilde toString() fonksiyonunu override ediyoruz.
KullanıcıHatası.prototype.toString = function () {
  return this.adı+ ': "' + this.mesaj+ '"';
}

// KullanıcıHatası nesnesi yaratılır ve exception olarak fırlatılır
throw new KullanıcıHatası("Yanlış bir değer girdiniz.");</pre>

<h3 id="try...catch_ifadesi"><code>try...catch</code> ifadesi</h3>

<p><code>try...catch</code> ifadesi, çalıştırılması istenen ifadeleri bir blokta tutar. Fırlatılacak exception için bir veya daha fazla ifade belirlenerek, oluşacak bir <code>try...catch</code> ifadesi tarafından yakalanması sağlanır.</p>

<p><code>try...catch</code> ifadesi, çalıştırılacak bir veya daha fazla komutun yer aldığı, ve try bloğu içerisinde hata oluştuğunda çalışacak ifadeleri içeren, 0 veya daha fazla catch ifadesinin yer aldığı bir <code>try</code> bloğu içerir. Bu şekilde, try içerisinde yer alan başarıyla çalışmasını istediğiniz kodlarda bir sorun oluştuğunda, catch bloğunda bu sorunun üstesinden gelecek kontrolleri yazabilirsiniz. Eğer try bloğu içerisindeki herhangi bir ifade (veya try bloğu içerisinden çağırılan fonksiyon) bir exception fırlatırsa, JavaScript anında <code>catch</code> bloğuna bakar. Eğer try bloğu içerisinde bir exception fırlatılmazsa, <code>catch</code> bloğu çalıştırılmaz ve atlanır. <code>try</code> ve <code>catch </code>bloklarından sonra, eğer varsa <code>finally</code> bloğu da çalıştırılır.</p>

<p>Aşağıdaki örnekte bir <code>try...catch</code> ifadesi kullanılmaktadır. Fonksiyonda, parametre olarak geçilen ay sayısı değeri baz alınarak, diziden ilgili ayın adı getirilmektedir. Eğer ay sayısı değeri 1-12 arasında değilse, <code>"Geçersiz ay sayısı." </code>değeri exception olarak fırlatılır. catch bloğundaki ayAdı değişkeni de "bilinmeyen" olarak atanır.</p>

<pre class="brush: js">function getAyAdı(aySayisi) {
  aySayisi= aySayisi-1; // Dizi indeksi için aySayisi 1 azaltılır (1=Oca, 12=Ara)
  var aylar= ["Oca","Şub","Mar","Nis","May","Haz","Tem",
                "Ağu","Eyl","Eki","Kas","Ara"];
  if (aylar[aySayisi] != null) {
    return aylar[aySayisi];
  } else {
    throw "Geçersiz ay sayısı."; // burada throw ifadesi kullanılıyor
  }
}

try { // denenecek ifadeler
  ayAdı = getAyAdı(aySayim); // function could throw exception
}
catch (e) {
  ayAdı = "bilinmiyor";
  hatalarımıKaydet(e); // hataların kaydedilmesi için exception nesnesi geçiliyor.
}
</pre>

<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> bloğu</h4>

<p><code>try</code> bloğunda oluşturulan tüm exception'ların yakalanması için <code>catch</code> bloğunu kullanabilirsiniz.</p>

<pre class="syntaxbox">catch (exceptionDeğişkeni) {
  ifadeler
}
</pre>

<p><code>catch</code> bloğunda, <code>throw</code> ifadesi tarafından belirlenecek değerin tutulması için bir değişken tanımlanır; bu değişken kullanılarak, fırlatılan exception ile ilgili bilgiler elde edilmiş olur. <code>catch</code> bloğuna girildiğinde JavaScript, bu değişkenin içini doldurur; değişken değeri sadece <code>catch</code> bloğu süresince geçerli kalır; catch bloğu çalışmasını tamamladığında değişken artık mevcut değildir.</p>

<p>Örneğin aşağıdaki kodda, bir exception fırlatılıyor, ve fırlatıldığı anda otomatik olarak catch bloğuna iletiliyor.</p>

<pre class="brush: js">try {
  throw "hata" // bir exception oluşturur.
}
catch (e) {
  // herhangi bir exception'ı yakalamak için oluşturulan ifadeler
  hatalarımıKaydet(e) // hataların kaydedilmesi için exception nesnesi geçilir.
}
</pre>

<h4 id="finally_bloğu"><code>finally</code> bloğu</h4>

<p><code>finally</code> bloğu, <code>try...catch</code> ifadesinden sonra çalıştırılacak kod satırlarını içerir. finally bloğu, hata olsun veya olmasın çalışır. Eğer hata olmuşsa ve exception fırlatılmışsa, bu hatayı karşılayacak catch bloğu olmasa dahi <code>finally</code> bloğu çalışır. </p>

<p><code>finally</code> bloğu, hata oluştuğunda bu hataya sebep olan değişkenin kullandığı kaynakların sisteme geri verilmesi için en iyi yerdir. Bu şekilde hata tüm ayrıntılarıyla çözülmüş olur. Aşağıdaki örnekte bir dosya açılmakta, ve sonrasında dosyaya yazma işlemleri için kullanan ifadeler çalıştırılmaktadır (Sunucu taraflı yazılmış koddur. İstemci tarafında dosyaya yazma işlemleri güvenlik açısından engellenmiştir. Eğer dosya, yazmak için açılırken bir exception fırlatılırsa, kod hata vermeden önce <code>finally</code> bloğu çalışır ve erişilecek dosyayı kapatır.</p>

<pre class="brush: js">dosyaAç();
try {
  dosyayaYaz(veriler); // Bu kısım hata verebilir
} catch(e) {
  hatayıKaydetveGöster(e); // Hata ile ilgili bilgiler kaydedilir ve kullanıcıya bir hata mesajı sunulur.
} finally {
  dosyayıKapat(); // Dosyayı kapatır (hata olsa da olmasa da).
}
</pre>

<p>Eğer <code>finally</code> bloğu bir değer geri döndürürse,  bu değer, <code>try</code> ve <code>catch</code> içerisindeki return ifadelerine bakmaksızın, <code>try-catch-finally</code> ifadesinin tamamı için geri dönüş değeri haline gelir:</p>

<pre class="brush: js">function f() {
  try {
    console.log(0);
    throw "hata";
  } catch(e) {
    console.log(1);
    return true; // Buradaki return ifadesi,
                 // finally bloğu tamamlanana dek duraklatılır.
    console.log(2); // Üstteki return ifadesinden dolayı çalıştırılmaz.
  } finally {
    console.log(3);
    return false; // catch kısmındaki return ifadesinin üstüne yazar ve geçersiz hale getirir.
    console.log(4); // return'den dolayı çalıştırılmaz.
  }
  // Şimdi "return false" ifadesi çalıştırılır ve fonksiyondan çıkılır.
  console.log(5); // Çalıştırılmaz.
}
f(); // Konsola 0 1 3 yazar ve false değerini döndürür.
</pre>

<p><code>finally</code> bloğunun, geri dönüş değerlerinin üstüne yazma etkisi, aynı zamanda <code>catch</code> bloğu içerisindeki exception'lar için de aynı şekilde çalışır:</p>

<pre class="brush: js">function f() {
  try {
    throw "hata";
  } catch(e) {
    console.log('İçerideki "hata" yakalandı.');
    throw e; // Burası finally bloğu tamamlanana dek duraklatılır.
  } finally {
    return false; // Önceki "throw" ifadesinin üstüne yazar ve
                  //  throw ifadesini geçersiz hale getirir.
  }
  // Şimdi "return false" ifadesi çalıştırılır.
}

try {
  f();
} catch(e) {
  // f() fonksiyonundaki throw ifadesi geçersiz hale geldiği için
  //  buradaki catch bloğu çalıştırılmaz.
  console.log('Diğer "hata" yakalandı.');
}

// Ekran çıktısı: İçerideki "hata" yakalandı.</pre>

<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">İçiçe try...catch ifadeleri</h4>

<p>Bir veya daha fazla iç içe <code>try...catch</code> ifadeleri tanımlayabilirsiniz. Eğer içteki <code>try...catch</code> ifadesinin <code>catch</code> bloğu yoksa, bir dıştaki <code>try...catch</code> ifadesinin c<code>atch</code> bloğu kontrol edilir.</p>

<h3 id="Error_nesnelerinin_etkili_kullanımı"><code>Error</code> nesnelerinin etkili kullanımı</h3>

<p><code>Error</code> nesnesinin türüne bağlı olarak,  'name' ve 'message' özellikleri vasıtasıyla daha anlamlı hata mesajları tanımlayabilirsiniz. 'name' özelliği, oluşan hatayı sınıflandırır (örn, 'DOMException' veya 'Error'). 'message' ise hata nesnesinin string'e dönüştürülmesine nazaran  genellikle daha kısa bir mesaj sunulmasına olanak tanır.</p>

<p>Eğer kendi exception nesnelerinizi fırlatıyorsanız ve bu özellikleri kullanarak hatayı anlamlı hale getirmek istiyorsanız <code>Error</code> sınıfının yapıcısının getirdiği avantajlardan faydalanabilirsiniz (örneğin catch bloğunuzun, kendi exception'larınız ile sistem exception'ları arasındaki farkı ayırt edemediği gibi durumlarda). Aşağıdaki örneği inceleyelim:</p>

<pre class="brush: js">function hatayaMeyilliFonksiyon() {
  if (hataVerenFonksiyonumuz()) {
    throw (new Error('Hata oluştu'));
  } else {
    sistemHatasıVerenFonksiyon();
  }
}

try {
  hatayaMeyilliFonksiyon();
}
catch (e) {
  console.log(e.name); // 'Error' yazar
  console.log(e.message); // 'Hata oluştu' veya bir JavaScript hata mesajı yazar
}</pre>

<h2 id="Promise_nesneleri">Promise nesneleri</h2>

<p>ECMAScript2015 ile birlikte JavaScript'e, asenkron ve geciktirilmiş işlemlerin akış kontrolünün sağlanması için {{jsxref("Promise")}} nesneleri gelmiştir.</p>

<p>Bir <code>Promise</code> nesnesi aşağıdaki durumlardan birinde bulunur:</p>

<ul>
 <li><em>pending (bekliyor)</em>: başlangıç durumu, henüz çalıştırılmadı.</li>
 <li><em>fulfilled (başarıyla çalıştı)</em>: başarılı işlem</li>
 <li><em>rejected (hatalı çalıştı)</em>: hatalı işlem.</li>
 <li><em>settled (yerleşti)</em>: Promise nesnesi başarıyla veya hatalı olarak çalıştı.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>

<h3 id="XHR_ile_resim_yükleme">XHR ile resim yükleme</h3>

<p><code>Promise</code> ve <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> kullanarak bir resmin yüklenmesi için MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> sayfasında basit bir örnek mevcuttur. Ayrıca örneği canlı olarak da <a href="http://mdn.github.io/promises-test/">görebilirsiniz</a>. Örnekteki her aşamaya yorum satırları eklenmiştir. Bu sayede Promise ve XHR mimarisini daha yakından izleyebilirsiniz. Aşağıda <code>Promise</code> nesnesinin akışını gösteren örneğin belgelendirilmemiş sürümü bulunmaktadır:</p>

<pre class="brush: js">function resimYükle(url) {
  return new Promise(function(başarıSonucundaFonk, hataSonucundaFonk) {
    var istek = new XMLHttpRequest();
    istek.open('GET', url);
    istek.responseType = 'blob';
    istek.onload = function() {
      if (istek.status === 200) {
        başarıSonucundaFonk(istek.cevabı);
      } else {
        hataSonucundaFonk(Error('Resim yüklenemedi; hata kodu:'
                     + istek.hataKodu));
      }
    };
    istek.onerror = function() {
      hataSonucundaFonk(Error('Bir bağlantı hatası oluştu.'));
    };
    istek.send();
  });
}</pre>

<p>Daha fazla detaylı bilgi için {{jsxref("Promise")}} sayfasına bakınız.</p>

<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>