Ajax とフェッチとは何ですか?両者の違いは何ですか?

この記事では、Ajax と fetch とは何なのかについて説明します。 Ajax とフェッチの違いは何ですか? 、特定の参考値があり、困っている友人がそれを参照できます。お役に立てば幸いです。

XMLHttpRequest の確認

従来の Ajax は XMLHttpRequest (XHR) を参照します。

var xhr = new XMLHttpRequest()

1 という最初の要件。は open() であり、open は実際にはリクエスト

xhr.open("get",url,false)
//三个参数：请求方法，请求路径(相对于当前页面)，是否异步请求

2 を送信しません。呼び出される 2 番目のメソッドは send() で、リクエストは send

xhr.send(null)
//参数：请求发送的主体数据

で送信され、応答が受信されます。その後、返されたデータは xhr オブジェクトに自動的に入力されます。

• responseText: 応答本文として返されるテキスト

• responseXML: XML DOM ドキュメント

• status: レスポンスの HTTP ステータス

• statusText: HTTP ステータスの説明

送信時非同期リクエストの場合、通常は XHR オブジェクトの readStatus 値を検出します。

0: 初期化されていません。open() メソッドは呼び出されません。

1: 起動: open が呼び出され、send が呼び出されます。コールされていません

2: 送信: 送信を呼び出しましたが、応答が受信されません

3: 受諾: 部分的なデータを受信しました

4: 完了: すべてのデータを受信しました

load event

onload イベント ハンドラーはイベント オブジェクトを受け取り、target 属性は XHR オブジェクト インスタンスを指すため、XHR オブジェクトのすべてのメソッドとプロパティにアクセスできます。 。

XMLHttpRequest には関心の分離の原則がないため、構成呼び出しは非常に混乱します。

通常の記述方法は次のとおりです。

var xhr = new XMLHttpRequest();
xhr.open('GET', url);

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

fetch が表示されます

現在のフェッチ バージョンのサポート詳細は次のとおりです https://caniuse.com/#search=fetch

フェッチ構文

フェッチ API は、すべてのリクエスト設定を含む、promise

fetch(url, init).then(function(response) { ... });

init オプションの構成オブジェクトに基づいて設計されています:

• method: リクエストメソッド、GET POST など

• headers: リクエストヘッダー情報、 form は、Headers オブジェクトまたは ByteString です。 body: 要求された本文情報: Blob、BufferSource、FormData、URLSearchParams、または USVString オブジェクトの場合があります。 GET または HEAD メソッドのリクエストには本文情報を含めることはできないことに注意してください。

• mode: 要求されたモード、以下を参照

• credential: デフォルトでは fetch サーバーとの間で Cookie は送受信されません。 そのため、サイトがユーザー セッションに依存している場合、認証されないリクエストが発生します (Cookie を送信するには、資格情報オプションを設定する必要があります)。

  省略: Cookie を送信しません。

  Same-origin: URL が応答スクリプト (HTTP) と同じ生成元を持つ場合にのみ Cookie を送信します。基本認証 検証情報を待ちます。

  include: クロスドメイン要求かどうかに関係なく、要求されたリソース ドメインのローカル Cookie や HTTP 基本認証などの検証情報を常に送信します。

• cache: 要求されたキャッシュ モード: デフォルト、ストアなし、キャッシュなし、強制キャッシュ、キャッシュのみ

応答メタデータ

#上記の例では、応答が json に変換されていることがわかります。過去の応答に関する他のメタ情報が必要な場合は、次のメソッドを使用できます。 #

fetch('./test.json').then(function(response) {
  console.log(response.headers.get('Content-Type'));//application/json
  console.log(response.headers.get('Date'));//Wed, 5 Sep 2018 09:33:44 GMT

  console.log(response.status);//200
  console.log(response.statusText);//ok
  console.log(response.type);//basic
  console.log(response.url)//http://localhost:63342/Apple/test/test.json
})

response.headers メソッド:

• has(name) (boolean) - ヘッダー情報が存在するかどうかを判断します

• get(name) (string)-ヘッダー情報の取得
  ##getAll(name) (Array ) - すべてのヘッダーを取得します。 ヘッダー情報

• #set(name, value) - 情報ヘッダーのパラメータを設定します。

• ## append(name, value) - ヘッダー内容を追加

• #delete(name) - ヘッダー情報を削除

• #forEach(function(value, name){ ... }, [thisContext]) - ヘッダー情報を読み取るループ

