Promiseとは その３ 非同期通信

Promise:

Promise内で非同期通信の仕方

Promiseを順に読んだあと、Ajaxを読むと一撃でわかるよ。 Ajax

ただただPromiseオブジェクトのなかにxhr = XMLHttpRequest()インスタンスを作成して通信させればできちゃいます。

function getUrl(url) {

  //Promiseインスタンスを作成して返す
  return new Promise((resolve, reject) => {

    //非同期通信するためにXMLHttpRequestのインスタンスを作成
    let xhr = XMLHttpRequest();

    xhr.open("GET", url);

    //リクエストが完了した時
    xhr.onload = () => {

      //statusコード確認
      if (xhr.status === 200) {
　　　　　
        //resolveの場合の処理
        resolve(xhr.response);

      } else {

        //rejectの場合の処理
        reject(new Error(xhr.statusText));
      }
    };

    //リクエストが失敗した時
    xhr.onerror = () => {
      reject(new Error(xhr.statusText));
    };

    //通信開始
    xhr.send();
  });
}

function getFirstItem() {

  //getUrl("/items")でデータ取得後、thenのitemsに取得したデータが渡される。
  return getUrl("/items").then((items) => {

    //取得した情報をもとにURL作成
    return getUrl("/items/" + items[0].id);
  });
}

getFirstItem().then((item) => {

　//
  成功時の処理(item);

}).catch((e) => {

  //エラー処理
  console.error(e);

});

ここでcatch((e) => {})を利用しているが、これはthen(null, (e) => {});と同義。 then()のチェーンの最後に付けておけば、一連の処理中にreject()で明示的に処理失敗を宣言した場合だけでなく、予想外のエラーも拾ってくれる。