LoginSignup
132
130

More than 5 years have passed since last update.

Promiseに関するパターンや命名規則

Last updated at Posted at 2015-04-27

やや自己流含む。

getXxx/fetchXxx

getXxxは同期、fetchXxxはPromiseということにしている。とくに非同期の取得系はfetchということに決め打ってる。

GETリクエストであることを明示したいときにややこしいという問題はあるが、そのケースは少なく、JS内で同期/非同期を明示したいことの方が多い。

例:

fetchMyObject().then(data => console.log(data));

非同期の副作用系はput/post/sync/send/uploadとかそのあたりを適当に使う。

Promise( (done, reject) => {..})

恐らく仕様的に正しいワードは fulfill, reject なのだが、fulfillはタイプ数が妙に多いのと、llが多くタイポしやすく、またタイポが発見しづらいので、自分は慣習的にdoneを使っている。

追記: fulfillよりもresolveの方が仕様に沿ってるっぽいhttp://people.mozilla.org/~jorendorff/es6-draft.html#sec-promise-executor

例:

new Promise(done =>{
  setTimeout(done, 1000);
});

これはjQuery.deferredの風習を真似ているといえばそう。結構悩ましいところではある。

~ing

promiseを変数に入れる必要がある際は進行形にする。自己流。あんまりみない。そもそも一次変数に入れる必要がある際が少ないのだが、Promise.allとか使う時にやる。

例:

let fetching = fetch('/hoge/fuga');
fecthing.catch()

jQuery.deferredでよくみたコードは dfd とか単に dを使っていた。あれはd.resolve()みたいなAPIで、正確には対応するのはPromise.deferだろうが…

.ready

あるオブジェクトが使用可能かどうかで, .ready にpromiseオブジェクトを持たせておくケースがある。こういうパターン。

class MyFetcher {
  constructor(){
    this.ready = Promise.defer();
    setTimeout(() => this.ready.resolve(), 1000);
  }
}
let fetcher = new MyFetcher();
fetcher.ready.then(()=>{});

これは ServiceWorkerのAPIで navigator.serviceWorker.ready.then(...) みたいになってるのを真似した。標準APIを真似るのは統一感をもたらすので良い。
とはいえファクトリメソッドでもいいといえばそう。ライブラリ提供側で裏側で初期化プロセス走らせたい時に使うかもしれない。

インデント

行頭.thenになるような形。単純な関数コールの時はArrowFunctionのブロックを取らない形を許す。

fetch(url)
.then(data => {
  console.log(data);
  return fetch(url2, data);
})
.then(data => fetch(url3));

結果的にブロックを取らないような関数コール一行になるようにリファクタすることでコードの見通しがよくなることが多かった。あくまで制御フローだけを扱えると綺麗。

一行目でPromiseを返す関数

coffeeや関数をarrow functionで書く時にやる。

let func = () => new Promise(done => {
  // 長い関数
});

この関数がPromiseであることが自明になる反面、どこが非同期なのかわかりづらいという問題がある。
人によって好き嫌いがあると思う。

ツッコミ待ちです。

132
130
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
132
130