Chrome拡張なしで簡易APIテスト

Chrome Devtoolsのconsoleで直接実行

Laravel開発でAPIを実装する際、
APIテストをfeatureテストで行うのだが、
フロント実装時に外部からリクエストをテストしたい場合がある。
(仕様書通り動いてるか確認とかね)

PostmanのようなAPIテストツールを常用してるならいいが、
特に整備していない場合がほとんど。
それを自前で用意するとなると、
ログイン周りのセッション維持とかを考えなきゃならない。

（´-`）.｡oO Chrome consoleで実行できればなぁ

Chrome拡張でAPIツールとか存在はするけど、
テストツールと同じでセッションは維持できない。
ということでちょっと方法を調べてみた

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

XMLHttpRequestを使用

AJAXが注目されたときのコア技術となっているXMLHttpRequest
もちろん使用可能ではあるが、
使い勝手が悪いのであまりお薦めはできない

XMLHttpRequest

const xhr = new XMLHttpRequest
xhr.open("GET", "/path/to/api")
xhr.send()

fetchを使用

Chrome42から実装されているfetch関数
Nodeの標準関数だったものがWeb側にもついたものだが、
XMLHttpRequestよりも遥かに使いやすい

fetch

fetch('/path/to/api')
  .then(res => res.json())
  .then(console.log)

POST/PUT/DELETE メソッド

GET以外ではCSRF対策がされていると思うので、
それらのヘッダを付与する必要がある。
リクエストに追加するのかヘッダーに載せるのかは実装によりけりなので、
ここではヘッダーに載せる場合で掲載する

fetch POST/PUT/DELETE

fetch('/path/to/api/1234', {
  method: 'PUT',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
    'X-CSRF-TOKEN': document.getElementsByName('csrf-token')[0].getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest',
  }
})
.then(res => res.json())
.then(console.log)