風邪が長引いてランニングも勉強もちょっとさぼりぎみ。いう時期ってあるよね。前回の続き前回、以下の処理をcallback関数を使って実現しました。www.tohuandkonsome.siteファイルを読み込む読み込んだファイルの内容のチェックをするチェックが通れば、/sampleにGETリクエストを飛ばす上記のリクエストが終わったら、/otherにリクエストを飛ばす実際、書いてみると、どの処理が実行されるのかがわかりにくい、という問題を実感することができました。Promiseを使って書き直したいと思います。前回の続き前回のファイル読み込みPromiseを使ったファイル読み込みファイルのチェックサーバーにリクエストを投げるサーバーリクエストにaxiosを使う前回のファイル読み込み前回は、こんな感じでファイルを読み込むReadFile関数を作成していました。ファイル読み込みが終わった後の処理は、callback関数を渡すことで実現していました。reader.readAsText(file)}ReadFile.jsを実際に使っている処理はこんな感じでした。},Promiseを使ったファイル読み込みさっそくPromiseを使ってみます。いっても簡単で、Promiseオブジェクトを返すようにしてあげるだけです。実際の処理は、Promiseオブジェクトの引数として書きます。処理が正常に終わったときにresolve()を書いてあげます。処理がエラーの場合はreject()を書くのですが、今回は面倒なので省略しちゃってます。})}上記の関数を実際に呼んでみます。以下のように、ReadFileを呼んだ後に.then()と.catch()を使います。},.then()はReadFile関数内でresolveした場合に実行される処理を書きます。.catchはReafFile関数内でrejectした場合に呼ばれる処理になります。ファイルのチェックファイルのチェックは、以下のように.then()に続けて書くこともできます。ここではファイルのチェック処理もPromiseを使うことで、さらに見通しをよくしようと思います。//ここにtextの内容をチェックする処理を書く。},まず、ファイルのチェック処理もファイル読み込みと同様の形でモジュール化しておきます。})}そうしたら、以下のようにReafFile関数の.then()内で呼ぶことにします。Validateするところになります。Promiseオブジェクトをreturnしないとその後のthen()が順番通りに動いてくれません。サーバーにリクエストを投げるここまでくると後は作業になります。前回作ったXhr.jsもPromiseを使います。こんな感じにしました。})}使う際も以下のような形になります。},これで、上から下に処理が流れるということが前回よりもだいぶはっきりしました!サーバーリクエストにaxiosを使うaxiosはPromiseオブジェクトを返す便利なAjaxリクエストができるモジュールになります。使い方も、今まで使っていたXhr.jsを置き換える以下のように置き換えるだけで使うことができます。2018年明けましておめでとうございます。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。