jQuery $.Deferred, resolve, reject, promiseは11行のコードで暗記

jQueryのDeferredを11行で習得

jQueryには非同期の処理それぞれにPromiseを使用してオブジェクトの状態を伝播させていくための処理が存在する。

この処理の記述は$.DeferredをいうjQuery独自の記述方法を使用しているため使い慣れていないと使いづらい。

しかし、$.Deferred, resolve, reject, promiseは11行のコードでsleepDeferredの関数を作成するコードを暗記すれば簡単に扱えるようになるため、何も見ない状態で書けない人は暗記しておくと良いだろう。

$.Deferredを使用した作成手順

まずsleepDeferredという関数を作成する。(引数はms)

const sleepDeferred = ms => {

}

次に$.Deferredを定数に入れてreturn d.promise()で返すコードを記述。

const sleepDeferred = ms => {
  const d = new $.Deferred()

  return d.promise()
}

次にisFastという定数にms > 1000でboolean値を入れる。

次にsetTimeout内にmsが1000未満ならd.resolve(ms)、1000以上ならd.reject(ms)と記述する。

setTimeoutの時間はmsを利用する。

return d.promise()があればd.resolve(ms)またはd.reject(ms)でmsの値が返されるので、これで関数は完成だ。

const sleepDeferred = ms => {
  const d = new $.Deferred()
  const isFast = ms < 1000
  setTimeout(() => {
    isFast ? d.resolve(ms) : d.reject(ms)
  }, ms)
  return d.promise()
}

最後にsleepDeferredの引数に数値を入れてdoneとfailでつなげて実行結果を確認する。

msが1000未満ならd.resolve(ms)のためdoneで処理される。

msが1000未以上ならd.reject(ms)のためfailで処理される。

const sleepDeferred = ms => {
  const d = new $.Deferred()
  const isFast = ms < 1000
  setTimeout(() => {
    isFast ? d.resolve(ms) : d.reject(ms)
  }, ms)
  return d.promise()
}
sleepDeferred(2000)
  .done(ms => console.log(`${ms}ms fast!`))
  .fail(ms => console.log(`${ms}ms slow!`))

Promise(new $.Deferred())のサンプル

JavaScriptだけで作成したPromise

先程はnew $.Deferred()を利用してPromiseを作成したがJavaScriptだけでも下記のように書くことはできる。

こちらのコードはjQueryが使用されていないため、ブラウザのConsoleでもそのまま実行可能だ。

Deferredではなくnew Promiseが使用されてdone, failではなくthen, catchが使用されているなどの違いがあるが、逆に言うと今回のコードに関してはそれくらいの違いしかないため、書き方を合わせて覚えておくと良いだろう。※

const sleepDeferred = ms => {
  return new Promise((resolve, reject) => {
    const isFast = ms < 1000
    setTimeout(() => {
      isFast ? resolve(ms) : reject(ms)
    }, ms)
  })
}
sleepDeferred(2000)
  .then(ms => console.log(`${ms}ms fast!`))
  .catch(ms => console.log(`${ms}ms slow!`))

※正確にはjQueryを使用しないことによるブラウザ互換の違いや、Promise.all, $.whenなどの違いなどがあるが、今回の記事では割愛。