Nuxt.jsの画面表示時に必要なデータを得るためのAPI呼び出しが増えると画面描画が遅くなる問題を、APIをPromise.allで呼び出すことにより回避する。
API呼び出し処理を別関数にすることによりリロード処理にも利用可能となる。
コンボボックスの選択肢をAPIから取得するという利用シナリオ。
<script>
function getData(app) {
return Promise.all([
app.$selectApi.companiesWithBlankList(),
app.$selectApi.languagesWithBlankList(),
app.$selectApi.rolesWithBlankList()
]).then( ( [companies, languages, roles] ) => {
const data = {}
data.companies = companies
data.languages = languages
data.roles = roles
// ここでデータ編集を行って呼び元の処理を削減したりできる
return Promise.resolve(data)
})
}
export default {
async asyncData({ app }) {
const data = await getData(app)
return {
editedSelects: {
companyName: data.companies,
languageName: data.languages,
roleName: data.roles,
},
}
},
data() {
return {
editedSelects: {
companyName: [],
languageName: [],
roleName: [],
},
}
},
method: {
// リロード処理
async reload() {
const data = await getData(this)
this.editedSelects.companyName = data.companies
this.editedSelects.languageName = data.languages
this.editedSelects.roleName = data.roles
},
}
}
</script>