このブログはNuxt.jsとContentfulで構築している。
WordPressを辞めて、Nuxt.js + Contentful + Netlifyでブログを作った。


構築の際には色々と参考にさせてもらったが、ContentfulのAPIを使う部分で記事ごとに書き方が違ったりして少し混乱した。

非同期処理周りを勉強する良い機会になったので、学んだことをざっくりとまとめておく。

Promiseとは

Promiseとは非同期処理に関する概念。その概念をJavaScriptに持ってきたのがPromiseオブジェクト。

コールバック地獄

非同期処理はコールバックを使って書くことが多いが、非同期処理がいくつも続く場合コールバックの階層が深くなり見通しが悪くなってしまう。

first(function(data) {
  second(function(data) {
    third(function(data) {
      // 処理
    });
  });
});

これを解決するのが次のPromiseである。

Promiseを使った書き方

ES2015から使えるPromiseを使えばこんな風に書くことができる。

first().then(second).then(third);

thenで繋いで書くことでシンプルになった。

axiosについて

少し本筋から逸れるけど、ついでにaxiosについても調べた。

axiosはPromiseベースのHTTPクライアントで、REST APIを実行したい時に使うことで、シンプルに書けるようになるライブラリ。

コードは省略。

Contentfulから記事を取得する

Contentfulから記事を取得する方法は、以下のドキュメントの「Fetch data and render every page」のところに書いてある。

Integrate Contentful with Nuxt.js

Promiseを使った書き方

上のドキュメントでは普通にPromiseを使った方法で書かれている。

asyncData ({env}) {
  return Promise.all([
    client.getEntries({
      'sys.id': env.CTF_PERSON_ID
    }),
    client.getEntries({
      'content_type': env.CTF_BLOG_POST_TYPE_ID,
       order: '-sys.createdAt'
    })
  ]).then(([entries, posts]) => {
    return {
      person: entries.items[0],
      posts: posts.items
    }
  })
}

async/awaitを使った書き方

上の処理はES2017から使えるasync/awaitを使って次のような書き方もできる。

async asyncData ({env}) {
  let [entries, posts] = await Promise.all([
    client.getEntries({
      'sys.id': env.CTF_PERSON_ID
    }),
    client.getEntries({
      'content_type': env.CTF_BLOG_POST_TYPE_ID,
       order: '-sys.createdAt'
    })
  ])
  return {
    person: entries.items[0],
    posts: posts.items
  }
}

asyncを関数の頭につけるとその中でawaitが使えるようになり、awaitを関数の頭につけるとPromiseの結果が返ってくるまで待つようになる。

thenが無くなった分ネストが浅くなった。


以前axiosについて調べた時「Promise」という単語は見たが、今ひとつピンときていなかった。

今回Promise周りの理解を進めることができたが、まだ甘い部分もあるので機を見て下の記事を読んでおきたい。
JavaScript Promiseの本