search
LoginSignup
27

More than 1 year has passed since last update.

posted at

updated at

axiosの基本的な使い方

axiosとは

HTTP通信(データの更新・取得)を簡単に行うことができる、JavaScriptのライブラリ。
APIを提供するクラウドサービスに対して、データを送受信することができる。

インストール

$ npm install axios

CDNの使用


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

主なメソッド

Githubでは以下のメソッドが使用できると記載されています。

スクリーンショット 2021-02-25 19.05.11.png
今回は基本的なメソッドである、get,post,delete,put、またconfigオブジェクトについて軽く紹介してきます。

axios.get(url)

HTTP通信(API通信)でサーバーからデータを取得するには、axios.get()関数を使用することで実現可能です。

// GETリクエスト(通信)
const url = axios.get("http://localhost:3000/")

    // thenで成功した場合の処理
    .then(() => {
        console.log("ステータスコード:", status);
    })
    // catchでエラー時の挙動を定義
    .catch(err => {
        console.log("err:", err);
    });

結果
ステータスコード200 //http通信でデータ取得の成功

axios.post(url)

データをサーバーへ情報を送るときは、axios.post()メソッドで可能


//POSTリクエスト(通信)
const data = { firstName : "Taro", lastName : "Yamada" }
const url = axios.post("http://localhost:3000/user/123", data)

        .then(() => {
            console.log(url)
        })

        .catch(err => {
        console.log("err:", err);
        });

結果
Yamada Taro //サーバーへYamada Taroを送信

axios.delete(url)

データを削除する場合は、axios.delete()メソッドを使います。ただし、データIDで識別するため、IDを指定しないといけません。

const url = axios.delete("http://localhost:3000/user/123")

        .then(() => {
            console.log('削除ID:',url)
        })

        .catch(err => {
        console.log("err:", err);
        });

結果
削除ID:123 

axios.put(url)

データを更新する時は、axios.put()メソッドを使いますが、こちらもIDを指定しないといけません。

const data = { firstName : "Taro", lastName : "Qiita" }
const url = axios.put("http://localhost:3000/user/123",data)

        .then(() => {
            console.log('データ更新:',url)
        })

        .catch(err => {
        console.log("err:", err);
        });

結果
データ更新Qitta Taro

configオブジェクト

configオブジェクトの形でも、上記のメソッドを使用することができます。

axios({
     method: "get",
     url: "http://localhost:3000/user/123",
     data: {firstName : "Taro", lastName : "Yamada" }
    })

    // thenで成功した場合の処理
    .then(() => {
        console.log("ステータスコード:", status);
        console.log(res.data)
    })
    // catchでエラー時の挙動を定義
    .catch(err => {
        console.log("err:", err);
    });

結果
ステータスコード200
Yamada Taro

参考にさせていただいたサイト

https://reffect.co.jp/vue/vue-axios-learn#i-2

感想

axiosを使用することで、API通信が簡単に行えることがわかりました。また、非同期処理のasync,awaitを使用することで可読性の高い非同期通信を行えるので、実践してみます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
27