Promiseの基本的な使い方について

javascript

setTimeout 使った処理調整しようとして検索かけてる最中、下記の記事にぶちあたって脱線しました。

setTimeout はダサいぞ。JavaScript Promise を使って処理を順番に実行しよう

そういえば Promise ちゃんと理解していなかったっけ…。

基本的な記述

let executor = (resolve, reject) => {
  console.log("👻1");
  //resolve,  rejectいずれかを実行しないと後述のthenの処理がはしらず
  resolve("A");
};
let promiseObj = new Promise(executor);
promiseObj
  .then(
    // executor内のresolve,(reject)に渡した引数の内容が
    // promiseオブジェクトのthen()で実行する関数に渡る。
    // この例ではstrとしています。 イベントオブジェクトみたい。
    (str) => {
      console.log("👻2: 受け取った値 …", str); // A
      // returnするのがPromiseオブジェクトのとき、
      // コンストラクタ内の処理が完了するまで処理がとまる
      // この場合は一秒後のresolve()実行で次のthen()にうつる
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(str + "B");
        }, 1000);
      });
    }
  )
  .then((str) => {
    console.log("👻3: 受け取った値 …", str); // AB
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        //ランダムで失敗させてみる
        let random = ~~(Math.random() * 3);
        if (random > 0) {
          resolve(str + "C");
        } else {
          reject(); //catchの処理へとぶ
        }
      }, 1000);
    });
  })
  .then((str) => {
    console.log("👻4: 受け取った値 …", str); // ABC
    return str + "D";
  })
  .then((str) => {
    console.log("👻5: 最終結果 …", str); // ABCD
  })
  .catch((str) => {
    console.log("👻失敗しちゃった");
  });

Promise を使う - JavaScript | MDN

たくさんあって全部は理解しきれていないけど

  • then 関数の引数はオプション(必須ではない)です。また、catch(failureCallback) は then(null, failureCallback) の短縮形です。

  • 重要: コールバック関数から処理結果を返すのを忘れないでください。さもないと後続のコールバック関数からその処理結果を利用することができなくなります (アロー関数を使った () => x は () => { return x; } の短縮形です)。

思い出すのは$.ajax()の戻り値

Promise がもってる then()ってメソッド jQuery の ajax 処理でよく使うし機能も一緒。
でも$.ajax() の戻り値 は Promise オブジェクト とは違うらしい？

toString.call(new Promise(()=>{})) // Promise
toString.call($.ajax()) // Object

Object だった。 Promise 風に動くよう拡張された Object ってことだね。 以下公式の説明。

jQuery.ajax() | jQuery API Documentation

jQuery.ajax( url [, settings ] ) Returns: jqXHR

戻り値はjqXHRオブジェクト

The jqXHR objects returned by \$.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise

jqXHRはPromiseのすべての機能をそなえる

参考・メモ