【JavaScript】 Promiseを一から学ぶ Promiseで作るモダンな非同期処理 | エンジニアBLOG
【JavaScript】 Promiseを一から学ぶ Promiseで作るモダンな非同期処理 JavaScriptの特徴的な動作として知られる「非同期処理」。 よくわからないで使っていると予期しない動きをしてしまうため、JavaScriptを学ぶうえで大きな障害になることもあるクセモノです。 今回は、EcmaScript2015から導入された「Promise」オブジェクトを使って非同期処理をシンプルに書く方法をご紹介します。 Promiseを上手に使えるようになれば、自分の期待どおりの動きを実現することができるようになるはず。ぜひマスターしてください！ Promiseとは？ EcmaScript2015から導入された、比較的新しい技術 非同期処理を行う際に使い、「成功時」「失敗時」の処理を明示的に切り分けて書くことが可能 非同期処理をメソッドチェーンで書くことができるようになるので、ソース
とほほのPromise入門 - とほほのWWW入門
Promise は、JavaScript や Node.js において、非同期処理のコールバック関数をエレガントに記述するための仕組みです。英語の promise は、「制約」、「保障」などの意味を持ちます。Promise は、Chrome 63, Firefox 58, Safari 11.1, Edge 18, Node.js 4.* から利用可能です。IE11 ではサポートされていません。 JavaScript や Node.js では、ブロックする(処理が終わるまで待ち合わせる)関数よりも、非同期関数(処理の完了を待たず、処理が完了した時点でコールバック関数が呼び出される)の方が多様されます。ここで、例えば、膨大な演算(実は単に元の数を2倍するだけ)を行う非同期関数 aFunc1() があるとします。下記は、100の2倍を求める非同期関数の使用例です。
全部約束 Promise.all - 非同期処理を効率よく並列実行するために - 銀の弾丸
photo credit: EpicTop10.com Promise via photopin (license) 互いに独立した複数の非同期処理は、 Promise.all で待ちましょうね！ってことを書いています。 ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）) 田中 賢一郎(著) 新品 ￥1,650 24個の評価 Amazon.co.jpで詳細を見る 例えば、複数のREST APIの結果を得たい場合、以下のように書きがちです。 一見問題なく見えますが、処理速度的にちょっと無駄なんですね。 実際ワタシも細かいことを気にせずにザクザクとコードを書いている時はこのように書いていて、あとから見直すことが多々あります。 async function sample() { const
jQuery.DeferredとかjQuery.whenの使い方について - 一から勉強させてください
今回はjQuery.Deferredとかそれに関連するjQuery.whenとかのことをざっくり書こうと思います。 まずざっくりとDeferredについて。 Deferredオブジェクトはunresolved, resolved, rejectedのいずれかの状態をもつオブジェクトです（デフォルト値はunresoleved）。 そして、 ・unresolved状態→後続の処理は実行されない。 ・resolved状態→resolvedになった時用の処理（要するにdone）が実行される。 ・rejected状態→rejectedになった時用の処理（要するにfail）が実行される。 といった具合に、状態に応じて後続の処理を管理してくれます（ちなみに地味に重要なんですが、一度状態が変わったDeferredオブジェクトはもう二度と別の状態には変わりません。役目終了です）。 これによって、実行の順番を
jQueryのDeferredの基本的な使い方メモ - Qiita
new $.Deferred() で Deferred のオブジェクトを生成する。 非同期処理が完了した時点で、生成しておいた Deferred オブジェクトの resolve() メソッドを実行する。 Deferred オブジェクトの promise() メソッドを実行し、その戻り値（promise オブジェクト）の then() メソッドに非同期処理の後に実行したい処理を渡す。 then() はメソッドチェーンができるので、 var d = new $.Deferred(); async(function() { console.log('async'); d.resolve(); }); d.promise() .then(function() { console.log('hoge'); }) .then(function() { console.log('fuga'); });
setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？ 以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[archived] axiosを乗りこなす機能についての知見集 - Qiita![[archived] axiosを乗りこなす機能についての知見集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/583ec1354ea8325181eb276736da3bb0366cb4bc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D380%2526txt%253D%25255Barchived%25255D%252520axios%2525E3%252582%252592%2525E4%2525B9%252597%2525E3%252582%25258A%2525E3%252581%252593%2525E3%252581%2525AA%2525E3%252581%252599%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525AB%2525E3%252581%2525A4%2525E3%252581%252584%2525E3%252581%2525A6%2525E3%252581%2525AE%2525E7%25259F%2525A5%2525E8%2525A6%25258B%2525E9%25259B%252586%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D9fd6ce4b873b0d9b4303be66ddf96230%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D500%2526txt%253D%252540terrierscript%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253Ded893b7eabdaa75da91d28680de5bf50%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Dd9427075b852d6cdee41a35d51f55c6f)
今更だけどPromise入門 - Qiita