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などができるメソッド。今は一つのリクエストしかないけど...

これで実行してみると、

```terminal
node get.js
```

```json
{ 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)
})
```

これを実行してみると、

```terminal
{"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)
})
```

これを実行すると、

```terminal
{"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データは最近ハマっている[ゲーム](https://www.nintendo.co.jp/switch/anvya/pc/index.html)がネタです。