CINXE.COM
<!DOCTYPE html><html lang="tr" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "TRY";</script><script>window.countryCode = "us";</script><script>window.rateShopTo = {"TRY":41.010376742454085,"EUR":1,"USD":1.0793366397012396,"AMD":422.57935336941915};</script><title itemprop="name">Promise Zinciri</title><link href="/pack/styles.100020a0bc7cf13be729.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><!-- chrome autotranslate is enabled only for "en" main version--><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://tr.javascript.info/promise-chaining"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://tr.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Promise Zinciri"><meta property="og:image" content="https://tr.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Promise Zinciri"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://tr.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/promise-basics"><link rel="next" href="/promise-error-handling"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 32184394;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.6423bccabee4f56b6ff8.js"></script><script src="/pack/head.fb50118fab5c8ea51243.js" defer></script><script> function loadScript(src) { return new Promise(function(resolve, reject) { let script = document.createElement('script'); script.src = src; script.onload = () => resolve(script); script.onerror = () => reject(new Error("Script load error: " + src)); document.head.append(script); }); } </script> <style> .promise-avatar-example { border-radius: 50%; position: fixed; left: 10px; top: 10px; } </style> <meta property="og:title" content="Promise Zinciri"><meta property="og:type" content="article"><script src="/pack/tutorial.ba5237b93f596f9d03dc.js" defer></script><script src="/pack/footer.59b83436a1264feec8f6.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><!--[if IE]><div style="color:red;text-align:center">Üzgünüz, Internet Explorer desteklenmemektedi lütfen daha yeni bir tarayıcı kullanın.</div><![endif]--><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "tr";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>TR</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/promise-chaining"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/promise-chaining"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/promise-chaining"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/promise-chaining"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fr.javascript.info/promise-chaining"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/promise-chaining"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/promise-chaining"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ja.javascript.info/promise-chaining"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ko.javascript.info/promise-chaining"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/promise-chaining"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://tr.javascript.info/promise-chaining"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/promise-chaining"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://zh.javascript.info/promise-chaining"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text"><p>Bu açık-kaynaklı projenin tüm dünyada kullanılabilir olmasını istiyoruz.</p> <p>Kendi dilinizde çeviriye <a href="https://javascript.info/translate">yardım edebilirsiniz</a>!</p> </div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">Satın al</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="Javascript.info'da ara" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Ara</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="Eğitimde ara" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Ara</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Eğitim haritası</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">Paylaş</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fpromise-chaining" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ftr.javascript.info%2Fpromise-chaining" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/promise-chaining">عربي</option><option value="https://javascript.info/promise-chaining">English</option><option value="https://es.javascript.info/promise-chaining">Español</option><option value="https://fa.javascript.info/promise-chaining">فارسی</option><option value="https://fr.javascript.info/promise-chaining">Français</option><option value="https://id.javascript.info/promise-chaining">Indonesia</option><option value="https://it.javascript.info/promise-chaining">Italiano</option><option value="https://ja.javascript.info/promise-chaining">日本語</option><option value="https://ko.javascript.info/promise-chaining">한국어</option><option value="https://learn.javascript.ru/promise-chaining">Русский</option><option value="https://tr.javascript.info/promise-chaining" selected>Türkçe</option><option value="https://uk.javascript.info/promise-chaining">Українська</option><option value="https://zh.javascript.info/promise-chaining">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="74" max="86" data-tooltip="86'in 74'i dersi"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">Eğitim</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>JavaScript Dili</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/async"><span>Promises, async/await</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Eğitim","item":"https://tr.javascript.info/"},{"@type":"ListItem","position":2,"name":"JavaScript Dili","item":"https://tr.javascript.info/js"},{"@type":"ListItem","position":3,"name":"Promises, async/await","item":"https://tr.javascript.info/async"}]}</script></ol><div class="updated-at" data-tooltip="Son güncelleme 15 Aralık 2021"><div class="updated-at__content">15 Aralık 2021</div></div></div><h1 class="main__header-title">Promise Zinciri</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Promise Zinciri"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><p><a href="/callbacks">Callback fonksiyonlarına giriş</a> bölümünde bahsettiğimiz probleme tekrar göz atalım. Burada bir seri asenkron görevin ardaşık bir biçimde çağırılması gerekmekte. Örneğin script dosyalarının yüklenmesi. Bunu Promise ile nasıl yapabiliriz?</p> <p>Promise bize bunu gerçekleştirebilmemiz için bazı yöntemler sunmakta.</p> <p>Bu bölümde Promise Zinciri’nden bahsedeceğiz.</p> <p>Şöyle:</p> <div id="70rd88abvt" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { // (**) alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return result * 2; }).then(function(result) { alert(result); // 4 return result * 2; });</code></pre> </div> </div> </div><p>Buradaki yaklaşım, elde edilen sonuçların <code>.then</code> zincirinde tekrar işleme alınmasıdır.</p> <p>Genel akış şu şekilde:</p> <ol> <li>İlk Promise 1 saniye içerisinde sonuçlanır <code>(*)</code>,</li> <li>Sonrasında ilk <code>.then</code> işleyicisi çağrılır <code>(**)</code>.</li> <li>Bu fonksiyondan dönen değer bir sonraki <code>.then</code> işleyicisine aktarılır <code>(***)</code></li> <li>…ve zincirleme süreç böyle işlemeye devam eder.</li> </ol> <p>Sonucun işleyiciler arasında aktarılmasıyla birlikte <code>alert</code> fonsiyonlarının çağırıldığını ve sırasıyla <code>1</code> → <code>2</code> → <code>4</code> çıktılarını verdiğini görürüz.</p> <figure><div class="image" style="width:165px"> <div class="image__ratio" style="padding-top:205.45454545454547%"></div> <object type="image/svg+xml" data="/article/promise-chaining/promise-then-chain.svg" width="165" height="339" class="image__image" data-use-theme> <img src="/article/promise-chaining/promise-then-chain.svg" alt="" width="165" height="339"> </object> </div></figure><p><code>promise.then</code> çağrısı bir Promise döndürür, böylelikle bir sonraki <code>.then</code> işleyicisi çağırılabilir.</p> <p>İşleyiciden bir değer döndüğünde, bu Promise’ in sonucu olur. Böylece bir sonraki <code>.then</code> işleyicisi bu değer ile çağrılır.</p> <p>Promise Zinciri şöyle başlamakta:</p> <div id="zptfr346t7" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); }).then(function(result) { alert(result); return result * 2; // <-- (1) }) // <-- (2) // .then…</code></pre> </div> </div> </div><p><code>.then</code> işleyicisinden dönen değer yine Promise’ dir, böylece zinciri oluşturacak olan diğer <code>.then</code> işleyicileri <code>(1)</code> ve <code>(2)</code> değerleri üzerinden çağrılabilmektedir.</p> <p><strong>Aşağıda genel olarak yapılan bir hata görülmekte. Tanımlanmış olan Promise objesinin bir değişkene atanıp bunun üzerinden tekil şekilde <code>.then</code> işleyicisinin çağırılması bir Promise Zinciri oluşturmaz.</strong></p> <p>Örnek:</p> <div id="pqwwe4ms44" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let promise = new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); }); promise.then(function(result) { alert(result); // 1 return result * 2; }); promise.then(function(result) { alert(result); // 1 return result * 2; }); promise.then(function(result) { alert(result); // 1 return result * 2; });</code></pre> </div> </div> </div><p>Burada tek bir Promise objesine birden fazla işleyicinin eklenmesi ve bu işleyicilerin birbirleri arasında veriyi aktarmadan, yanlızca ilk dönütü birbirlerinden bağımsız olarak işledikleri görülmektedir.</p> <p>Burada durumu niteleyen akışı görebiliriz (bunu yukarıdaki zincir akışını göz önüne alarak inceleyiniz):</p> <figure><div class="image" style="width:373px"> <div class="image__ratio" style="padding-top:40.75067024128686%"></div> <object type="image/svg+xml" data="/article/promise-chaining/promise-then-many.svg" width="373" height="152" class="image__image" data-use-theme> <img src="/article/promise-chaining/promise-then-many.svg" alt="" width="373" height="152"> </object> </div></figure><p>Aynı Promise üzerindeki tüm <code>.then</code> işleyicileri yukarıdaki örnekte aynı sonucu vermekte. Yani <code>alert</code> fonksiyonu sürekli olarak <code>1</code> değerini gösterir.</p> <p>Genel olarak uygulamalarımızda bir Promise üzerinde birden fazla işleyiciye nadiren ihtiyaç duyulur. Fakat, zincir yapısı ise çok daha sık şekilde kullanılmaktadır.</p> <h2><a class="main__anchor" name="promise-dnt" href="#promise-dnt">Promise Dönütü</a></h2><p>Normal koşullarda <code>.then</code> işleyicisinden dönen değer doğrudan sonraki işleyiciye bir parametre olarak aktarılır. Fakat burada bir istisna var.</p> <p>Şayet dönen değer yine bir Promise ise zincirleme akış bu Promise sonuçlanana dek durur, yeni değerin gelmesini bekler. Sonrasında gelen dönüt bir sonraki <code>.then</code> işleyicisine aktarılır.</p> <p>Örnek:</p> <div id="eeyqa204ph" data-trusted="1" class="code-example" data-highlight="[{"start":8,"end":10}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); }).then(function(result) { alert(result); // 1 return new Promise((resolve, reject) => { // (*) setTimeout(() => resolve(result * 2), 1000); }); }).then(function(result) { // (**) alert(result); // 2 return new Promise((resolve, reject) => { setTimeout(() => resolve(result * 2), 1000); }); }).then(function(result) { alert(result); // 4 });</code></pre> </div> </div> </div><p>Buradaki ilk <code>.then</code> işleyicisi <code>alert</code> fonksiyonu ile <code>1</code> değerini gösterir ve yeni bir Promise objesi oluşturarak döndürür. Bir sonraki <code>.then</code> işleyicisi <code>result</code> parametresi olarak gönderdiğimiz Promise’ i alır. 1000ms sonrasında bu Promise sonuçlanır ve kendi tanım aralığındaki <code>result</code> değerini kullanarak <code>result * 2</code> değerini döner.<code>(**)</code> satırında tanımlanmış olan işleyici içerisindeki <code>alert</code> fonksiyonu çalışır ve <code>2</code> değerini gösterir.</p> <p>Sonuç olarak <code>alert</code> fonksiyonları birer saniyelik gecikmeyle birlikte sırasıyla 1 → 2 → 4 çıktılarını gösterir.</p> <p>Promise dönütü oluşturabiliyo olmak bize asenkron zincir yapıları oluşturma kolaylığı sağlar.</p> <h2><a class="main__anchor" name="rnek-loadscript" href="#rnek-loadscript">Örnek: loadScript</a></h2><p>Yukarıda bahsettiğimiz zincir yapısını, önceki bölümlerde tanımladığımız <a href="/promise-basics#loadscript">previous chapter</a> örneğindeki içeriği kullanmak için tanımlayalım:</p> <div id="kz4gphln5v" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>loadScript("/article/promise-chaining/one.js") .then(function(script) { return loadScript("/article/promise-chaining/two.js"); }) .then(function(script) { return loadScript("/article/promise-chaining/three.js"); }) .then(function(script) { // scriptlerde tanımlı fonksiyonların // yüklendiğini doğrulamak için çağıralım one(); two(); three(); });</code></pre> </div> </div> </div><p>Arrow fonksiyon notasyonu kullanılarak daha kısa bir biçimde şöyle de yazılabilir:</p> <div id="bj1tm935tu" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>loadScript("/article/promise-chaining/one.js") .then(script => loadScript("/article/promise-chaining/two.js")) .then(script => loadScript("/article/promise-chaining/three.js")) .then(script => { // scriptler yüklendi, fonksiyonlar artık çağrılabilir one(); two(); three(); });</code></pre> </div> </div> </div><p>Burada her <code>loadScript</code> çağrısı bir Promise döndürmekte ve takip eden <code>.then</code> işleyicisi bu Promise değeri ortaya çıktığında çalışmakta. Böylelikle scriptler birbiri ardına yüklenebilmekte.</p> <p>Yukarıdaki kod bloğunun halen sade bir yapı halinde olduğuna da dikkat etmekte fayda var. Kod bloğu sağ tarafa doğru değil aşağı yönde genişleme göstermekte. Burada herhangi bir şekilde “kıyamet piramidi / callback cehennemi” yapısının oluşmadığını görebiliriz.</p> <p><code>.then</code> işleyicisini doğrudan <code>loadScript</code> fonksiyonu üzerinden de çağırabiliriz:</p> <div id="6ka8rm1i47" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>loadScript("/article/promise-chaining/one.js").then(script1 => { loadScript("/article/promise-chaining/two.js").then(script2 => { loadScript("/article/promise-chaining/three.js").then(script3 => { // script1, script2 ve script3 parametrelerine erişilebilir one(); two(); three(); }); }); });</code></pre> </div> </div> </div><p>Burada yukarıda bahsettiğimiz büyüme yönü bu kod bloğunda sağa doğru olmakta. Yani callback ile yaşadığımız sorunlar burada da oluşmaya başlayacaktır.</p> <p>Promise yapısını yeni kullanmaya başlayan kişiler bazen zincir yapısı hakkında fikir sahibi olmadıkları için yukarıdaki kod bloğuna benzer bir yapı kurabilirler. Fakat bu da kodun okunabilirliğini/sürdürülebilirliğini azaltmaktadır. Bundan dolayı zincir yapısının kullanımı tercih edilmelidir.</p> <p>Fakat bunun da istisnai olarak kullanılması gereken durumlar ortaya çıkabilmektedir. Örneğin; <code>script1</code>, <code>script2</code> ve <code>script3</code> parametrelerine en içteki işleyiciden erişilmesi gereken bir durumun oluşabilmesi gibi.</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">Thenable</span></div> <div class="important__content"><p><code>.then</code> işleyicisi herhangi bir “thenable” obje döndürebilir ve bu, aynı bir Promise objesi gibi işlem görür.</p> <p>Bir “thenable” objesi, üzerinde <code>.then</code> metodu tanımlı herhangi bir objedir.</p> <p>Buradaki düşünce, 3. parti kütüphanelere kendi Promise uyumlu objelerini geliştirebilme esnekliği sunmaktır. Bu kütüphaneler kendi istekleri doğrultusunda farklı metodları objelerine ekleyebilirler.</p> <p>Aşağıda bir “thenable” obje örneği mevcut:</p> <div id="c8bs2kgmvv" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>class Thenable { constructor(num) { this.num = num; } then(resolve, reject) { alert(resolve); // function() { native code } // this.num*2 değerini 1 saniye sonra çözümle setTimeout(() => resolve(this.num * 2), 1000); // (**) } } new Promise(resolve => resolve(1)) .then(result => { return new Thenable(result); // (*) }) .then(alert); // 2 değerini 1000ms sonra gösterir</code></pre> </div> </div> </div><p>JavaScript <code>(*)</code> olan satırda <code>.then</code> tarafından dönen objeyi kontrol eder: eğer bu obje üzerinde <code>.then</code> metodu tanımlıysa <code>resolve</code> ve <code>reject</code> fonksiyonlarını parametre olarak <code>.then</code> fonksiyonuna sağlar ve bu metodlardan biri çağırılıncaya dek bekler.</p> <p>Yukarıdaki örnekte <code>resolve(2)</code> metodu <code>(**)</code> satırı yorumlandıktan 1 saniye sonra çağrılır. Ortaya çıkan sonuç sonrasında Promise Zinciri üzerinde aşağı doğru gidecektir.</p> <p>Bu özellik sayesinde Promise Zinciri özelliğine sahip objelerin yaratımı <code>Promise</code> objesinden kalıtılmak zorunda olmaksızın yapılabilir.</p> </div></div> <h2><a class="main__anchor" name="daha-kapsaml-bir-rnek-fetch" href="#daha-kapsaml-bir-rnek-fetch">Daha kapsamlı bir örnek: fetch</a></h2><p>Ön-yüz programla içinde promise çoğunlukla ağ üzerinde yapılan isteklerde kullanılır. Bunu gerçekleştiren bir örnekle devam edelim.</p> <p>Burada <a href="https://developer.mozilla.org/tr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch</a> metodunu uzak bir sağlayıcıdan veri almak için kullanacağız. Bu metod birçok parametreye sahip fakat basitçe kullanımı aşağıdaki gibi:</p> <div id="45tk2s2i4u" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let promise = fetch(url);</code></pre> </div> </div> </div><p>Bu, verilmiş olan <code>url</code> adresine bir istek yollar ve Promise döner. Promise, uzaktaki sağlayıcıdan istenen veriyi aldığında bir <code>response</code> objesi olarak çözümlenir.</p> <p>Tüm dönütü elde edebilmek için <code>response.text()</code> metodunu çağırmamız gerekir. Bu çağrı, uzak sunucudan tüm içerik alındıktan sonra çözümlenecek olan bir Promise döner.</p> <p>Aşağıdaki örnekte <code>user.json</code> dosyasına çağrı yapılmakta ve dönüt <code>alert</code> fonksiyonu ile gösterilmekte:</p> <div id="615v3xqbr2" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>fetch('/article/promise-chaining/user.json') // uzak sunucudan cevap geldiğinde aşağıdaki `.then` çalışır .then(function(response) { // response.text() tüm içeriği çözümleyecek olan promise' i döner // sonrasında içeriği indirir return response.text(); }) .then(function(text) { // ...ve uzak sunucudan gelen içerik alert(text); // {"name": "iliakan", isAdmin: true} });</code></pre> </div> </div> </div><p>Ayrıca <code>response.json()</code> metodu gelen veriyi doğruca JSON formatına çözümler. Örnekteki senaryoya daha uygun olduğundan kodda bu kısmı değiştirelim.</p> <p>Arrow fonksiyon kullanarak da daha sade bir biçime ulaşabilmek için kodu tekrar düzenleyelim.</p> <div id="qfoj7jobyj" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// yukarıdan farklı olarak response.json() kullanıyoruz fetch('/article/promise-chaining/user.json') .then(response => response.json()) .then(user => alert(user.name)); // iliakan</code></pre> </div> </div> </div><p>Şimdi de elde ettiğimiz kullanıcı verisiyle bir şeyler yapalım.</p> <p>Örneğin, Github sayfasına da bir istekte bulunarak kullanıcı profilini ve avatarını elde edebiliriz.</p> <div id="44i2dn4q41" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// user.json dosyasına istek yolla fetch('/article/promise-chaining/user.json') // json formatına dönüştür .then(response => response.json()) // GitHub sayfasına isteği yolla .then(user => fetch(`https://api.github.com/users/${user.name}`)) // dönütü json formatına dönüştür .then(response => response.json()) // kullanıcı avatar resmini (githubUser.avatar_url) 3 saniye boyunca göster .then(githubUser => { let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); setTimeout(() => img.remove(), 3000); // (*) });</code></pre> </div> </div> </div><p>Yukarıdaki kod bloğu istediğimiz şekilde çalışmakta fakat burada potansiyel bir sorun da mevcut.</p> <p><code>(*)</code> işaretli satıra bakıcak olursak, gösterdiğimiz avatar resmi DOM üzerinden silindikten sonra herhangi bir şey yapmak istiyorsak bunu nasıl yapabiliriz? Örneğin sayfa üzerde bu kullanıcının verilerini düzenlemek için bir form göstermek istiyor olalım. Mevcut durumda bunu yapamayız, çünkü son <code>.then</code> işleyicisi herhangi bir değer döndürmemekte. Bundan dolayı, tekrar <code>.then</code> fonksiyonu çağırılamaz.</p> <p>Mevcut zinciri genişletmek için bu işlem sonucunda bir promise döndürmemiz gerekir.</p> <p>Şöyle:</p> <div id="zqrerj7juj" data-trusted="1" class="code-example" data-highlight="[{"start":12,"end":12},{"start":4,"end":4}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>fetch('/article/promise-chaining/user.json') .then(response => response.json()) .then(user => fetch(`https://api.github.com/users/${user.name}`)) .then(response => response.json()) .then(githubUser => new Promise(function(resolve, reject) { let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); setTimeout(() => { img.remove(); resolve(githubUser); }, 3000); })) // triggers after 3 seconds .then(githubUser => alert(`Finished showing ${githubUser.name}`));</code></pre> </div> </div> </div><p>Yapılan değişiklikten sonra <code>img.remove()</code> metodu ayn şekilde 3 saniye sonra çalışacak. Fakat, sonrasında <code>resolve(githubUser)</code> ile kullanıcı bilgilerini bir sonraki zincirde kullanılabilmesi için çözümleyecek.</p> <p>Genel bir kural olarak, asenkron eylemler her zaman bir promise döndürmelidir.</p> <p>Bu, asenkron eylemlerden sonra gerçekleştirilecek işlemler için olanak sağlamaktadır. Şu anda, zincirin son işleyicisinden sonra herhangi bir genişlemeye ihtiyaç duymuyor olsak dahi, ileriye dönük olarak buna ihtiyacımız olabileceğini göz önüne almamız gerekir.</p> <p>Nihayetinde, kodu daha yönetilebilir parçalara ayrıştırarak tekrar kullanılabilir fonksiyonlarımızı yazıyoruz:</p> <div id="9g0yjv8i5h" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function loadJson(url) { return fetch(url) .then(response => response.json()); } function loadGithubUser(name) { return fetch(`https://api.github.com/users/${name}`) .then(response => response.json()); } function showAvatar(githubUser) { return new Promise(function(resolve, reject) { let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); setTimeout(() => { img.remove(); resolve(githubUser); }, 3000); }); } // fonksiyonları kullanıyoruz: loadJson('/article/promise-chaining/user.json') .then(user => loadGithubUser(user.name)) .then(showAvatar) .then(githubUser => alert(`Finished showing ${githubUser.name}`)); // ...</code></pre> </div> </div> </div><h2><a class="main__anchor" name="zet" href="#zet">Özet</a></h2><p>Eğer <code>.then</code> (ya da <code>catch/finally</code>) işleyicisi promise dönerse, zincirleme akış bu Promise sonuçlanana dek durur, yeni değerin gelmesini bekler. Promise çözümlendiğinde akış kaldığı yerden yeni değer ile devam eder.</p> <p>Genel bakış:</p> <figure><div class="image" style="width:659px"> <div class="image__ratio" style="padding-top:53.110773899848255%"></div> <object type="image/svg+xml" data="/article/promise-chaining/promise-handler-variants.svg" width="659" height="350" class="image__image" data-use-theme> <img src="/article/promise-chaining/promise-handler-variants.svg" alt="" width="659" height="350"> </object> </div></figure></div></article><div class="tasks formatted"><h2 class="tasks__title" id="tasks"><a class="tasks__title-anchor main__anchor main__anchor main__anchor_noicon" href="#tasks">Görevler</a></h2><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#promise-then-versus-catch" name="promise-then-versus-catch">Promise: then versus catch</a></h3><a class="task__open-link" href="/task/then-vs-catch" target="_blank"></a></div><div class="task__header-note"></div><div class="task__content"><div class="task__formatted"><p>Are these code fragments equal? In other words, do they behave the same way in any circumstances, for any handler functions?</p> <div id="zs3qb68b18" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>promise.then(f1).catch(f2);</code></pre> </div> </div> </div><p>Versus:</p> <div id="x13vtkea8r" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>promise.then(f1, f2);</code></pre> </div> </div> </div></div><button class="task__solution" type="button">çözüm</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>The short answer is: <strong>no, they are not the equal</strong>:</p> <p>The difference is that if an error happens in <code>f1</code>, then it is handled by <code>.catch</code> here:</p> <div id="h0bgxexasy" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>promise .then(f1) .catch(f2);</code></pre> </div> </div> </div><p>…But not here:</p> <div id="39s42fyhnn" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="Çalıştır" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="Korumalı alanda aç" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>promise .then(f1, f2);</code></pre> </div> </div> </div><p>That’s because an error is passed down the chain, and in the second code piece there’s no chain below <code>f1</code>.</p> <p>In other words, <code>.then</code> passes results/errors to the next <code>.then/catch</code>. So in the first example, there’s a <code>catch</code> below, and in the second one – there isn’t, so the error is unhandled.</p> </div></div><button class="close-button task__answer-close" type="button" title="kapat"></button></div></div></div></div></div></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/promise-basics" data-tooltip="Promise ( Söz )"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Önceki ders</span></a><a class="page__nav page__nav_next" href="/promise-error-handling" data-tooltip="Error handling with promises"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Bir sonraki ders</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">Paylaş</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fpromise-chaining" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ftr.javascript.info%2Fpromise-chaining" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Eğitim haritası</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">Yorumlar</a></h2><div class="comments__read-before"><span class="comments__read-before-link">yorum yapmadan önce lütfen okuyun...</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Eğer geliştirme ile alakalı bir öneriniz var ise yorum yerine <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">github konusu gönderiniz</a>.</li><li>Eğer makalede bir yeri anlamadıysanız lütfen belirtiniz.</li><li>Koda birkaç satır eklemek için <code><code></code> kullanınız, birkaç satır eklemek için ise <code><pre></code> kullanın. Eğer 10 satırdan fazla kod ekleyecekseniz <a href='https://plnkr.co/edit/?p=preview'>plnkr</a> kullanabilirsiniz)</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/tr.javascript.info\/promise-chaining","identifier":"\/promise-chaining"}); };</script><script>var disqus_shortname = "tr-javascript-info";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="Eğitim haritası"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Bölüm</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/async">Promises, async/await</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Ders menüsü</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#promise-dnt">Promise Dönütü</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#rnek-loadscript">Örnek: loadScript</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#daha-kapsaml-bir-rnek-fetch">Daha kapsamlı bir örnek: fetch</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zet">Özet</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#tasks">Görevler (1)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">Yorumlar</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Paylaş</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fpromise-chaining" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Ftr.javascript.info%2Fpromise-chaining" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/tr.javascript.info/blob/master/1-js/11-async/03-promise-chaining" rel="nofollow">GitHub'da düzenle</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025 Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">proje hakkında</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">iletişime geçin</a></li></ul></div></body></html>