ログオン原価入取関数

10356 ワード
ログイン原価収益 テキストリンク 
goToMain = () => {
    fetch(`${BASE_URL}/users/signin`, { // 1번째 인자 : api주소
      method: 'POST',
      body: JSON.stringify({ //http통신을 할땐 JSON형식으로 통신 한다라고 규약돼있음. js객체를 JSON형식으로 바꿔달라라는 요청.
        email: this.state.email,
        password: this.state.password,
      }),
    })
      .then(res => res.json()) //JSON형식으로 통신했긷때문에 응답도 JSON으로 들어옴.그것을 js 객체형식으로 다시 바꿔주는 코드
      .then(res => { // js객체형식으로 바꾼것을 가지고 요리를 시작
        if (res.token) {
          localStorage.setItem('token', res.token);
          alert('로그인 되었습니다.');
          this.props.history.push('/');
        } else {
          alert('아이디와 비밀번호를 확인하세요');
        }
      });
  };
≪同期化｜Synchronize｜oem_src≫:次の行に進むには、コードごとに1行ずつ実行する必要があります.
非同期:順次実行(1行1行のコードを待たない)
fetch関数は非同期です.
なぜ?>>HTTP通信は、他の論理よりも長い時間を要するため非同期である.
通信が完了するまで待つと、UXはめちゃくちゃになります.
  • 通信ではString形式のJSONを送信する必要があるため、JSON.stringify()という方法で既存のJavaScriptオブジェクトからJSON Stringにフォーマットを変換する.
    JSではPromiseオブジェクトは非同期を扱う構文である.
    したがって、fetch関数はPromiseオブジェクトを返します.
    次に()メソッドはPromiseオブジェクトに使用できるメソッドです
    応答もJSON形式で現れるので、jsオブジェクト形式で<-then()1を返さなければなりません.
    • jsはオブジェクト形式化を用いて以下の論理<-then()の2番目を実現する

    GET vs POST

  • GET
  • defaultメソッドはgetです.
    • DBからデータを受信した場合.
    body:いいえ.
    DBにデータを渡す必要がないからです.
  • POST(登録/登録コスト)
    データベースにデータを追加、変更、または削除する場合.

    • Fetch(GET)


    説明:プレイヤー情報を取得します.
    base url: https://api.google.com
    endpoint:/user/3
    method: get
    応答形式:
    {
    "success": boolean,
    "user": {
    "name": string,
    "batch": number
    }
    }
    fetch('https://api.google.com/user/3')
.then(res => res.json())
.then(data => {
if(res.success){
console.log(`${res.user.name}님 환영합니다`);
}})

    Fetch(POST)


    *呼び出すapiはgetまたはpostです.バックエンド開発者にお問い合わせください.
    
```base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    {
        "success": boolean
    }
    fetch('https://api.google.com/user',{ 
method: post,
body : JSON.stringify({
        name: "steve",
        batch: 1
    })
})
.then(res => res.json())
.then(data => {
	if(res.success){
    	alert('저장 완료');
    }
})
    2番目のパラメータとしてmethodとbodyを送信します.
  • 以降Axiosを習うときはJSONstringgifyを必要としないメリットがあります.
    • #34-認定&承認2
    メモ6-gen_event