LoginSignup
2
0

More than 1 year has passed since last update.

お題は不問！Qiita Engineer Festa 2023で記事投稿！
@oriefield

【Axios入門】Node.jsでAxiosを使用しました

Posted at

Axios入門

Axiosとは

Node.jsとブラウザのためのPromiseベースのHTTPクライアントです。これは Isomorphic（= 同じコードベースでブラウザと Node.js の両方で実行できる）と呼ばれます。 サーバー側ではネイティブ の Node.js http モジュールを使用し、クライアント (ブラウザ) では XMLHttpRequests を使用します。

特徴

  1. ブラウザからXMLHttpRequestsを作成する
  2. Node.jsからhttpリクエストを作成する
  3. PromiseAPIをサポート
  4. インターセプトのリクエストとレスポンス
  5. リクエストとレスポンスのデータを変換
  6. リクエストをキャンセル
  7. JSONデータの自動変換
  8. XSRFから保護するためのクライアント側のサポート

Axiosのインストール
npmを利用して：

npm install axios

GETリクエストの例
Promise形式の場合：

const axios = require('axios');

// クエリパラメータ付きのリクエスト
axios.get('/user?userId=12345')
    .then((response) => {
        // handle success
        console.log(response);
    })
    .catch((error) => {
        // handle error
        console.log(error)
    })
    .finally(() => {
        console.log(`always executed`);
    });

// 上記と同じ結果
axios.get('/user', {
        params: {
            userId: 12345
        }
    })
    .then((response) => {
        // handle success
        console.log(response);
    })
    .catch((error) => {
        // handle error
        console.log(error)
    })
    .finally(() => {
        console.log(`always executed`);
    });

async/await形式の場合(ECMAScript 2017以降に対応した環境で動く)：

const axios = require('axios');

const getUser = async () => {
    try {
        const response = await axios.get('/user?userId=12345');
        console.log(response);
    } catch (error) {
        console.error(error);
    }
}

上記の例を、expressで試してみます。まず、フォルダ構成は以下の通り：

.
├─controllers
│  └─userController.js
├─routes
│  └─user.js
└─views
│  └─user.pug
├─app.js
└─package.json

次に、使用したモジュールが

"express": "^4.18.2",
"axios": "^1.4.0",
"pug": "^3.0.2",
"nodemon": "^2.0.22"

となっています。expressとaxiosは本題なので説明をスキップします。
pugはexpressで使用されるview engineの1つです。今回は勉強のために画面を作成してAPIを呼び出すという方式をとっており、画面をpugで作成しています。
nodemonはファイルの変更を検知し、そのたびにサーバーを再起動してくれるツールです。開発のときに便利なので使用しています。nodemonを使用するために、package.jsonのキーscripts内に

pacakge.json
"scripts": {
    "start": "nodemon app.js"
}

と記載し、node.jsの実行をnpm run startにより行っています。
コードの読み込みの流れとしてはapp.js→routes/user.js→controllers/userController.jsなのでこの順番でコードを記載します。

app.js
////Require Setup///////////////////////////
const express = require('express');
const path = require('path');
const userRouter = require('./routes/user');
////////////////////////////////////////////

const app = express();

////View Engine Setup///////////////////////
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
////////////////////////////////////////////

////App Setup//////////////////////////////
app.use(express.json())
app.use(express.urlencoded({extended: true}))
app.use('/', userRouter);
////////////////////////////////////////////

////Server Setup///////////////////////////
const hostname = '127.0.0.1'
const port = '5000'
app.listen(port, hostname, () => {
    console.log(`*** Server is running at http://${hostname}:${port} ***`)
})
////////////////////////////////////////////

注：画面にJSON形式のデータを表示するためApp Setup内に、express.json()とexpress.urlencoded({extended: true})を記載しています。

routes/user.js
const express = require('express');
const router = express.Router();

////Require Controllers//////////////////////
const user_controller = require('../controllers/userController');
////////////////////////////////////////////

/** GET USER PAGE */
router.get('/', user_controller.user_page);

/** POST API CALL */
router.post('/api', user_controller.call_api);

////Router Exports//////////////////////////
module.exports = router;
////////////////////////////////////////////
controllers/userController.js
////Require Setup////////////////////////////
const axios = require('axios');
////////////////////////////////////////////

exports.user_page = (req, res) => {
    res.render('user')
}
exports.call_api = (req, res) => {
    const {METHOD,endPoint,ID} = req.body
    const url = 'https://qiita.com/'
    const callURL = url + endPoint
    let data;
    axios.get(callURL)
    .then((response) => {
        data = response.data
        res.json(data)
    })
    .catch((error) => {
        // handle error
        console.log(error)
    })
    .finally(() => {
        console.log(`always executed`);
    });
}

userController.js内でやっとaxiosが登場しています。(呼び出すだけであれば、app.js内でよかったですね。)
また、今回使用したAPIはQiita APIで、こちらの記事で必要な箇所はまとめています。今回はGET送信のみを使用したので、アクセストークンは必要ありません。(今回の記事のためだけにまとめたまでありますね。)
注意点としては、APIによってレスポンスの返し方を変える必要があります。今回使用したAPIのエンドポイントはapi/v2/schemaでしたが、こちらは上記の実装で画面表示は問題ありません。一方で、記事の一覧を取得するために/api/v2/itemsを呼び出した場合、response.dataが配列になるので、例えばres.json(data[0])のようにデータのアクセス方法を変える必要があります。

最後に、画面がこちら：

user.pug
doctype html
html(lang="ja")
    head
        // Required meta tags
        meta(charset="utf-8")
        meta(name="viewport" content="width=device-width, initial-scale=1")
        // Bootstrap CSS
        link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous")
        title=title
    body
        div(class="container")
            h1 USER
            form(action="/api" method="POST")
                div(class="mb-3")
                    label(for="METHOD" class="form-label") Http Method
                        select(class="form-select" aria-label="Default select example" id="METHOD" name="METHOD")
                            option(selected) Select HTTP method
                            option(value="GET") GET
                            option(value="POST") POST
                            option(value="PUT") PUT
                            option(value="PATCH") PATCH
                            option(value="DELETE") DELETE
                    br
                    label(for="endPoint" class="form-label") End Point URL(Relative)
                    input(type="text" class="form-control" id="endPoint" name="endPoint")
                    label(for="ID" class="form-label") Parameter(ID)
                    input(type="text" class="form-control" id="ID" name="ID")
                    button(type="submit" class="btn btn-primary") Submit
            
        script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous")

大まかに、Bootstrap5を使用しており、そこからコンポーネントを拝借。データもHttpメソッドとURL、パラメータを入力して送信するという簡素なものです。（今回はメソッドとパラメータは無視しているので、今後はこちらを改良していきたい。）

最後にまとめ（感想）

Axiosを調べて、今回この記事をまとめたわけですが、まだGET送信しかまとめられていません。大半はexpressによる実装部分の記事となっています。パラメーターも画面で受け取れるように実装していきたいです（JSON形式にして受け取るのがよさそうです）。
次回以降はPOST送信についてまとめていきたいと思います。（使用用途を考えるのは大変ですが、シンプルに構文をまとめるよりかは面白いのでこんな感じの記事でやっていきたいと思いました。
また、expressでの実装時のファイル名はuserじゃなくてよかったですね。）

2
0
0

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
Sign upLogin
2
0