fetch

今回最初のプロジェクトをしたとき、fetchという方法を選びました.
そこで、Velogでコンセプトのまとめと復習を書いてみましょう.

fetchの用途

最初のプロジェクトを行うとき、fetchという方法は最初は何なのか分かりませんでした.
しかし簡単に考えるとjavascriptを使って、必要に応じてネットワークにリクエストを送信して情報を受信すると便利です.
承諾されたステータスに基づいて、論理的な追加と処理を最適化します.

use fetch

fetchは、上述したようにpromiseオブジェクトに戻ります.
返される応答は実際のjsonではないため、json()という方法を使用して応答から必要な値を取得する必要があります.

structure

まずデフォルトのfetchを使用する構造を見てみましょう

fetch('url')
.then(response => response.json())
.then(json => console.log(json))

上の構造はfetchを用いた基本スケルトンです.
fetchという名前のメソッドでは、まずデータを交換するためのurlアドレスを作成します.
次に、最初のthen応答のデータをjsonオブジェクトに変換します.
これは、jsonファイルをネットワークからインポートし、コンソールに印刷することを意味します.

fetchによるログインページ

signIn = () => {
  fetch(LOGIN_API, {
    method:"POST",
    body:JSON.stringify({
      email:this.state.id,
      password: this.state.pw,
    }),
  })
  .then(response => response.json())
  .then(result => {
    if(result.message === "SUCCESS"){
      alert("Login SUCCESS");
      localStorage.setItem("token",res.TOKEN);
    }else alert("FAIL)
                });
  };

上のコードではconfigで「LOGIN API」として保存されている場所
ステータス値idとpw、tokenを使用してバックエンドと通信してログインし、localStorageにトークンを格納
最も基本的な方法は、プロジェクトの進行中にログインページでfetchを使用することです.
fetchの完全なプロセスを理解します.