fetch関数

バックエンドからデータを受信するにはapiを呼び出し、データ応答を受信する必要があります.JavaScript Web API fetch()関数またはaxiosライブラリを使用できます.
Web APIは、クライアントが利用できるJavaScript内蔵関数であることに注意してください.実際の作業ではaxiosは様々な理由で用いられることが多いが,fetch関数は一般的な機能を十分に実現できる.

fetch()関数のデフォルト値

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


// 위의 코드에서 화살표 함수를 ES5의 함수 선언식으로 바꿈
fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

上記のコードでは、変数のscopeは各関数であるため、最初のthenと2番目のthenのresは異なる.どちらも応答であるため,応答の略resを用いただけである.

メソッドがGETの場合

fetch()関数ではdefaultメソッドはgetです.では、fetch()を使用して以下のAPI仕様を表示するにはどうすればいいのでしょうか.

설명: 유저 정보를 가져온다.
base url: [https://api.google.com](https://api.google.com/)
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

fetch関数を用いた呼び出し方法

fetch('[https://api.google.com/user/3](https://api.google.com/user/3)')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

しかしapiアドレスから見るとuserの後ろの3はuseridである.固定apiであればjavascriptコードで固定して使用することもできますが、場合によっては柔軟にapiアドレスを変更する必要がある場合が多いです.
反応を行うと仮定すると、以下のように実現できる.

import React, { useEffect } from 'react';

function User(props) {
  useEffect(() => {
      const { userId } = props;
	    fetch(`https://api.google.com/user/${userId}`)
	      .then(res => res.json())
	      .then(res => {
	        if (res.success) {
	            console.log(`${res.user.name}` 님 환영합니다);
	        }
	    });      
    }, []);
  ...
}

方法はPOST

fetch()関数のデフォルト値はgetなので、何も書く必要がなくgetを呼び出し、postであればメソッド情報をパラメータとしてfetch()関数に渡す必要があります.
呼び出すapiがgetなのかpostなのか分からない場合は、もちろんapiを開発するバックエンド開発者に尋ねます.api情報を知っているのはapiを作成した開発者だけです.
では、以下のapi宣言を受け取った場合、fetch()はどのように使用されますか?

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

응답 body:
    {
        "success": boolean
    }

fetch関数を用いた呼び出し方法

fetch('[https://api.google.com/user](https://api.google.com/user)', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

第2因子への送信方法と体.

methodはpost

bodyはJSON形式で送信する.オブジェクトをパラメータとしてstringfy()関数に渡し、JSON形式に変換します.

fetch関数はpost経由でデータを送信する場合はJSONです.stringfyが必要ですが、axiosにはオブジェクトを直接作成できる便利な点があります.これにより、axiosはわずかな利便性を提供し、リクエストと応答に拡張可能な機能を作成することもできます.

メソッドはgetですが、パラメータを渡す必要があります。

上記のget例では、3というuseridをpathに渡します.しかしpathではなくquery stringである可能性もあります.
いつpathで文字列をクエリーできるかというのではなく、例なので同じapiを使いました.バックエンド開発者にデータの転送方法も尋ねる必要があります.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

apiアドレスの後ろに貼ればいいです.

fetch('[https://api.google.com/user?id=3](https://api.google.com/user?id=3)')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

res.json()の意味

postの例では、すべてのコードに2つのthen、最初のthenがあります.  res => res.json()  一体何だろう.

fetch('[https://api.google.com/user](https://api.google.com/user)', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())   // 왜 then이 두개고 res.json() 은 뭔지?
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

最初のthenのresが返す値が何であるかを知りたい場合は、res.json()consoleを返します.ロゴを撮ってくださいもしそうであれば、上記の矢印関数のconsoleを使用できます.ロゴを撮るにはどうすればいいですか?すぐに返される矢印関数でボディを再作成する必要があります.関数宣言形式には変更されませんが、マスターの矢印関数を追加するように変更します.

fetch('[https://api.google.com/user](https://api.google.com/user)', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {       // 첫 번째 then
    console.log(res);  // 어떤 값이 나오는지 확인해보세요. 실제 잘 작동하는 api 주소가 필요합니다.

    return res.json();
  })
  .then(res => {       // 두 번째 then
    if (res.success) {
        alert("저장 완료");
    }
  })

最初のthen関数に渡されるパラメータ  reshttp通信要求と応答に応答情報が含まれているオブジェクトである.応答オブジェクトと呼ばれます.
しかしながら、コンソールをチェックすると、バックエンドから伝達される応答body、すなわち実際のデータは見えない.すなわち  { success: true }  JSONデータとは、上のコードがコンソールに写らないものです.
応答として受信したJSONデータを使用するには,応答オブジェクトのjson関数を呼び出して返す必要がある.これにより、2番目のthen関数はbodyに応答するデータを受信することができる.

最初のthen関数に追加する論理

上の内容を読みます.  fetch().then().then()  形状さえ覚えれば良いのですが、バックエンドがbodyに応答しない場合が多いので説明が必要です.
応答体はJSONデータを提供しませんが、フロントで応答オブジェクトのjson()を呼び出すとエラーが発生します.以下の状況を考えることができます.

설명: 유저를 저장한다.
base url: [https://api.google.com](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](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);
  })

Reference

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://developers.google.com/web/updates/2015/03/introduction-to-fetch