Nuxt独自

【Nuxt.js】Nuxt文法編:asyncData

前置き

非同期通信で使うasyncData
まとめました📚🙋‍♀️

  • 非同期通信とは
  • Promiseとは
  • asyncDataの役割と書き方(Promiseasync/await)

分かるところは飛ばしてくださいね ✈️


非同期処理とは

こちらのツイートが分かりやすいかと思います💡

結果を待たずに
すぐに処理ができるということです🏃‍♀️💨

温めた商品が手元にくる前に
会計を先に済ませることができる
というわけです!

これが同期処理なら
温めてる間はずっと店員さんが
レンジの前にいて、
温め終わってからでしか会計できません。

コードでいうなら…
⬇️の例でご覧ください🌟👀


Promise

Promiseとは

値が今すぐは返せないけど、
その間に仕事はできるし、
後でちゃんと返すから!!
という物です💡

効率よく仕事を回せる、できる人✨🙋‍♀️
そんなイメージです。


簡単な例

自分のIPアドレスを表示させるjsonファイル
http://icanhazip.com
を使用しています🌟

解説

awaitPromiseにあたる部分です!

通信自体はaxiosで行います。
async awaitはセットで使います。

詳しい書き方は
asyncDataで解説するので、
Promiseってこういう物なんだ!
と理解できればOKです🙆‍♀️

awaitでIPアドレスを取得するまでに
非同期でお仕事をしています。

先ほどのコンビニの例でいうと…🏪
温める商品 = IPアドレス
会計 = console.log

今回は分かりやすく
console.logを表示するのみです🍒

axiosの解説はこちらです💡
https://wp.me/pc9NHC-gr

コード

こんな感じで書きます✍️

) pages


asyncData

asyncDataとは

通信自体はaxiosの役割ですが、
ここからここまでが非同期通信してますよ、
ってグループ化するのがasyncDataです🌟

つまり非同期通信、
これ自体はasyncDataがなくてもできます!
ただasyncDataを使うことで
通信のタイミングが変わります。

使い方自体はfetchと似ています💡

ページ コンポーネントがローディングされる前に常に呼び出されます。

asyncData メソッド内の this を通してコンポーネントのインスタンスにアクセスすることは できません。それはコンポーネントが インスタンス化される前に このメソッドが呼び出されるからです。

https://ja.nuxtjs.org/guide/async-data/


書き方は2種類

Promiseを返す

  • .then
  • Promise
  • try

ではこの中の .then
axiosの記事でも使った
jsonplaceholderのpostsを
表示させてみましょう🌟
https://jsonplaceholder.typicode.com/posts

コード

.thenで通信が成功したら
res.dataが帰ってくる間に
お仕事しております✨👩‍💻
今回も簡単にconsoleを表示するだけ🍒

async/awaitを使う

awaitpropmiseにあたるイメージです🌟
必ず asyncawait セットで使います👭

コード

await 直後の
axiosで通信し
その結果が返されるまで(returnされるまで)
consoleを表示しています💡


動的なルートデータへのアクセス

こちらもaxiosの記事
step5: queryを使って取得
の続きです🌟

asyncDataを使ったバージョンを書いていきます✍️
コンテキスト(context)を使ってやっていきます!

context パラメータを利用して動的ルートデータにアクセスすることもできます。たとえば、動的ルートパラメータには、それを設定したファイルまたはフォルダの名前を使用してアクセスできます。

https://ja.nuxtjs.org/guide/async-data/

解説

asyncData
ここは非同期の部分ですよ、
とグループ化

asyncawaitはセットで使い
awaitpromiseの役割をする
値がreturnされるまでは
別の作業ができる

当然ですが
awaitのreturnの後には
何を書いても実行されません💡

コード

before

) pages

after

スッキリさせるために
title1つだけ表示させてます🙋‍♀️

) pages

もっとスマートに書くと


まとめ

  • Promiseで結果が返されるまでに非同期通信で別のことができる
  • asyncDataはその非同期通信のまとまり
  • そのまとまりの中にPromiseまたはawait(async/await)がある

-Nuxt独自
-,

© 2020 aLiz Nuxt