axiosの使用

reactijsを勉強しているときにバックグラウンドの友达が書いたapiを使う必要があります.
通信ライブラリでAxiosを使用することにしました.
JSで非同期http通信に使う方法は(Ajax,Axios,Fetch)の3種類!
その中で私がAxiosを選んだ理由は以下の通りです.

ニコ先生が使った庫だから!

node.jsとブラウザのhttp通信ライブラリ.

fetchとは異なり、クロスブラウザ

サポート

promise、いくつかのフレームワークで使用することをお勧めします!

しかしaxiosはライブラリをインストールする必要があります...
次の写真はaxios式です.

Rest API

前に作ったREST APIの部分がイマイチだったので説明しておきましょう!
Rest APIは、私が実行したい操作に応じて、他の方法で要求することができる.
Rest APIは、以下のHTTP手法を行動手段として使用する.

GET:データ照会

POST:データ登録と転送

PUT:データ修正

DELETE:データ消去

Axios四種類の基本Param

Method

Url

Data(optional)

Params(optional)

axiosを使用する基本的な方法

GETメソッド

axios({
    method : "get",
    url : "http:?/localhost:5000",
    responseType : "type"
}).then((res) => {
    console.log(res)
})

これは基本getメソッドを用いたaxiosメソッドである.

axios({
    method : "GET",
    url : "http:?/localhost:5000",
    responseType : "type"
}).then((res) => {
    console.log(res)
})

Postメソッド（データ転送）

Postメソッドを使用する場合はurlの下にデータオブジェクトを追加できます.

axios({
    method : "POST",
    url : "http:?/localhost:5000",
    data : {
         id: postId
    }
    responseType : "type"
}).then((res) => {
    console.log(res)
})

PUTメソッド（データ修正）

PUTメソッドがget->postを内部で通過する場合、postメソッドと同様

axios({
    method : "PUT",
    url : "http:?/localhost:5000",
    data : {
         title, content
    }
    responseType : "type"
}).then((res) => {
    console.log(res)
})

削除方法(データ削除)

deleteメソッドは通常body空です.

axios({
    method : "DELETE",
    url : "http:?/localhost:5000/post/1",
    responseType : "type"
}).then((res) => {
    console.log(res)
})

次のコードは実際の壁プロジェクトで使用される掲示板APIモジュールです.