Vue＋TypeScirptでPromise.allをaxiosで並列実行を試した件
Vue+TypeScriptをフロントエンドで使う中で、
APIの処理を並列処理させたいと考え、
Promise.allを使って、
処理を実装する方法があることを知り、
そちらを試した時のメモ。
処理の実装部分で、
自分自身の環境において、
色々と試したいことがあったので、
そちらについても、
今後のためにメモを残す。
Vueのバージョンについても、
バージョン２系ではなく、
バージョン３系を導入して、
Vue+TypeScriptの構成で試している。
個人用の備忘録としてメモを残しておく。
色々と試しながら、
挙動を確認している感じなので、
この記事に関しては、
必要に応じて、
記事追記、または別記事を追加。
Promise.allの実装時の参考記事メモ
こちらの実装に関しては、
こちらのサイトを参考にしました。
リンクをメモ。
Aggregate Multiple API Requests with Promise.all()
Promise.allを使った部分のベースコード
上記の参考記事などをベースに、
Promise.allを使ったコードは、
axiosを使うとすると、
以下のようなコードになります。
await Promise.all([
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
])
.then((response) => {
console.log(response);
})
.catch(function (response) {
console.log(response);
});エラー「TypeError: Cannot read properties of undefined (reading ‘post’)」の対応
上記のコードをベースにしたときに、
エラーとして、
TypeError: Cannot read properties of undefined (reading 'post')が起こりました。
こちらに関しては、
https://github.com/axios/axios/issues/5262
対策で試したことは、
- axiosのバージョンを0.27.2以降に調整
- axiosのデフォルト設定を処理に追加
の２つを調整で試みました。
バージョンは、
NPMパッケージで調整してもらえると良いので、
そちらで調整を完了させ、
デフォルト設定についても、
上記サイトの内容を参考に調整しました。
調整したコードとしては、
const axios = require('axios').default;
await Promise.all([
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
])
.then((response) => {
console.log(response);
})
.catch(function (response) {
console.log(response);
});このようなコードになります。
自分の環境では、
getではなくpostで試したので、
そのあたりはコードが少し違いますが、
ベースとしては、
同じような記載になるかと思います。
TypeScriptでメソッドにする調整
先ほどの、
const axios = require('axios').default;
await Promise.all([
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
])
.then((response) => {
console.log(response);
})
.catch(function (response) {
console.log(response);
});こちらのコードをベースに、
syncのメソッドとして、
実行されるように調整します。
その調整したコードが、
async actionsStores(): void {
const axios = require('axios').default;
await Promise.all([
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
axios.get("url of api"),
])
.then((response) => {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
}こちらです。
上記で調整したメソッドをベースに、
必要なaxiosの呼び出しは、
URLなどを変えるために、
ベットメソッドにしましたが、
そちらについては、
機会があれば、
追って追記予定。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
