Fetch vs. AjaxCall

Question

典型的なAJAXとFetch APIの違いは何ですか？

は、このシナリオを考えてみましょう：

function ajaxCall(url) { 
    return new Promise(function(resolve, reject) { 
    var req = new XMLHttpRequest(); 
    req.open('GET', url); 

    req.onload = function() { 
     if (req.status == 200) { 
     resolve(req.response); 
     } else { 
     reject(Error(req.statusText)); 
     } 
    }; 
    req.onerror = function() { 
     reject(Error("Network Error")); 
    }; 
    req.send(); 
    }); 
} 

ajaxCall('www.testSite').then(x => { 
    console.log(x) 
}) // returns html of site 

fetch('www.testSite').then(x => { 
    console.log(x) 
}) // returns object with information about call 

これは何fetch呼び出しが戻っている：

Response {type: "cors", url: "www.testSite", status: 200, ok: true, statusText: "OK"…} 

は、なぜそれが異なるものを返すのですか？

fetchは、典型的なAJAXコールと同じものを返す方法はありますか？

Answer 1

を使用することができます。
通常のtext/htmlの場合は、text()メソッドを使用します。このメソッドもまた約束を返し、別の呼び出しでチェーンします。返されたコンテンツの

fetch('www.testSite').then(x => { 
    return x.text(); 
}).then(y => { 
    console.log(y); 
}); 

ビルトイン

• クローン（）は以下の通りである - Responseオブジェクトのクローンを作成します。
• error（） - ネットワークエラーに関連付けられた 新しいレスポンスオブジェクトを返します。
• redirect（） - 別のURLを使用して新しいレスポンスを作成します。
• arrayBuffer（） - ArrayBufferで解決する約束を返します。
• blob（） - Blobで解決される約束を返します。
• formData（） - FormDataオブジェクトで解決される約束を返します。
• json（） - JSONオブジェクトで解決される約束を返します。
• text（） - USVString（テキスト）で解決する約束を返します。
など

また、サーバーに物事を送信することができ、または独自のヘッダを追加

fetch('www.testSite', { 
    method : 'post', 
    headers : new Headers({ 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }), 
    body : new FormData(document.getElementById('myform')) 
}).then(response => { 
    return response.json(); // server returned valid JSON 
}).then(parsed_result => { 
    console.log(parsed_result); 
}); 

Answer 2

ajaxCallはXMLHttpRequestオブジェクトからresponseTextを返しています。それはそれをフィルタリングしています。

フェッチコードの応答テキストを読む必要があります。

fetch('www.testSite').then(x => { console.log(x.text()); }) 

また、取得APIが異なるデータ型のための方法が組み込まれていx.json()または