JavaScriptの取得例

JavaScript FETAPIはHTTPリクエストとレスポンスをアクセスして操作するインターフェイスを提供します.このチュートリアルでは、JavaScriptを使用する例を作成しますfetch() get/post/put/deleteリクエストを作成する方法.最後のセクションでは、JavaScriptのREST APIから対話してデータを取得する簡単なフェッチHTTPクライアントを示します.
関連記事:

React Fetch example with Rest API

Vue Fetch example with Rest API

Axios Tutorial: Get/Post/Put/Delete request example

完全な記事BezKoder
JavaScriptの取得概要
JavaScriptのフェッチAPIはグローバルfetch() ネットワーク上で非同期的にリソースを取得する方法を提供するメソッドです.fetch() aを解決する約束を返すResponse を返します.

const responsePromise = fetch(resourceUrl [, options]);

基本的な取得要求は次のようになります.

fetch('/bezkoder.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

JavaScriptフェッチ応答データ
The Response 上記のオブジェクトはHTTPレスポンス全体を表します.レスポンスの実際のJSON本体を取得するには、次のメソッドを使用します.

response.arrayBuffer() : と解決する約束を返すArrayBuffer .

response.blob() : aを解決する約束を返すBlob .

response.error() : ネットワークエラーに関連付けられた新しい応答オブジェクトを返します.

response.formData() : aを解決する約束を返すFormData .

response.json() : パースの結果をJSONとして解決するプロミスを返します.

response.text() : テキストで解決する約束を返します.

JavaScriptフェッチ応答メタデータ
また、メタデータなどにアクセスできますheaders , status , statusText , type , url からResponse 対象:

fetch('/bezkoder.com/data').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

フェッチエラー処理
応答エラーはHTTPエラーでは拒絶されません(例:404 , 500 ). ネットワークエラーに遭遇するとき、それは拒絶します.だから我々はthen() HTTPエラーをチェックするにはresponse.ok 状態および/またはresponse.status プロパティ.

fetch('/bezkoder.com/data')
  .then(function(response) {
    // if (response.status !== 200)
    if (!response.ok) {
       console.log('Error with Status Code: ' + response.status);
       return;
    }

    response.json().then(function(data) {
      console.log(data);
    });
  })
  .catch(function(err) {
    console.log('Error: ' + err);
  });

フェッチをキャッチ
async waitを使いたい場合は、try/catchブロックでフェッチコールをラップします.

async function getData() {
  try {
    const response = await fetch('/bezkoder.com/data');

    if (!response.ok) {
      const message = 'Error with Status Code: ' + response.status;
      throw new Error(message);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error: ' + err);
  }
}

paramsでフェッチする
使えますURL オブジェクトURLSearchParams クエリ文字列paramsを設定するには

let url = new URL('/bezkoder.com/data');
const params = { title: 'web'};
url.search = new URLSearchParams(params);

try {
  const response = await fetch(url);

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

これは等価です.

const response = await fetch('/bezkoder.com/data?title=web');

ヘッダでフェッチする
ヘッダで取得リクエストを送信するには、オプションオブジェクトをmethod and headers プロパティ.

const options = {
  method: 'get',
  headers: {
    "Content-Type": "application/json",
    "x-access-token": "token-value",
  }
};

try {
  const response = await fetch('/bezkoder.com/data', options);

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

JavaScriptフェッチポスト
ポストフォームデータを取得する
ポストリクエストを作成しましょうFormdata にbody とします.

let formData = new FormData();
formData.append('title', 'BezKoder Tutorial');
formData.append('description', 'Tut Desc');

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "post",
    // headers: {
    //   "Content-Type": "application/x-www-form-urlencoded"
    // },
    body: formData
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

あなたが使うならばapplication/x-www-form-urlencoded , キーと値はキー値タプルでエンコードされます.
フェッチポスト
JSONでポストリクエストを作成しましょう.
使用するJSON.stringify() それを通過する前のオブジェクトにbody リクエストとセットのapplication/json ヘッダContent-Type .

const postData = {
  title: title,
  description: description,
};

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "post",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(postData)
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

フェッチポストファイル
ファイルの操作は、フォームデータを使用して前のものと同様です.

let formData = new FormData();
// formData.append('title', 'BezKoder Tutorial');
// formData.append('description', 'Tut Desc');
formData.append('file', file);

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "post",
    body: formData
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

我々は、設定する必要はありませんContent-Type ヘッダmultipart/form-data . ブラウザは自動的にフォーム境界を含む適切なコンテンツタイプヘッダーを選択します.
JavaScriptフェッチ
JSONデータを使用してフェッチプット例を生成します.fetch postリクエストと似ています.

method: "put"

"Content-Type": "application/json"

使用JSON.stringify() 物体に

const postData = {
  title: title,
  description: description,
};

try {
  const response = await fetch('/bezkoder.com/data', {
    method: "put",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(postData)
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

フェッチ削除例

try {
  const response = await fetch('/bezkoder.com/data/42', {
    method: "delete"
  });

  if (!response.ok) {
    const message = 'Error with Status Code: ' + response.status;
    throw new Error(message);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.log('Error: ' + err);
}

Read APIを使用したJavaScriptの取得例
HTTPクライアントをビルドし、CRUD要求をREST APIに設定します.

取得取得要求:すべてのチュートリアルを取得し、idでチュートリアルを取得するチュートリアルを見つける

fetch post request :新しいチュートリアルを作成する

fetch put request :既存のチュートリアルを更新する

フェッチ削除要求:削除チュートリアル

このフェッチクライアントは次のWeb APIで動作します.
方法
URL
アクション
ポスト
/API/チュートリアル
チュートリアル
ゲット
/API/チュートリアル
すべてのチュートリアルを取得する
ゲット
/API/チュートリアル
チュートリアルを取得する:idプット
/API/チュートリアル
チュートリアル更新:id削除
/API/チュートリアル
チュートリアル削除:id削除
/API/チュートリアル
チュートリアル削除
ゲット
/API/チュートリアル?title =[キーワード]
タイトルが含むすべてのチュートリアルを見つけてくださいkeywordこのようなサーバを構築するには、次のいずれかの手順を踏んでください.

Express, Sequelize & MySQL

Express, Sequelize & PostgreSQL

Express, Sequelize & SQL Server

Express & MongoDb

Spring Boot & MySQL

Spring Boot & PostgreSQL

Spring Boot & MongoDB

Spring Boot & SQL Server

Spring Boot & H2

Spring Boot & Cassandra

Spring Boot & Oracle

Django & MySQL

Django & PostgreSQL

Django & MongoDB

詳細はこちらをご覧ください.
https://www.bezkoder.com/javascript-fetch/
結論
このJavaScriptフェッチチュートリアルでは、取得APIを使用してget/post/put/deleteリクエストを作成する多くの方法を知りました.また、フェッチ要求でエラーを処理する方法を知っているか、try/catch文でasync/waitを使用します.
フェッチAPIの代わりに、また、ノードのための約束ベースのHTTPクライアントJavaScriptライブラリであるAxiosを使用することができます.jsとブラウザ親愛なる訪問
Axios Tutorial: Get/Post/Put/Delete request example
ハッピーラーニング!また会いましょう.
更なる読書
Using Fetch with React:
React Fetch example with Rest API
Vueを使って:
Vue Fetch example with Rest API
以下のいずれかの反応/vueアプリケーションで使用することができます( axosの代わりにfetchを使用します).

React CRUD example with Axios

React Redux CRUD example with Axios

Vue 2 CRUD example with Axios

Vue 3 CRUD example with Axios