【Nuxt.js】 @nuxtjs/axios で axios.all() が使えない

axios.all() とは

複数の API の並列処理ができる
axios.all()Promise.all() のラッパー関数

import axios from 'axios'

const api = axios.create()
return axios.all([
    api.get('https://xxxxxxxxxxxx'),
    api.get('https://xxxxxxxxxxxx')
]).then(axios.spread((api1Result, api2Result) => {
    ...
}))

これが @nuxtjs/axios だと使えない
axios.create() とか axios.all() とかでエラーが出る

解決策

axios.all() ではなく、 Promise.all() を使うとよい

下記はコンポーネント内で使う場合

return Promise.all([
    this.$axios.$get('https://xxxxxxxxxxxx'),
    this.$axios.$get('https://xxxxxxxxxxxx')
]).then(result => {
    let api1Result = result[0]
    let api2Result = result[1]
    ...
})

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

2

たか橋

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。