H5 の新しいオブジェクトとして、fetch は ajax の存在を置き換えるために誕生しました。その主な目的は、ServiceWorkers と組み合わせて次の最適化を実現することだけです。
もちろん、ServiceWorkers がブラウザ側データベース IndexedDB と連携すれば、すべてのブラウザがプロキシ サーバーになることができます。 (ただし、これは良いことではないと思います。以前の C/S アーキテクチャの古い道をたどり、フロントエンドがますます重くなります)
1. はじめにh5の新しい方式なので、対応していない古いブラウザもあるはずです。
ブラウザは追加のポリフィルを追加する必要があります。
[リンク]: https://github.com/fis-components/whatwg-fetch
2. 使用方法ferch(フェッチ):
HTML:
fetch('/users.html') //ここで返されるのは Promise オブジェクトです。これをサポートしていないブラウザでは、実行前に対応する ployfill または babel やその他のトランスコーダを使用する必要があります。応答 .text()}) .then(function(body) { document.body.innerHTML = body})JSON:
fetch('/users.json') .then(function(response) { return response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function) (例) { console.log('解析に失敗しました', 例)})応答メタデータ:
fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) console .log(response.status) console.log(response.statusText)})投稿フォーム:
var form = document.querySelector('form')fetch('/users', {メソッド: 'POST', 本体: new FormData(form)})JSON の投稿:
fetch('/users', { メソッド: 'POST', ヘッダー: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //here投稿リクエストのリクエスト本文名です: 'Hubot'、ログイン: 'hubot'、})})ファイルのアップロード:
var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //選択したファイルの内容を取得 data.append( 'ユーザー', 'hubot')fetch('/アバター', {メソッド: 'POST', 本体: データ}) 3. 注意事項(1) ajaxとの違い：
1. patch メソッドは、ネットワーク エラーであるかリクエスト プロセスが中断されない限り、データを取得するときにエラー (404 エラーや 500 エラーであっても) をスローしません。しかし、もちろん解決策はあります。以下にそのデモを示します。
function checkStatus(response) { if (response.status >= 200 && response.status < 300) { //レスポンスのステータスコードが正常かどうかを判定 return response //元のレスポンスオブジェクトを正常に返す } else { var error = new Error (response .statusText) //異常の場合はレスポンスエラーステータスメッセージをスローします error.response = レスポンススローエラー }}function parseJSON(response) { return response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('リクエストは JSON 応答で成功しました', data) }).catch( function(error) { console.log('リクエストが失敗しました', エラー) })2. 非常に重要な問題は、フェッチ メソッドが Cookie を送信しないことです。サーバーはセッションを維持するために Cookie を通じてセッションを識別する必要があるため、クライアントとサーバー間の一定の接続を維持する必要がある場合、これは非常に致命的です。 Cookie を送信するには、次の情報を変更する必要があります。
fetch('/users', { credentials: 'same-origin' //同じドメインに Cookie を送信する})fetch('https://segmentfault.com', { credentials: 'include' //ドメイン間で Cookie を送信する} ）下図はセグメントへのクロスドメインアクセスの結果です
追加リクエストされた URL とレスポンスされた URL は同じですが、XHR ではリダイレクトなどの操作が行われた場合、response.url が異なる可能性がありますので、設定する必要があります。 :response.headers['X-Request-URL'] = request.url は、(Firefox < 32、Chrome < 37、Safari、または IE) に適しています。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。