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
340
Promise
howdy39
June 15, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
460
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
84
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.2k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
590
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
610
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
カラーユニバーサルデザイン / color universal design
howdy39
0
840
Geolocation API
howdy39
0
99
Other Decks in Programming
See All in Programming
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
技術を改善し続ける
gumioji
0
120
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.2k
Rubyと自由とAIと
yotii23
6
1.7k
Rails アプリ地図考 Flush Cut
makicamel
1
130
Ça bouge du côté des animations CSS !
goetter
2
150
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
A Tale of Four Properties
chriscoyier
158
23k
How STYLIGHT went responsive
nonsquared
98
5.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Music & Morning Musume
bryan
46
6.4k
Docker and Python
trallard
44
3.3k
Thoughts on Productivity
jonyablonski
69
4.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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