ChromeのDeveloper ToolsでWebAPI / RestAPIを実行してJavaScriptでゴニョりたい！

7485 ワード
WebAPI DeveloperTool RestAPI JavaScript JavaScript テキストリンク

ChromeのDeveloper ToolsでWebAPI / RestAPIを実行してJavaScriptでゴニョりたい！

「ローカルにNodeが入っていない環境で、とりあえずWebAPIを実行して結果をJavaScriptで利用したい！」と思うことありませんか？
今回、会社の都合でローカルにNodeが入っていなかったり、Windowsメインの営業さんの環境でもおそらく入っているChromeで実行できるresuest用のfunctionを作成しました。

まずは動くもの

const apiRequest = ({method, url, headers, params}) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  const jsonParse = (data) => {
    try {
      return JSON.parse(data)
    } catch (error) {
      return data
    }
  }
  xhr.open(method || 'GET', url)
  if (headers) {
    Object.entries(headers).forEach(([key, value]) => xhr.setRequestHeader(key, value))
  }
  xhr.onload = () => resolve({status: xhr.status, response: jsonParse(xhr.response), xhr})
  xhr.onerror = () => reject({status: xhr.status, response: jsonParse(xhr.response), xhr})
  if (params) {
    xhr.send(JSON.stringify(params))
  } else {
    xhr.send()
  }
})
const main = async () => {
  const response = await apiRequest({method: 'GET', url: 'https://api.github.com/users/defunkt'})
  console.log(response)
}
main()

使い方

apiRequest({
  method: 'GET',
  url: 'http://example.com',
  headers: {
    'Authorization': 'base xxxxxx',
    'Content-Type': 'application/json'
  }
})

promiseが返ってくるので、必要に応じてawaitしてレスポンスを使って後続処理を実行してください。

こんな使い方

TypeScriptに変換する必要はありますが、昨年爆誕したWeb版Excelで稼働する
Officeスクリプトに組み込んでボタンポチポチで、SaaSで提供されているAPIを起動して
画面に返したり、他のAPIにつなげたりすることもできます！

spreadsheet＋GASを使えば良い説もあるのですが、簡単に利用できない不自由な環境の人も少なくないはず。
（私は不自由な環境の人です）