【LINE BOT】Messaging API（Node.js）の中で他のAPIも実行して取得した値をメッセージで送信したい

前提・実現したいこと

LINE BOTのMessaging API（Node.js）を使用して、レシピ検索のようなボットを開発しています。

楽天レシピAPIを実行して、取得した値をメッセージとして送信する処理で躓いています。
https://webservice.rakuten.co.jp/api/recipecategoryranking/

発生している問題・エラーメッセージ

handleEvent()の中で楽天レシピAPIを実行しています。

最終的にhandleEvent()にreturn client.replyMessage(event.replyToken, echo);を返せばメッセージが送信されるのですが、
今の書き方だと.then(data => {・・・})の中でreturnしているせいなのか、return client.replyMessage(event.replyToken, echo);を記述してもメッセージが送信されません。

今回のような非同期やhttpリクエストの知見が乏しくて完全に手が止まりました。
どのような書き方をすればいいでしょうか？

該当のソースコード

'use strict';

const line = require('@line/bot-sdk');
const express = require('express');
const axios = require('axios');

// create LINE SDK config from env variables
const config = {
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.Client(config);

// create Express app
// about Express itself: https://expressjs.com/
const app = express();

// register a webhook handler with middleware
// about the middleware, please refer to doc
app.post('/callback', line.middleware(config), (req, res) => {
  Promise
    .all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

// event handler
function handleEvent(event) {
  if (event.replyToken === '00000000000000000000000000000000') {
    return {}
  }
  if (event.type !== 'message' || event.message.type !== 'text') {
    // ignore non-text-message event
    return Promise.resolve(null);
  }

  // RAKUTEN Recipe API
  const appId = process.env.RAKUTEN_RECIPE_API_APP_ID
  const catId = event.message.text
  const request = `https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=${appId}&formatVersion=2&categoryId=${catId}`
  fetch(request, {
      method: "GET",
    })
    .then(response => response.text())
    .then(data => {
      console.log(data);

      // create a echoing text message
      const echo = [{
          type: 'text',
          text: event.message.text
        },
        {
          type: 'text',
          text: data
        }
      ]
      // ここでreturnしてもhandleEvent()に返らない？からメッセージが送信できない
      return client.replyMessage(event.replyToken, echo);
    });

  // use reply API
  // ここでreturnすればhandleEvent()に返ってメッセージが送信される
  // return client.replyMessage(event.replyToken, echo);
}

// listen on port
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}`);
});

↓ 追記：20200821 13:48

NovisHub様からご回答を頂き、試してみたコードです。
こちらのコードでもメッセージが送信されませんでした。

また、現在herokuで動かしており、
コードを修正 → デプロイ → LINEでメッセージを送って動作確認
のような感じで作業しているのですが、エラーメッセージを見るなど良いデバッグ方法はありませんでしょうか？

こちらがサイト側のURLです。
https://line-recipe.herokuapp.com/

ご回答を頂いて試してみたコード

'use strict';

const line = require('@line/bot-sdk');
const express = require('express');
const axios = require('axios');

// create LINE SDK config from env variables
const config = {
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.Client(config);

// create Express app
// about Express itself: https://expressjs.com/
const app = express();

// register a webhook handler with middleware
// about the middleware, please refer to doc
app.post('/callback', line.middleware(config), (req, res) => {
  Promise
    .all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

// event handler
function handleEvent(event) {
  if (event.replyToken === '00000000000000000000000000000000') {
    return {}
  }
  if (event.type !== 'message' || event.message.type !== 'text') {
    // ignore non-text-message event
    return Promise.resolve(null);
  }

  // RAKUTEN Recipe API
  const appId = process.env.RAKUTEN_RECIPE_API_APP_ID
  const catId = event.message.text
  const request = `https://app.rakuten.co.jp/services/api/Recipe/CategoryRanking/20170426?applicationId=${appId}&formatVersion=2&categoryId=${catId}`

  return new Promise(function (resolve, reject) {
    fetch(request, {
        method: "GET",
      })
      .then(response => response.text())
      .then(data => {
        console.log(data);
        const echo = [{
            type: 'text',
            text: event.message.text
          },
          {
            type: 'text',
            text: data
          }
        ]
        client.replyMessage(event.replyToken, echo).then(function (messageAPIResponseBase) {
          resolve();
        }).catch(function (error) {
          reject(error);
        });
      });
  });

  // use reply API
  // return client.replyMessage(event.replyToken, echo);
}

// listen on port
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}`);
});

行動規範の内容に同意します

回答1件

ベストアンサー

単純に handleEvent 関数に Promise を返せば良さそうなので、以下のような感じで行けると思います。
実行していないので上手くいかなかったら教えてください。

JavaScript
1// event handler
2function handleEvent(event) {
3  // 略
4  return new Promise(function (resolve, reject) {
5    fetch(request, {
6      method: "GET",
7    })
8    .then(response => response.text())
9    .then(data => {
10      console.log(data);
11
12      // create a echoing text message
13      const echo = [
14        {
15          type: 'text',
16          text: event.message.text
17        },
18        {
19          type: 'text',
20          text: data
21        }
22      ];
23
24      // ここでreturnしてもhandleEvent()に返らない？からメッセージが送信できない
25      client.replyMessage(event.replyToken, echo).then(function (messageAPIResponseBase) {
26        resolve();
27      }).catch(function (error) {
28        reject(error);
29      });
30    });
31  });
32  // 略
33}

または async/await を使用すると以下のように簡潔に書けると思います。

JavaScript
1// event handler
2async function handleEvent(event) {
3  // 略
4  const response = await fetch(request, {
5    method: "GET",
6  });
7
8  const data = await response.text();
9
10  const echo = [
11    {
12        type: 'text',
13        text: event.message.text
14    },
15    {
16        type: 'text',
17        text: data
18    }
19  ];
20
21  await client.replyMessage(event.replyToken, echo);
22  // 略
23}

投稿2020/08/21 03:48

退会済みユーザー

総合スコア0

true_colors_20

2020/08/21 04:55

ご回答ありがとうございます。 1つ目のコードを試したのですが、メッセージが送信されませんでした。質問に今の状態などを追記しました。 2つ目のコード（async/await）を試したら、LINEの管理画面のwebhookの検証でエラーが返ってきて、サイト側でもアプリケーションエラーと表示されたので、ひとまず1つ目のコードを質問に追記しております。お手数ですが、ご確認、アドバイスなどいただければ幸いです。

退会済みユーザー

2020/08/21 06:06

`client.replyMessage`の`then/catch`内に渡される`messageAPIResponseBase`変数や`error`変数をログに出力するとどうなりますか？

true_colors_20

2020/08/21 06:55 編集

`replyMessage(event.replyToken, echo).then(function (messageAPIResponseBase) {`の中でconsole.logを実行してもサイト上では何も表示されませんでした。（lineでメッセージを送信していないので処理がそもそも行われないのだと思います）変数を出力したり、どこでエラーが出ているのかデバッグするいい方法はないでしょうか・・・

退会済みユーザー

2020/08/21 09:07

サイト上というのは具体的にどこでしょうか？expressサーバーを利用されているようですが、`console.log`の内容はサーバーのスクリプトを実行しているプロセスの標準出力にも出ていませんか？また、`console.log(data);`の内容は確認できていますか？

true_colors_20

2020/08/24 05:29

>`console.log`の内容はサーバーのスクリプトを実行しているプロセスの標準出力にも出ていませんか？ここには何も出ていないですね >また、`console.log(data);`の内容は確認できていますか？なのでdataの内容は確認できていないですちょっと分からないことだらけなので、一旦違う方法で実装してみますアドバイスなどいただきありがとうございました

行動規範の内容に同意します