axiosはPromiseベースで動作するHTTPクライアント。これだけです
APIサーバーの用意
まず始めにAPIサーバーを準備をしましょう。
expressで実装。GET、POST、PUT、DELETEを受け取れるようにします。
api-server.js
const express = require('express')
const uuidv4 = require('uuid/v4')
const app = express()
const bodyParser = require('body-parser')
const port = 80
let charactors = {
1: {
id: uuidv4(),
name: 'Edelgart',
class: 'Adler Classe',
student: false
},
2: {
id: uuidv4(),
name: 'Dimitri',
class: 'Leuven Classe',
student: false
},
3: {
id: uuidv4(),
name: 'Claude',
class: 'Hirsch Classe',
student: true
}
}
app.use(bodyParser.urlencoded({
extended: true
}))
app.use(bodyParser.json())
app.get('/api', (req, res) => {
res.send('Fire emblem!!')
})
app.get('/charactors', (req, res) => {
res.send(Object.values(charactors))
})
app.get('/charactors/:charactorId', (req, res) => {
const charId = req.params.charactorId
res.send(charactors[charId])
})
app.post('/charactors/:charactorId', (req, res) => {
const charId = req.params.charactorId
const body = req.body
charactors[charId] = body
console.log('add to charactors body: \n' + Object.values(body))
})
app.put('/charactors/:charactorId', (req, res) => {
const charId = req.params.charactorId
const body = req.body
charactors[charId] = body
console.log('update to charactors body: \n' + Object.values(body))
})
app.delete('/charactors/:charactorId', (req, res) => {
const charId = req.params.charactorId
delete charactors[charId]
console.log('delete body')
})
app.get('/jobs', (req, res) => {
res.send(Object.values(jobs))
})
app.get('/jobs/:jobName', (req, res) => {
const name = req.params.jobName
res.send(jobs[name])
})
app.post('/jobs/:jobName', (req, res) => {
const name = req.params.jobName
const body = req.body
jobs[name] = body
console.log('add to jobs body: \n' + Object.values(body))
})
app.put('/jobs/:jobName', (req, res) => {
const name = req.params.jobName
const body = req.body
jobs[name] = body
console.log('update to jobs body: \n' + Object.values(body))
})
app.delete('/jobs/:jobName', (req, res) => {
const name = req.params.jobName
delete jobs[name]
console.log('delete body')
})
app.get('*', (req, res) => {
res.status(404).send('Not Fount 404')
})
app.listen(port, () => console.log(`start Fire emblem api`))
結構色々と設定。これでGET、POST、PUT、DELETEを受け取れるAPIサーバーを準備完了。
jsonデータのcharactorsのIDはUUIDで管理。これと言って意味は特になしw
AxiosでREST API
GET
まずGETリクエストを行うものを作ります。
get.js
const axios = require('axios')
const base = axios.create({
baseUrl: 'http://localhost'
})
base.get('/charactors/1').then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
createは複数のリクエストがあるときに共通の設定をして、create経由でGET、POSTなどができるメソッド。今は一つのリクエストしかないけど...
これで実行してみると、
node get.js
{ id: 'UUID',
name: 'Edelgart',
class: 'Adler Classe',
student: false }
の結果がコンソールに出て確認完了です。
POST
次にPOSTリクエストを実装してみましょう。
post.js
const axios = require('axios')
const uuidv4 = require('uuid/v4')
const base = axios.create({
baseUrl: 'http://localhost'
})
base.post('/charactors/4', {
id: uuidv4(),
name: 'Fren',
class: 'Hirsch Classe',
student: true
}).then(res => {
res.end()
}).catch(err => {
console.log(err)
})
これを実行してみると、
{"id":"UUID","name":"Fren","class":"Hirsch Classe","student":true}
フレンが追加されました。
PUT
次はPUTリクエストを実装してみましょう。
put.js
const axios = require('axios')
const uuidv4 = require('uuid/v4')
const base = axios.create({
baseUrl: 'http://localhost'
})
base.put('/charactors/5', {
id: uuidv4(),
name: 'Hugh belt',
class: 'Adler Classe',
student: false
}).then(res => {
res.end()
}).catch(err => {
console.log(err)
})
これを実行すると、
{"id":"UUID","name":"Hugh belt","class":"Adler Classe","student":false}
ヒューベルトが追加されました。このjsのjson部分の中身を変えて実行すると、更新されるので試してみてください。
DELETE
最後にDELETEリクエストを送ってみましょう。
delete.js
const axios = require('axios')
const base = axios.create({
baseUrl: 'http://localhost'
})
base.delete('/charactors/5')
.then(res => {
res.end
}).catch(err => {
console.log(err)
})
実際これだけですが、削除されてるか確認すると、ヒューベルトが消されました。
あとがき
jsonデータは最近ハマっているゲームがネタです。