HTTPリクエスト

概要

HTTPはハイパーテキスト転送プロトコルを表し、インターネット上のリクエストやレスポンスを構造化するために使用されます.HTTPは、データを1ポイントから別のネットワークに転送する必要があります.TCPチャネルはこれらの接続を行う主要な手段です.ここでは、抽象化のない純粋なバニラHTTPサーバーに入る記事ですArticle Vanilla Server .
こんなことをするのは悪いことはない.それはちょうどより多くのコードです、そして、あなたはネットワークとhow HTTP works , and XMLHttpRequests
言うまでもなく、私はむしろこれらのことを抽象化し、時間をかけてそれらを学びます.

バニラ要求例

私はこれをxhrのバニラ、HTTPライブラリの小さな例にしようとしたが、過度に複雑な、うまくいけば、後にフェッチの有用性を強調した.

const XHR = new XMLHttpRequest();

XHR.onload = function XHRcall() {
  try {
    if (XHR.status >= 200 && XHR.status < 300) console.log(`success!`, XHR.response);
  } catch (error) {
    console.log(`The request failed!`, error);
  }
};
// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
XHR.open(`GET`, `https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699`);
XHR.send();

これはブラウザコンソールで直接ペーストします.
ブラウザコンソールでの私の実装です.構築されたXHRオブジェクトをログオンするコンソールが不要ではないように、コードスニペットを修正しました.😁

どこにフェッチが来る.

他のオプションはありますか?絶対!Axios、スーパーエージェント、リクエスト.名前を付ける.彼らは皆、賛否両論を持っている.私が取得以外の何かを選ぶならば、それは機能的である約束のベースのクライアントであるAxiosであるでしょう.なぜフェッチを使用するかを選択しますか?大きな利点は、ネイティブブラウザのAPIであるため、多くのブラウザ全体でサポートされています.さて、もともとフェッチはフロントエンド(ブラウザ側)でしか使えませんでした.node-fetch fetch in nodeを使用します.JSと今すぐフロントエンドやバックエンドでシームレスに使用することができます.

取得と利益の概観

それは柔軟で、非常によく文書化されます.

それはなめらかできれいな構文を持っています.

約束を有効にするか、非同期/それを待つ.( async/waitを指定します)

ほとんどすべての近代的なブラウザでサポートされていない場合.

要求応答アプローチに従います.

フェッチ例

import fetch from "node-fetch";

// More configs can be added to the headers from the 2nd argument object.
// Here I just explicitly set method to GET request. 
const response = await fetch(
  `https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699`,
  { method: `GET` }
);
const myJson = await response.json();
console.log(JSON.stringify(myJson));

私は小さなnodejs例で、ローカルにそれを走らせることができました.

🚧 🚧 🚧 続く?🚧 🚧 🚧
🚨 私は小さなJSON Expressサーバーを作成し、取得するためにフェッチを使用して“終了点”へのデータをポストを使用して追加する可能性がありますこの記事に従ってください.🚨