axiosのメソッド

axios get postメソッドについて

開発環境
windows10 home
Ruby 2.6.3
Ruby on Rails 5.2.6
vue.js 2.6.14

axiosとは

ブラウザや node.js で動く Promise ベースの HTTP クライアントである｡

インストール

yarn add axios

Vueファイルにインポート

 import axios from 'axios';

getメソッド

import axios from 'axios';

 methods: {
    setMemo: function () {
     // axios.HTTP動詞('url')
      axios.get('/api/memos')
     // .then()で通信が成功した際の処理を書く。
      .then(response => (
     // Axiosで呼び出したAPIの情報をmemosに代入
        this.memos = response.data
     ))
   }
 }

axiosの HTTP動詞 や url はルーティングで確認。

routes.rb

api_memos GET /api/memos(.:format) api/memos#index {:format=>/json/}

postメソッド

 addMemo: function() {
  // axios.HTTP動詞('url')
    axios.post('/api/memos', {
  // 第二引数に送りたいデータを記載
       title: this.title,
       description: this.description
    })
  // .then()で通信が成功した際の処理を書く。
    .then(response => (
      this.setMemo()
    ));
 }

Google Chromeの拡張機能にTalend API Testerがあるので、
簡易的にデータが送信できているか確認することができます。
以上、axiosのメソッドについての記事でした。