axiosでREST API作ってみる

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データは最近ハマっているゲームがネタです。