• 応答タイプ 上の例では、

  console.log(response.type);//basic
は Basic です。

フェッチ リクエストを送信する場合、応答の戻り値のタイプは「basic」、「cors」または「opaque」です。これらの

types

は、 を示します。リソースのソースであり、応答オブジェクトをどう処理するかを示すために使用できます。

リクエストとリソースが同じオリジンのものである場合、リクエストは基本タイプであるため、制限なくレスポンス内のあらゆるコンテンツを表示できます

如果请求和资源是不同源的，并且返回一个CORs header的头部，那么请求是cors类型。basic和cors响应基本相同。但是cors会限制你查看header中“Cache-Control”，“Content-Language”，“Content-Type”，“Expires”，“Last-Modified”和`Pragma`的属性。

如果请求和资源是不同源的，并且不返回一个CORs header头部，那么请求是opaque类型。opaque类型的响应，我们不能过读取任何的返回值或者查看请求状态，这意味着我们无法只知道请求是成功还是失败。

你可以定fetch请求的模式，以便于解析一些模式，如下：

same-origin--同源请求才能成功，其他请求都会被拒绝

cors允许请求同源和其带有合适的CORs头部的其他源

cors-with-forced-preflight--发送真实的请求之前，需要一个预检验

no-cors--旨在向没有CORS header的其他源发出请求并产生不透明opaque的响应，但如上所述，目前在窗口全局范围内这是不可能的。

要定义模式，请在fetch请求中添加选项对象作为第二个参数，并在该对象中定义模式：

fetch('./test.json',{mode:'cors'})
  .then(function(response) {
    console.log(response);
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  }).catch(function(e) {
    console.log("Oops, error");
});

fetch基于Promise的调用链

Promise的一个重要特征是链式调用。 对于fetch，这允许你通过fetch请求共享逻辑

fetch('./test.json')
  .then((response)=>{
    if(response.status>=200||response.status<300){
      return Promise.resolve(response);
    }
    else {
      return Promise.reject(new Error(response.statusText))
    }
  })
  .then((response)=>response.json())
  .then((data)=>{
    console.log("Response successful json data",data);
  })
  .catch((e)=>{
    console.log("Oops, error",e);
});

首先定义关于status的方法去检验请求是否成功，并且返回Promise.resolve(response)和Promise.reject(response)来处理下一步的逻辑。

这样做的好处在于能够使得代码更好的维护，可读和测试

Post 请求

对于一个web应用，需要通过POST请求和在请求体中添加一些参数去请求API并不罕见

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar'
  })
  .then(json)
  .then(function (data) {
    console.log('Response successful json data', data);
  })
  .catch(function (error) {
    console.log('"Oops, error', error);
  });

关于取消fetch()请求-abort/timeOut

目前没有方法去取消fetch请求，但是可以设置一个timeout选项https://github.com/whatwg/fetch/issues/20

首先实现一个abort功能，fetch返回的是一个promise对象，那么需要在abort后达到出入reject Promise的目的

var abort_fn = null;
var abort_promise = new Promise((resolve,reject)=>{
  abort_fn=()=>{
    reject("abort promise")
  }
})

可以通过调用abort_fn来触发abort_promise的reject

fetch返回的promise，称为fetch_promise，那么现在有两个promise：abort_promise和 fetch_promise

由于每个promise都有reject和resolve回调绑定到哪个promise上呢？

可以采样Promise.race方法

Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);
//上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

基于Promise.race的特点，实现方案如下

const p = Promise.race([
fetch_promise，
abort_promise
]);
p
.then(console.log)
.catch(console.error);

实现代码

_fetch=(fetch_promise,timeout)=>{

  var abort_fn = null;
  var abort_promise = new Promise((resolve,reject)=>{
    abort_fn=()=>{
      reject("abort promise")
    }
  })

  //在这里使用Promise.race
  var p = Promise.race([
    abort_promise,
    fetch_promise
  ])
  
  setTimeout(()=>{
    abort_fn();
  },timeout)
  
  return p;
}
_fetch(fetch('./test.json'),5000)
  .then((res)=>{
    console.log(res)
  },(err)=>{
    console.log(err)
  })

fetch PK Ajax

fetch规范和Ajax主要有两个方式的不同：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。fetch(url, {credentials: 'include'})
  

    omit: 从不发送cookies.

    same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.

    include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问AJAX视频教程！

相关推荐：

php公益培训视频教程

AJAX在线手册

以上がAjax とフェッチとは何ですか?両者の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。