Reactでaxiosを使ってJSONPのデータを取得する

JSONP

クライアントが提供するAPIがJSONPしかなかった。
レスポンスのコールバック関数名が固定だったのだけれど、その時の実装方法が意外とインターネットに書かれてなくて厄介だったのでメモ。

npm

npm i axios
- axios - npm
npm i axios-jsonp
- axios-jsonp - npm

JSONPレスポンス

callback({
 "title": "test",
 "text": "sample"
})

サンプルコード

import React from 'react'
import axios from 'axios'
import axiosJsonpAdapter from 'axios-jsonp'

const App = () => {
  //グローバルなwindowオブジェクトにコールバック関数を登録する
  window.callback = json => console.log(json)

  React.useEffect(()=>{
    axios.get('http://hogehoge/getjsonp', {
      adapter: axiosJsonpAdapter
    })
  },[])
}

export default App

ポイント

リクエストが完了した時点で、JSONP内で指定されている関数名が実行されるが、コード内で関数が定義されていないとcallback is not definedというエラーになってしまう。
その関数はグローバルな必要があるため、windowオブジェクトにコールバック関数を登録している。

参考

• axiosでサクっとJSONP - Qiita
• jQuery - jQueryのajax処理にて、クロスドメインのデータ取得時に起こるエラーについて｜teratail
• Promise.allでjsonpデータを取得しようとすると、callbackが未定義扱いされてしまう