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
290
Promise
howdy39
June 15, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
960
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
490
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
540
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.3k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.2k
カラーユニバーサルデザイン / color universal design
howdy39
0
700
Geolocation API
howdy39
0
92
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
180
Media Queries
howdy39
0
77
Other Decks in Programming
See All in Programming
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
AHC035解説
terryu16
0
710
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Rust.Nagoya #1
codemountains
0
170
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
英語
s_shimotori
1
220
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
5.9k
The World Runs on Bad Software
bkeepers
PRO
63
11k
How STYLIGHT went responsive
nonsquared
93
5k
The Invisible Side of Design
smashingmag
294
50k
The Cult of Friendly URLs
andyhume
75
5.9k
Docker and Python
trallard
37
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Designing for Performance
lara
604
67k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Designing with Data
zakiwarfel
96
5k
Speed Design
sergeychernyshev
9
270
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