前後のインタラクティブな3(Fetctの基本的な使い方--Requestオブジェクト、Headersオブジェクト、Responseオブジェクト、text()、json()FetchとXMLHttpRequestの違い)

目次
1.fetch()の基本的な使い方
2.fetch(url,options)のパラメータ解析
2.1最初のパラメータは要求url
2.2 2番目のパラメータoptionsオブジェクトの共通構成
3.FetchのHeadersオブジェクト
4.FetchのResponseオブジェクト
4.1Response.clone()
4.2Response.json()
4.3Response.text()
5.FetchとXMLhttpRequestの違い
1.fetch()の基本的な使い方

fetch("/test").then(res=>{
            return res.json();
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

2.fetch(url,options)のパラメータ解析
2.1最初のパラメータは要求url
最初のパラメータはリクエストurlです
2.2 2番目のパラメータoptionsオブジェクトの共通構成
2番目のパラメータoptionsオブジェクトの一般的な構成:method:使用を要求する方法、例えばGET、POST。headers:要求されたヘッダ情報の形式はHeadersのオブジェクトまたはByteString値を含むオブジェクトの字面量である.body:要求されたbody情報:1つBlob・BufferSource・FormData・URLSearchParams・またはUSVString対象となります.注意GETまたはHEADメソッドのリクエストにはbody情報は含まれません.mode:要求のパターン、例えばcors、no-corsまたはsame-origin。

same-origin同源でなければならないことを示し、ドメイン間では絶対に禁止されています.これは古いバージョンのブラウザのデフォルトのセキュリティポリシーです.

no-corsこれは特殊なもので、字面ではCORSの形でドメインをまたぐことは禁止されているという意味であるが、その効果は、外部ドメインへの要求は送信可能であり、外部ドメインサーバは設置されていなくてもAccess-Control-Allow-Origin: *いずれも要求を受信して処理するが、ブラウザは応答を受信せず、外部ドメインがコンテンツを返してもブラウザは受信していないものとする

3.FetchのHeadersオブジェクトHeaders()コンストラクション関数を使用して、独自のheadersオブジェクトを作成できます.

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately")

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

 
4.FetchのResponseオブジェクト
4.1Response.clone()
Responseオブジェクトのクローンを作成する
4.2Response.json()
Responseオブジェクトを読み取り、それを読み取り済みに設定し(Responsesオブジェクトはstreamに設定されているため、一度しか読み込めない)、JSON形式に解析されたpromiseオブジェクトを返します.
4.3Response.text()
Responseオブジェクトを読み取り、それを読み取り済みに設定し(Responsesオブジェクトはstream方式に設定されているため、一度しか読み込めない)、USVstring形式に解析されたpromiseオブジェクトを返します.
5.FetchとXMLhttpRequestの違い

fetch進捗を監視できない

fetch互換性