📍

PromiseオブジェクトでのUncaught (EOTD No. 18)

2021/01/14に公開

JavaScript

Rails

API

tech

こちらAmetaです！久々に連日のError of the Dayです。

本日のエラー

シチュエーション

本日のエラーはGoogle Mapsをアプリに導入する際に起こりました。

Google Maps JavaScript APIを利用して、日本地図上に複数のマーカーを表示させようとしていましたが、設定を終えてもMapが表示されず。。

Inspectionを開いた時にConsoleに現れたのが今回のメッセージです。

考察

Uncaught (in promise)

まずはこのエラーが何を意味しているのかを調べました。

`Promise`オブジェクト

これは非同期処理の成功(Fulfilled)or失敗(Rejected)を教えてくれるオブジェクトで、JSでは標準で組みこまれているオブジェクトです。

成功と判断されたときはthenFuntionが、失敗と判断されたときはcatchFuntionが呼び出されるようです。

という事は、

今回のエラーメッセージ Uncaught (in promise)

Promiseオブジェクトによって成功とも失敗とも処理されていないエラー？

解決？

エラーメッセージの詳細を確認。

というメッセージが。
このinitMapがcallbackパラメーターに呼び出されている関数だと思い出しました。

# views/layouts/application.html.erb

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
    </script>

調べてみるとこのcallバックはAPIを読み取った後で実行する関数を指定するもの。
ということはAPIの読み込みには成功していて、その後のinitMapのスクリプトに問題があるかも。

解決策

こちらの記事を参考に、JSファイルに記載して呼び出していたinitMap関数をscriptタグに記述。
そして、APIを読み込むスクリプトの直前に配置することでGoogleMapsを導入することができました。

SOTD(Summary Of The Day)

今回エラーからJSファイルとscriptタグの違いをあまり意識して使っていなかった事に気がつきました。

結局は何が要因となってエラーが解決したのか分かっていないので、今後導入していくAPIたちで検証してみます。