REST APIとFetch API

38475 ワード

Fetch API REST API テキストリンク

了解してくれ！

紹介する

정의

HTTP要求伝送のクライアントWeb API

クライアント→サーバ:request

サーバ→クライアント:レスポンス

Axiosライブラリとは異なり、ブラウザに内蔵されている関数

1)サーバとの通信によりCRUDを実現する;2)インフラストラクチャサポート機能を内蔵する

사용법

const promise = fetch(url [, options])

params

1パラメータ:HTTPリクエストを転送するためのurl

2パラメータ:オプションオブジェクト(HTTPリクエストメソッド、HTTPリクエストヘッダ、ロードなど)

returnパッケージHTTP応答オブジェクトのPromiseオブジェクトを返します

Responseオブジェクト:
HTTP応答状態(status)、HTTP応答ヘッダ(header)、HTTP応答全文(body)などを読み取ることができる.

Ex: Code

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => console.log(response))

Result

Response.okHTTP応答が成功したかどうかの属性

true=200-299ステータスコード(応答成功)

false=not(応答失敗)

Response.statusHTTPステータスコード=サーバからリクエスト結果を送信します.つまり、クライアントがサーバにリクエストを送信すると、サーバはその結果を通知します.

ステータスコードクラス
クラス記述は1 XXXInformation要求を受け入れ、2 XSuccess要求の処理時に正常に処理された.3 XXXRedirection要求を完了するために、他の操作を実行する必要がある.4 XXClient Errorサーバは要求5 XServer Errサーバ要求処理失敗

を理解できない.

Response.redirected3 XXリスナーは、要求を正常に終了するためにブラウザに特別な処理を実行する必要があることを示します.

EX:Naver Cafe一般会員が「特定レベル会員」フォーラムに入ろうとした場合は、「警告」ページに移動してください

Response.プロトタイプメソッド

Response.prototype.jsonResponseオブジェクトHTTP応答ボディ(Response.body)を取得し、逆シーケンス化

JSON逆シーケンス化:JSON.parse
: JSON.parseメソッドはJSON形式の文字列をオブジェクトに変換します.
サーバからクライアントに送信されるJSONデータは文字列です.
JSON形式文字列をオブジェクト化!=“역직렬화” EX

const todos = [
  {id: 1, content: 'HTML', completed: false},
  {id: 2, content: 'CSS', completed: true},
  {id: 3, content: 'JS', completed: false}
]

// 배열 todos를 JSON 포맷의 문자열로 변환
const json = JSON.stringify(todos);
console.log(typeof(json), json);
// string [{"id":1,"content":"HTML","completed":false},{"id":2,"content":"CSS","completed":true},{"id":3,"content":"JS","completed":false}]

// JSON 포맷의 문자열을 배열로 변환한다.
// 배열의 요소까지 객체로 변환된다.
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
/*
object [
	{id: 1, content: 'HTML', completed: false},
  {id: 2, content: 'CSS', completed: true},
  {id: 3, content: 'JS', completed: false}
]
*/

GET要求コードの修正:逆シリアル

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((json) => console.log(json))
// {userId: 1, id: 1, title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit', body: 'quia et suscipit\nsuscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto'}

Hong通信ルール「REST API」!

✔登場背景

開発者が~勝手に通信しすぎて、他の開発者は理解しにくい!
GETがあるので、もちろん特定のデータを受け取ると思いましたが、データを削除しましたか?
通信ルールを確立して、お互いに理解しましょう.

✔定義

HTTP統一アーキテクチャ

HTTPプロトコルの提案

REST APIは、HTTPリクエストの内容

を理解することができる

✔配置

REST APIの3つの要素

リソース(Resource)

動作(Verb)

ひょうじほう
コンポーネントコンテンツ表示方法リソースURI動作リソースの動作HTTP要求方法表示リソースの動作の具体的なコンテンツペイロード

✔設計原則

➀URIはリソースを表す必要があります.

資源を名詞で表す!名前の中で行為を表現することを禁止します!

EX:

// bad
GET /getTodos/1
GET /todos/show/1

// good
GET /todos/1

➁リソースの動作をHTTPリクエストメソッドで表す.

HTTPリクエストメソッド

定義:クライアントが要求タイプと宛先(リソースの動作)をサーバに通知する方法

GET, POST, PUT, PATCH, DELETE
HTTPリクエストメソッドタイプ目的ペイロード取得/取得すべて/特定リソースXPOSTCREATTEリソース生成OPUTReplaceリソースの完全置換OPATCHMODifyリソースの一部修正ODELEETEMETE特定リソースXをすべて削除/削除

