React上級コース、やっとサーバ側（Ruby on Rails）の設定が終わってフロントエンド側（React）の学習スタートです。Mac用教材ですが、これまでのところWindowsでも無事クリアできています。さて今日の各駅停車は...

axiosはPromiseベースであること、です。つまりaxiosを使う側でnew Promiseなどしなくても、非同期処理を実装することができます。

Promiseって何ぞ。
というわけでJavaScript初心者でもわかるPromise講座でお勉強です。凄く簡単に言うとPromiseは処理の順序に「お約束」を設定するものだそうで。JavaScriptは普通に書くと

console.log("1番目");

setTimeout(() => {
  console.log("2番目(1秒後に実行)");
}, 1000);

console.log("3番目");

// 実行結果
// 1番目
// 3番目
// 2番目(1秒後に実行)

上記のように順序を待たず処理が進んでしまうのですが、Promiseを使うと

console.log("1番目");

new Promise((resolve) => {
  setTimeout(() => {
    console.log("2番目(1秒後に実行)");
    resolve();
  }, 1000);
}).then(() => {
  console.log("3番目");
});

// 実行結果
// 1番目
// 2番目(1秒後に実行)
// 3番目

このように処理の順序を設定できる、と。
さらに、処理が成功したときはresolved: 解決済みとしてthenでコールバック処理、失敗したときはrejected: 拒否としてcatchでコールバック処理できる。
初心者にもわかるPromiseの使い方によると

・Promiseは処理が成功すればresolveを返し、失敗ならrejectを返す
・Promiseを使うと、ネストを深くせずに非同期処理のコールバック関数が書ける
・チェインを使うことで、複数の処理を連続して処理できるようになる
・allはすべての非同期処理が完了した時点で、resolveを返す
・catchを使い、エラーが発生した時点でエラーを返すようにできる

非同期処理時に威力を発揮するのがPromiseである、と。
こんな便利な記述、なんで今まで使わなかったのだろうと思ったら...IEが軒並み全滅、非対応でした。IE11、早くこの世から消えて無くなれー。