axiosのget,post,deleteメソッド

はじめに

Node.jsを使う際に、標準のfetch API以外、requestモジュール、axiosのモジュールはよく使います。
書き方はGithubのページに書いてありますが、よくGoogle先生に聞く場合も多いです。
やはりオフィシャルに記載した情報は一番ですね。
axios: https://github.com/axios/axios
request: https://github.com/request/request

axiosのget,post,deleteメソッドを簡単に説明します。

Expressのパラメータの取得方法

まずサーバ側の情報を取得する仕組みを確認します。
Express.jsのリクエストAPI：https://expressjs.com/ja/api.html#req

1. headers

// access_token: xxxxxxxxxxxx
console.dir(req.headers.access_token)
// => 'xxxxxxxxxxxx'

※ヘッダーの項目名は小文字で取得します。

2. params

・URLに「:変数名」で定義

app.get('/user/:userId', function (req, res) {
  console.log(req.params.userId)
  res.send('user ' + req.params.userId)
})

URL例： http://example.com/user/tanaka
出力：tanaka

・URLに「*」で定義

app.get('/user/*', function (req, res) {
  console.log(req.params[0])
  res.send('user ' + req.params[0])
})

URL例： http://example.com/user/tanaka
出力：tanaka

3. query

URLの「?」以降のパラメータです。Githubページにあるサンプルコードです。

// GET /search?q=tobi+ferret
console.dir(req.query.q)
// => 'tobi ferret'

// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
console.dir(req.query.order)
// => 'desc'

console.dir(req.query.shoe.color)
// => 'blue'

console.dir(req.query.shoe.type)
// => 'converse'

// GET /shoes?color[]=blue&color[]=black&color[]=red
console.dir(req.query.color)
// => ['blue', 'black', 'red']

4. body

const express = require('express')

const app = express()

app.use(express.json()) // application/json
app.use(express.urlencoded({ extended: true })) // application/x-www-form-urlencoded

app.post('/user', function (req, res, next) {
  console.log(req.body.userName)
  res.json(req.body)
})

req.body.key名で値を取得します。

5 cookies

// Cookie: userName=tanaka
console.dir(req.cookies.userName)
// => 'tanaka'

6. path

// http://example.com/user?userName=tanaka
console.dir(req.path)
// => '/user'

Getメソッド

const axios = require('axios');

// query
axios.get('/user?userId=xxxx')
  .then(function (response) {
    console.log(response.data);
  })

// paramsにパラメータを設定
axios.get('/user', {
    params: {
      userId: 'xxxx'
    }
  })
  .then(function (response) {
    console.log(response.data);
  });


async function getUser() {
  try {
    const response = await axios.get('/user?userId=xxxx');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

express.js側は、req.query.userIdのようにデータを取得します。
「/user/:userId」の形式「/user/xxxx」で送信する場合、req.params.userIdのようにデータを取得します。

Postメソッド

axios.post('/user', {
    firstName: '三郎',
    lastName: '田中'
  })
  .then(function (response) {
    console.log(response.data);
  })

express.js側は、req.body.lastNameのようにデータを取得します。

Deleteメソッド

axios.delete('/user', {data: {userId: 'xxxx'}}).then(res => {        
    console.log(res.data);     
 })

express.js側は、req.body.userIdのようにデータを取得します。

ファイルアップロードのイメージ

ユーザー写真、投稿写真などアップロードしたい場合はあります。
コードのイメージは下記の感じです。

const params = new FormData();
params.append("uploadFile", file);
params.append("userId", "xxxx");

const headers = {
  accept: "application/json",
  "Content-Type": "multipart/form-data"
};

const response = await axios.post('/api/file/upload', params, { headers: headers });

以上