すべて/特定のリソース?

すべて:todos

特定:todos/1

リソースの動作はURIではなくHTTPリクエストメソッドで表される.

EX:

// bad
GET /todos/delete/1

// good
DELETE /todos/1

⑪Fetch api練習

では今fetch関数でHTTPリクエストを送信しましょう!
仮想REST APIを提供するJSOnPlaceholderのWebサイトを使用して実践します.
JSONPlaceholder

［1］GET方法

GETには送信するデータがないからです. 見出しと body オプションは必要ありません.

// GET 요청
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

// HTTP response.body 역직렬화
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}

［2］POST方式

fetch(url, {method, headers, body})

method=HTTPリクエストメソッド

headers=HTTPヘッダ

“Content-Type”

定義:HTTPメッセージに含まれるデータ型のヘッダ

EX:
「Content-Type」:「アプリケーション/json」=JSON形式でデータを送信
(ref)
コンテンツタイプヘッダと受信ヘッダの[HTTP]HTTPヘッダにおける用途と区別

body=body内にペイロードを作成

payload

ペイロードこれは、転送するデータを意味します.

データを転送すると、タイトル、メタデータ、エラーチェックビットなどの様々な要素が同時に送信され、データ転送の効率と安定性が向上します.

送信する必要がありますプロトコルオーバーヘッド

これは、ペイロード以外のすべてのデータが通信に使用可能な二次情報であることを意味する.

EX:
レスポンスデータ

{
  "status" : "OK"
  "from": "localhost",
  "to": "https://hanamon.kr/users/1",
  "method": "GET",
  "data":{ "username" : "하나몬" }
}

冗長データはペイロードです.
クライアントがサーバに要求した場合も、データ・オブジェクトを本文に配置します.

status code: 201 created

POSTは正常に生成された.

生成されたリソースは、応答メッセージ本文(body)とともに提供される.

코드

fetch("https://jsonplaceholder.typicode.com/posts", {
	// method 옵션 POST 지정
  method: "POST",
	// JSON 포맷 (JSON으로 보낼거야~)
  headers: {
    "Content-Type": "application/json",
  },
	// body안에 payload 넣기
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

{title: "Test", body: "I am testing!", userId: 1, id: 101}

async / await

async function run() {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts`, {
        method: 'POST',
        body: JSON.stringify({
          title: "HI",
          body: "NICE TO MEET YOU",
          userId: 1,
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      }
    )
    const payload = await res.json();
    console.log(payload);
  }

[3]PATCH方法

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "프론트공부",
    body: "프론트를 사랑하는 프론트공부"
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

{userId: 1, id: 1, title: '프론트공부', body: '프론트를 사랑하는 프론트공부'}

[4]PUT方式

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

{title: 'Test', userId: 1, id: 1}

[5]DELETE方式

DELETEには送信するデータがないからです. 見出しと body オプションは必要ありません.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data));

// {}

[+]requestオブジェクトを作成して取得!

fetchメソッドを作成するたびに面倒なので、オブジェクトとして保存しておくと便利でしょう.request 객체

const request = {
	get(url) {
  	return fetch(url);
  },
  post(url, payload) {
  	return fetch(url, {
    	method: 'POST',
      headers: { 'content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
  },
  patch(url, payload) {
  	return fetch(url, {
    	method: 'PATCH',
      headers: { 'content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
  },
  put(url, payload) {
  	return fetch(url, {
    	method: 'PUT',
      headers: { 'content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
  },
  delete(url) {
  	return fetch(url, {method: 'DELETE'});
  }
};

POST 예시

request.post('https://jsonplaceholder.typicode.com/posts', {
    id: 1,
    userId:1,
    title: "프공",
    body: "프론트공부"
})
.then(res => res.json())
.then(data => console.log(data));

DELETE 예시

request.delete("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

(ref)

JavaScript fetch()関数を使用してリモートAPIを呼び出す

fetch

ネットワーク/HTTPのペイロードとは?

コンテンツタイプヘッダと受信ヘッダの[HTTP]HTTPヘッダにおける用途と区別

Reference

この問題について(REST APIとFetch API), 我々は、より多くの情報をここで見つけました https://velog.io/@dev-redo/REST-API와-Fetch-api

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

超実用1 ArrayListチェーンテーブル

インラインスタイル