Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Promise
Search
howdy39
June 15, 2018
Programming
1
380
Promise
howdy39
June 15, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
540
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
170
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.5k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
650
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
670
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.6k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
カラーユニバーサルデザイン / color universal design
howdy39
0
920
Geolocation API
howdy39
0
110
Other Decks in Programming
See All in Programming
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
400
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Site-Speed That Sticks
csswizardry
10
690
KATA
mclloyd
30
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Making Projects Easy
brettharned
116
6.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
Promise 2018/06/15 第9回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)
Promise • PromiseはJavaScriptのオブジェクト • 処理が終わったら教えるよという 約束 • 非同期処理を統一されたインターフェースで書ける • コールバック地獄の回避につかえる
• ES2015で追加 https://caniuse.com/#search=promise IE以外は使える・・・ →IEに対応するなら 要 Polyfill (es6-promise etc
Promiseの基本
Promiseの基本 // Promiseオブジェクトを作成 const promise = new Promise((resolve, reject) =>
{ // 何らかの処理(非同期処理) if (解決時) { resolve('解決'); } else { reject(new Error('棄却')); } });
Promiseの基本 const promise = new Promise((resolve, reject) => { /*
省略 */ }); // Promiseオブジェクトの結果により処理を実行 promise .then(value => { console.log('then', value); // resolve()が呼ばれた場合 }) .catch(value => { console.log('catch', value); // reject()が呼ばれた場合 });
Promiseオブジェクトの作り方 その1
new Promise(fn) const promise = new Promise((resolve, reject) => {
// 何らかの処理 });
Promiseオブジェクトの作り方 その2
Promise.resolve() Promise.resolve()は解決したPromiseオブジェクトを返す ※次の1と2は同じ 1. const promise = Promise.resolve('howdy39'); 2. const
promise = new Promise((resolve) => { resolve('howdy39') });
Promise.reject() Promise.reject()は棄却したPromiseオブジェクトを返す ※次の1と2は同じ 1. const promise = Promise.reject('howdy39'); 2. const
promise = new Promise((resolve, reject) => { reject('howdy39') });
Promiseオブジェクトの作り方 その3
Fetch 等のPromiseを返す関数など const promise = fetch('https://api.github.com/orgs/topgate');
Promiseオブジェクトが持つメソッド
Promiseオブジェクトが持つ2つのメソッド Promise#then(onFulfilled, onRejected) 解決時はonFulfilledハンドラの処理が呼ばれる 棄却時はonRejectedハンドラの処理が呼ばれる Promise#catch(onRejected) Promise#then(undefined, onRejected) のシンタックスシュ ガー
then()もcatch()、どちらもPromiseオブジェクトを返す
メソッドチェーン
メソッドチェーン Promiseはthenメソッドを使ってメソッドチェーンにできる ※thenメソッドの戻りがPromiseオブジェクトだから Promise.resolve() // 解決したPromise .then(() => console.log('aaa')) .then(()
=> console.log('bbb')) .then(() => console.log('ccc'));
次のPromiseに値を渡す(値をreturn) Promise.resolve() .then(() => { console.log('aaa'); return 'howdy39'; // 値をreturnすればOK
}) .then((value) => console.log('bbb', value)) .then(() => console.log('ccc'));
次のPromiseに値を渡す(Promiseをreturn) Promise.resolve() .then(() => { console.log('aaa'); return Promise.resolve('howdy39'); // Promiseをreturn
}) .then((value) => console.log('bbb', value)) .then(() => console.log('ccc'));
次のPromiseに値を渡す(fetchをreturn) Promise.resolve() .then(() => { console.log('aaa'); return fetch('https://api.github.com/orgs/topgate'); }) .then(response
=> { console.log('bbb'); return response.json(); // Response#json()はPromiseを返す }) .then(json => console.log('ccc', json));
棄却時のハンドリング
catch()で棄却をハンドリング Promiseはcatchメソッドを使って棄却時のハンドリングをする Promise.reject(new Error('my error')) // 棄却したPromise .then(() => console.log('aaa'))
.then(() => console.log('bbb')) .catch((error) => console.log('ccc', error)) .then(() => console.log('ddd'));
複数のPromiseを扱う
Promise.all()
Promise.all() Promiseの配列を指定すると並列に実行される すべてのPromiseが解決するとthenの処理が呼ばれる いずれかのPromiseが棄却するとcatchの処理が呼ばれる Promise.all([Promise1, Promise2, Promise3]);
Promise.all([ new Promise(resolve => { console.log('aaa'); resolve(); }), new Promise(resolve
=> { console.log('bbb'); resolve(); }), ]).then( () => console.log('ccc'), // 解決時の処理 ).catch( (error) => console.log('ddd', error) // 棄却時の処理; );
Promise.all()で複数の値を受け取る
分割代入を使うと楽 Promise.all([ Promise.resolve('aaa'), Promise.resolve('bbb'), Promise.resolve('ccc'), ]).then(values => { const [a,
b, c] = values; console.log('a', a); console.log('b', b); console.log('c', c); });
いずれかのPromiseが棄却
Promise.race()
Promise.race() Promiseの配列を指定すると並列に実行される いずれかのPromiseが解決するとthenの処理が呼ばれる いずれかのPromiseが棄却するとcatchの処理が呼ばれる Promise.race([Promise1, Promise2, Promise3]); 使う機会はあんまりなさそう
Promise.race([ new Promise(resolve => { console.log('aaa'); resolve(); }), new Promise(resolve
=> { console.log('bbb'); reject(new Error('bbb error')); }), ]).then( () => console.log('ccc'), // 解決時の処理 ).catch( (error) => console.log('ddd', error) // 棄却時の処理; );
おまけ
Promise#finally() Promiseオブジェクトにはthenとcatchの他にfinallyも存在 ES 2018 で実装 http://kangax.github.io/compat-table/es2016plus/#test-Promis e.prototype.finally
finallyは解決/棄却に関係なく呼ばれる Promise.resolve() .then(() => Promise.reject(new Error('my error'))) .catch(error => console.log('error',
error)) .finally(() => console.log('finally222'));
まとめ 1. Promiseを使うと非同期処理がきれいに書ける 2. fetch はPromiseを返す 3. Promise#all()で非同期処理をまとめてかける
参考 JavaScript Promiseの本 http://azu.github.io/promises-book Promise | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise.prototype |
MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype 今更だけどPromise入門 https://qiita.com/koki_cheese/items/c559da338a3d307c9d88 JavaScript の Promise https://developers.google.com/web/fundamentals/primers/promises