nodejs: Express: fetchした戻り値をexportしたいが取得した値が[Object Promise]

Question

実現したいこと

fetchに特化したjsファイルからexportしたJsonの値をrouter.jsに送って、resでview側に渡したい。。

/* fetch.js */
const Quiz = require('./class');
const fetch = require('node-fetch');

const apiAddress = 'https://opentdb.com/api.php?amount=10';
const f = fetch(apiAddress, {
    method: 'get',
    });
const f2 = f.then(res => Promise.resolve(res.json()))
            .then(json => {
              quizArray = [];
              for (let i=0; i<=9; i++) {
              const quiz = new Quiz();
              const quizCount = quiz.getQuizArray(i, json);
              quizArray.push(quizCount);
              }
              const quizJson = JSON.stringify(quizArray);
              return quizJson;
            })
            .catch(err => console.error(err))
module.exports = f2;

/* router.js */
const express = require('express');
const router = express.Router();
const api = require('../fetch');

console.log('api:'+ api); //api:[object Promise]
router.get('/', function(req, res, next) {
  res.render('index', {
    question: api[0]['quetion']//ここでjsonの配列を指定したい
  });
});

module.exports = router;

やってみたこと

Promiseについて理解が乏しいのですが、fetch.jsのfetchのメソッドをasync/awaitの非同期関数化してreturn quizJson取得まで待つ動作を書けばよいと思われます。しかし、どう書けばよいかまで理解が進んでいません。

【追加】
色々検索した結果、似通っている質問を見つけました。
ここ
これのExpress版が大雑把に言って私の質問になると思います。
この質問の回答にあるように現実的には難しいのではあれば、fetchしたデータをrouterを通じてどうやってview側（ejs）に渡せばよいのでしょうか？
宜しくおねがいします。

Comments

[miyabi-sun]

Markdown流儀のリンクの貼り方は`[タイトル](URL)`です。
今回の例ですと
[teratail-【JavaScript】fetchで取得したデータを変数にセットして自由に使いたい](https://teratail.com/questions/286024)
これでぐっと見栄えが良くなると思いますので編集してみてくださいね。

[hokosugi]

ご依頼ありがとう。しかし、うまく反映しません、プレビューでは正しいリンクを付けますが・・・

[miyabi-sun]

あー、ごくまれに上手く反映されないバグみたいなのありますね。
私が経験した時は、もう一度編集すれば動いた記憶があります。

[hokosugi]

編集してみましたが、同じのようです。

[hokosugi]

やっぱりうまくいきませんね。このままにしておきますｗ

Answer 1

res.renderの実行は非同期処理の先に飛ばしても問題ありません。
fetch.jsの中身はPending中のPromiseインスタンスですので、
その中で堂々と待ちましょう。

/* router.js */
const express = require('express');
const router = express.Router();
const api = require('../fetch');

console.log('api:'+ api); //api:[object Promise]
router.get('/', (req, res, next) => {
  api.then(json => {
    res.render('index', {
      question: json[0]['quetion']
    });
  });
});

module.exports = router;

async/awaitはPromiseを作ったり待つ事に特化しています。
この書き方を導入した場合、await Promiseという構文で待つ事が実現できるので
見た目だけですが同期処理のようなコードで表現出来るようになります。

/* router.js */
const express = require('express');
const router = express.Router();
const api = require('../fetch');

console.log('api:'+ api); //api:[object Promise]
router.get('/', async (req, res, next) => { // 関数定義する箇所でasyncキーワードを追加
  const json = await api; // awaitキーワードを使ってPromiseの状態が完了になるまで待って値を取り出せる
  res.render('index', {
    question: json[0]['quetion']
  });
});

module.exports = router;

---

Node.jsのrequireはmodule.exportsに代入された結果をキャッシュする為、
二度目の実行では全てが省略されてmodule.exportsの結果だけを返します。
なので、基本的には関数に包んで利用者に実行タイミングを制御させた方が綺麗です。

その視点でasync/awaitまで利用するとこのようになりまう。

/* fetch.js */
const Quiz = require('./class');
const fetch = require('node-fetch');

module.exports = async (apiAddress = 'https://opentdb.com/api.php?amount=10') => {
  const res = await fetch(apiAddress, {
    method: 'get',
  });
  const json = await res.json();

  // コードが平易になったので下に普通にぶら下げれば良いね
  const quizArray = [];
  for (let i=0; i<=9; i++) {
    const quiz = new Quiz();
    const quizCount = quiz.getQuizArray(i, json);
    quizArray.push(quizCount);
  }

  // これis何？
  // JSON.stringifyはJSの値を復元可能なStringに強制変換してしまうコードだよ？
  // 以降の処理が上手く動かないならJSON.stringifyで包むのをやめてそのまま返すと上手く行くとおもう
  return JSON.stringify(quizArray);
};

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

// 先に実行したければこうする
const api = require('../fetch')(); // 値のお尻()は関数実行の証

// 都度実行したければ関数のまま所持しておく
const getApi = require(../fetch);

router.get('/', async (req, res, next) => {
  const json = await api;
  // 都度実行したい場合はこう
  // const json = await getApi();
  res.render('index', {
    question: json[0]['quetion']
  });
});

module.exports = router;

Comments

[hokosugi]

ご回答、ありがとうございます！　あ〜〜なるほど、理解できます。帰宅後早速やってみます！取り急ぎ、お礼まで。

[hokosugi]

ありがとうございます！上手く行きました。stringifyは途中で気づいてコメントアウトしていたのですが、なんかの拍子に外してしまったのかも知れません。miyabi-sunさんは説明上手な上にお優しい方で良かったです。