Axios の使い方
Axios は XMLHttpRequest を Promise ベースで使えるようにしたライブラリ。Promise の polyfill を使えば IE 11 から動作する。
公式の README よりよく使う部分を抜粋。
GET リクエストの基本
基本形は次の通り。HEAD, OPTIONS, DELETE メソッドの場合も同様の引数をとる。
const response = await axios.get(url[, config])
GET パラメータは URL に含めるかわりに次のように指定することができる。
// axios.get('/user?id=12345') と等価 axios.get('/user', { params: { id: '12345' } })
POST リクエストの基本
基本形は次の通り。PUT, PATCH メソッドの場合も同様の引数をとる。
const response = await axios.post(url[, data[, config]])
リクエストボディにプレーンなオブジェクトを渡すと application/json 形式で送信される（リクエストヘッダも出力される）。
const user = { id: '12345', name: 'John' } axios.post('/user/update', user) // => {"id":"12345","name":"John"}
データを application/x-www-form-urlencoded 形式で送信したい場合は URLSearchParams クラスのインスタンスを渡す。
const params = new URLSearchParams() Object.keys(user).forEach((key) => { params.append(key, user[key]) }) axios.post('/user/update', params) // => id=12345&name=John
レスポンス
レスポンスボディは data プロパティに格納されている。
try { const response = await axios.get('/user?id=12345') console.log(response.data) // => { user: { id: 12345, name: 'John' } } } catch (error) { console.error(error) }
