🦔

Vue.js(Nuxt) API POST通信について

2023/11/15に公開

TypeScript

Vue.js

axios

tech

VueでAPI通信実装

業務にてAPI通信を初めて実装してみたので、その備忘録

axiosをインストール

APi通信に便利なのがaxios。これは調べればたくさんでてくるので割愛
下記から確認できます。

インストール

npm install axios

実装

業務ではTypescriptを使用していたので下記実装になります。
実装はブラウザ側です。バックエンド側ではありません。

import axios from 'axios'

const postData = () => {
 const url = 'https://zenn.dev' // 例
 const param = {
   'id':'○○id'
 }

 axios.post(url , param)
 .then((body) => {
  console.log(body.data)
 })
 .catch(error => {
     console.error(error)
  })
}

post通信時にparamを与えてそのレスポンスとしてthenメソッドのbodyに値がかえってきます。

あとはbodyのdataプロパティに返却さた値がかえってくるので欲しい値を参照してあげてください。
たとえば、console.log(body.data.email)とかで取得できると思います。
こちらは返却されたデータによりますので確認時は気を付けてください。

返り値を利用して何か他の動作をさせたい場合は、下記の様にthenメソッド以下で処理を追加すればよいです。

import axios from 'axios'

const postData = () => {
 const url = 'https://zenn.dev' // 例
 const param = {
   'id':'○○id'
 }

 axios.post(url , param)
 .then((body) => {
  console.log(body.data)
  if (body.status === 200) {
      console.log('成功')
  }
 })
 .catch(error => {
     console.error(error)
  })
}

はじめてのPOST通信でわからないこと多いですが一応こちらでできる様です。
ステータスコードとかまだまだわからないですけどね。

VueでAPI通信実装

axiosをインストール

実装

Discussion