fetch関数を使用して会員登録とログインを実現

:フロントエンドとバックエンドは、データを交換しないときに不完全です.そのため、Reactはどのようにデータの交換を処理しますか?

1.全体の流れ

onChangeで変化する値を入力します.

ステータス(デフォルト)の変化値をsetSateで更新します.

回

を繰り返す

2回繰り返し

onClickイベント

fetch関数でサーバに入力された情報(値)を要求します.

サーバでResponseを行います.

サーバで、応答値に基づいてホームページを移動するか、アラートを発行します.

2.fetch関数の基本形式

fetch関数は、HTTP通信を行う際に用いられる関数である.

第1パラメータはAPIアドレスであり、第2パラメータはHTTP通信時に使用されるコンテンツである.

//기본 형식
fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

// 아래는 더 구체적인 예시 !
     //⬇️첫번째 인자   ⬇️ 두번째 인자(오브젝트)
fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id, // 변경 가능
        password: this.state.pw, // 변경 가능
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log("결과: ", result)); // console.log의 위치에 실행하고 싶은 함수를 적어두면 된다 :)

1. method

GET:サーバからデータをロードする場合
勘定科目勘定科目fetch()関数では、defaultメソッドはget

です.

POST:現局が処理すべきデータをサーバに送信する必要がある場合、

.
2. JSON.stringify()
:ObjectからStringに変換する方法.
:httpでデータを交換する場合はstring形式に変換する必要があります.
3. .then()
他のロジックに比べて通信に時間がかかるため、非同期処理を行い、メソッドを使用します.
➡️ then((response) => response.json())
:サーバから送信されたレスポンスをオブジェクトに変換します.
:最初のthen関数に渡されるパラメータ応答はhttp通信要求と応答に応答情報を含むオブジェクトである.Response Objectと呼ばれています
➡️ .then((result) => console.log(「結果:」,result);
: console.logの位置に実行したい関数を書けばいいです.
⑤¥バックエンドが応答体に与えられないことも多い.出典：YERIブログ

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
   {
       "name": string,
       "batch": number
   }

응답 body:
   1. 제대로 저장했으면 status code를 200 전달. 응답 body는 없음
   2. 권한 오류가 생기면 status code를 403으로 전달하고. 응답 body는 아래와 같음
       {
           success: false,
           message: "권한이 없습니다"
       }

fetch ⬇️

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

2.コード

▼▼▼私のコード

ААААААААААА🔑 値段を書き留めた.
¥bodyに渡さなければならない鍵の名前は、サーバ・データベースの名前と同じでなければなりません.
一致しないと、エラーが発生したステータスコードが出力される可能性があります.
🔑 バックエンドとの通信を試みる
わあ成功した🙌🏻

通信に成功すると、
いろいろ試してみました…!

入力ごとにエラーメッセージが書かれているので、情報によってユーザーに伝わると思うとわくわくします.👍🏻