350
320

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

axios、async/awaitを使ったHTTPリクエスト(Web APIを実行)

Last updated at Posted at 2017-03-11

axiosというHTTPリクエストを行うためのライブラリがあります。
Node.js 7からasync/awaitを使えるようになりました。
今回はaxiosとasync/awaitを組み合わせて可読性の高い非同期通信を行う方法について紹介します。
今回のサンプルコードはNode.js 7以降で動作確認済です。

axios

使い方

npmからaxiosをインストールします。

npm install axios --save

APIはQiitaさんのAPIを使わせていただきました。

const axios = require('axios');
const url = "https://qiita.com/api/v2/items";

axios.get(url).then(res => {
  const items = res.data;
  for (const item of items) {
    console.log(`${item.user.id}: \t${item.title}`);
  }
}).catch(error => {
  const {
    status,
    statusText
  } = error.response;
  console.log(`Error! HTTP Status: ${status} ${statusText}`);
});

上記の通り、axiosでWeb API叩いたらPromiseオブジェクトが返ってくるので、
それをthenでつないで処理します。
存在しないURLに対してリクエストしていた場合などはErrorが発生するのでcatchする必要があります。

2019/01/24の時点での実行結果は以下の通り

hp_kj:  postgres 公式サイト データベースサンプル dvdrental
jhfgjfgjhghj:   JP~!!日本 ベトナム ライブ
d_uchida:   pokemon_data.jsonの中身を見てみる
jpkhantvcust78:     {live~Free}}*Vietnam vs Japan Live stream
artistan:   ライブラリを使わず、JSで画像をフェードインさせてみる
_ayk_study:     【Rails API】ActionController::InvalidAuthenticityTokenの解決方法
kotaro-dr:  【Flask】Blueprintで分割したControllerを跨いでのurl_for()
Ping:   PlantUML Server で爆速プレビュー! for Mac
AykeJq0ILeYFOR4:    今日の勉強記録1 bashについて
miler0528:  get_object_or_404 がなぜ404ページを送信できるのか、調べてみた(Django)
mkyz08:     Apache Camelでサーキットブレーカーパターン(Circuit Breaker Pattern)その2(Hystrix Dashboardを試す)
meznat:     [python]dotenvで環境変数をローカルから読み込む
atsushi586:     今日から開発で使えるサクラエディタ機能
Q11Q:   Ms Accessの起動スイッチと天才的としかいいようのない裏技
nouka:  ガード節を使って読みやすいコードを書こう
33yuki:     【PHP】変数の内容を出力する関数いろいろ
sawadashota:    [Laravel] エンドポイントが自動で変わるHeroku Redisに適応する
Q11Q:   条件付きコンパイル 環境対応編纂命令 Const Directive And Conditional Compilation
binary2:    vueでmomentを使うときにはまったこと..
tmitani:    さまざま分布のQQプロットを描画してみる

しかし、Promiseは直列で実行したい関数が増えればネストが深くなりがちです。

f1(param) {
  f2(param).then((data1) => {
    f3(data1).then((data2) => {
      f4(data2).then((data3) => {
        ・・・
      });
    });
  });
}

そこでさらに可読性を高くするためにasync/awaitを用いてみます。

async/await

というわけで今回の記事の最終地点です。
さっきのaxiosを使ったサンプルコードをasync/awaitを使って修正してみます

const axios = require('axios');
const url = "https://qiita.com/api/v2/items";

async function main() {
  try {
    const res = await axios.get(url);
    const items = res.data;
    for (const item of items) {
      console.log(`${item.user.id}: \t${item.title}`);
    }
  } catch (error) {
    const {
      status,
      statusText
    } = error.response;
    console.log(`Error! HTTP Status: ${status} ${statusText}`);
  }
}

main();

async/awaitを使うには関数の前にasyncを付けます。
そのasync関数内でPromiseを返す関数を呼び出すところでawaitを付けると結果を取得して後続の処理を行います。

また、async/awaitで書くとtry-catchでエラーをキャッチできます。

これでPromiseチェーンでできるネストの問題も以下のように解決できます。

async f1(param) {
  const data1 = await f2(param);
  const data2 = await f3(data1);
  const data3 = await f4(data2);
  ・・・
}

ちなみにasync/awaitはNode v7以降しか使えません。6以前はbabel使ってください。
Babel 6.7 で async/await する - Qiita

以上になります。
最後までお読み頂きありがとうございました。
質問や不備などがありましたら、Twitterでメンションとばすかコメント欄にてお願いいたします。

今回のサンプルコードは以下においておきます。
https://github.com/shisama/axios_sample

350
320
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
350
320

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?