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オブジェクトにコールバック関数を登録している。