呼び出し[react]api

今回のリリースではreactのapi呼び出しについて説明します.
REST APIとは?
HTTPメソッドでサーバやクライアントと通信する場合、相手がどのような通信を要求しているのか、私がどのような通信を必要としているのかを判断するために使用できます.
基本的には、BackEndとFrontEndはそれぞれサーバを管理するのでrest apiでデータを交換します.

BackEnd (Spring)
データ値はREST API方式でurlに送信される.

FrontEnd (React)
リクエストを送信したURLに送信します.
対応する結果値が応答します.

サーバと通信する方法にはfetchとaxiosの2種類があります.機能的には同じですが、使い方が違います今回はaxiosを使いました.

$npm install axios

イメージアップロードサービス

upload-files.service.js

フラスコ予測の結果,jsonデータが得られた.
＞ 「プロジェクト構造」を参照

class UploadFilesService {
    async upload(file, onUploadProgress) {
        let formData = new FormData();
        formData.append("file", file)

        const returnJSON = axios.post("/uploadFile", formData, {
            headers: {
                "Content-Type": "multipart/form-data"
            },
            onUploadProgress,
        });

        return JSON.parse((await returnJSON).data.predictinfo)
    }

    async getFiles() {
        return http.get("/uploadFile");
    }
}

export default new UploadFilesService();

内部アップロード()メソッドは、FormDataキー値ペアを格納するために使用されます.append()メソッドを使用すると、HTMLフォーマットに対応するオブジェクトの作成に役立ちます.

これにより、Rest APIを使用して、Flaskが予測した結果値とSpringのDBに接続された情報とが一致するデータ値をロードすることができる.