プロジェクトの進行中に、バックエンドチームメンバーとリクエストと応答をテストする過程でいくつかのホットな問題が発生しました.
GETリクエストでクエリーしようとしたが、クライアントにエラーが発生した.
POSTMANでリクエストしたURLを送信して入っていけばきっとクエリがうまくいきます...
axiosのフォーマットも試して、fetchで報告できるものをすべて試してから気づきました.GET要求はPOSTやPUTなど他の方法と異なり,クライアントがサーバにデータを送信できない.バックエンドリクエストのデータを指定するのではなく、最初からparamsを使用する必要があります.このような経験をもとに、不足しているHTTP通信部分をしっかり分析することを決意しました.

HTTP

インターネットデータ交換プロトコル(ルール)

HTTPメッセージ

開始行、タイトル、本文構成

リクエスト

開始行(HTTPメソッド、アドレス、HTTPバージョン)、ヘッダ(要求された情報)、本文(要求時に送信データ)

.

応答

開始行(HTTPバージョン、ステータスコード、ステータスメッセージ)、ヘッダ(応答情報)、本文(要求データ)

REST

HTTPメソッドを動詞とするアドレスをリソースとする方式

.

さらに

GETおよびDELETE要求は、本明細書をどのように処理するかを定義していないので、本明細書を一緒に送信しない→Query String Parameters(例えば、/user?id=1&name=solda)

を使用する

サーバは、要求メッセージの本文を受信してパケット化(解析)し、

を使用する.

HTTPヘッダ

は種類が多いですが、今回のプロジェクトでは、よく見かけるタイトルを整理しておきたいだけです.

共通

コンテンツタイプ:クライアントからサーバにデータを送信する場合、www-url-form-encoded、multipart/form-dataなどを含む

リクエスト

Accept:リクエストを送信する場合は、このタイプ(MIME)のデータをサーバに送信してください.

ライセンス:JWTやBeareなどの認証トークンをサーバに送信する場合、API要求時に

を使用します.

Origin

応答

アクセス制御Allow-Origin:サーバにクライアントアドレスを書き込んでもエラーは発生しません

AJAX

JavaScriptを使用した非同期通信

クライアントとサーバ間でXML

を交換

XHR(XMLHttpRequest)オブジェクトは、ページ全体を再ロードする必要がなく、必要なデータ

のみをロードします.

axios

const options = {
        method: "POST",
        url: "http://www.example.com",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        },
        data: {
            key: value
        }
    };

axios(options);

自動変換

JSONデータ

応答タイムアウトを設定方法

がある.

ブラウザ互換性ガラス

は、

Promiseオブジェクト

を返します.

fetch

const url = "http://www.example.com";

const options = {
        method: "POST",
        mode: "cors",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        },
        body: JSON.stringify({
            key: value
        })
    };

fetch(url, options);

ES 6からJavaScript内蔵ライブラリまで、導入することなく

を使用できます.

サポートされていないブラウザ

は、

Promiseオブジェクト

を返します.

n/a.結論

Web開発を行う前に、ある程度HTTPの基本概念を学んでおけば、間違いと戦うのはずっと簡単です.プロジェクトを継続して行うことで、サーバとの通信を熟知することができます.