Skip to content

Instantly share code, notes, and snippets.

@yukikim
Created November 14, 2024 15:35
Show Gist options
  • Save yukikim/26be5138dfb7af971429cc0d6827b7ef to your computer and use it in GitHub Desktop.
Save yukikim/26be5138dfb7af971429cc0d6827b7ef to your computer and use it in GitHub Desktop.
express.js 非同期データを返す

fetch を使って非同期でデータを取得する場合も、同様に async/await を使います。fetch はブラウザでは直接使えますが、Node.js で使用する場合は node-fetch のようなパッケージが必要です。以下に例を示します。

1. 必要なパッケージをインストール

Node.js 環境で fetch を使用するために node-fetch をインストールします。

npm install node-fetch

TypeScript で型エラーを防ぐために @types/node-fetch もインストールします。

npm install @types/node-fetch -D

2. fetch を使った非同期データ取得の実装

例えば、https://jsonplaceholder.typicode.com/todos/1 からデータを取得する例を示します。

import express, { Request, Response } from 'express';
import fetch from 'node-fetch';

const app = express();
const PORT = 3000;

// 非同期で外部APIからデータを取得する関数
const fetchData = async (): Promise<any> => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error;
    }
};

// エンドポイントで非同期データを返す
app.get('/data', async (req: Request, res: Response) => {
    try {
        const data = await fetchData();
        res.status(200).json(data);
    } catch (error) {
        res.status(500).json({ message: 'データの取得に失敗しました' });
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

解説

  1. fetchData 関数:

    • fetch を使って指定したURLからデータを取得します。
    • await response.json() で JSON データに変換し、その結果を返します。
    • ネットワークエラーやレスポンスが不正である場合のエラーハンドリングも追加しています。
  2. エンドポイントでのデータ取得と返却:

    • /data エンドポイントで fetchData 関数を呼び出し、外部APIから取得したデータをレスポンスとして返します。
    • エラーハンドリングも追加し、エラーが発生した場合には500エラーレスポンスを返します。

このコードにより、外部APIから取得したデータを非同期で処理し、クライアントに返すことができます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment