Was sind Ajax und Fetch? Was ist der Unterschied zwischen den beiden?

In diesem Artikel erfahren Sie, was Ajax und Fetch sind. Was ist der Unterschied zwischen Ajax und Fetch? , hat einen bestimmten Referenzwert, Freunde in Not können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

XMLHttpRequest überprüfen

Traditionelles Ajax bezieht sich auf XMLHttpRequest (XHR):

var xhr = new XMLHttpRequest()

1 Die aufgerufene Methode ist open(), open sendet die Anfrage nicht tatsächlich

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

2. Die zweite aufzurufende Methode ist send(), die Anfrage wird in send

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

gesendet Antwort wird empfangen. Danach füllen die zurückgegebenen Daten automatisch das xhr-Objekt

• responseText: der als Antworttext zurückgegebene Text

• responseXML: XML-DOM-Dokument

• Status: HTTP-Status der Antwort

• statusText: HTTP-Statusbeschreibung

Beim Senden einer asynchronen Anfrage erkennen wir normalerweise den readyStatus-Wert des XHR-Objekts:

0: Nicht initialisiert, die open()-Methode wird nicht aufgerufen

1: Startup: open wird aufgerufen , senden

wird nicht aufgerufen 2: Senden: Anruf senden, aber keine Antwort wird empfangen

3: Akzeptieren: Teildaten empfangen

4: Vollständig: Alle Daten wurden gesendet

Ladeereignis

Der Onload-Ereignishandler empfängt ein Ereignisobjekt, und das Zielattribut zeigt auf die XHR-Objektinstanz, also alle Methoden und Eigenschaften des XHR Auf das Objekt kann zugegriffen werden.

XMLHttpRequest verfügt nicht über das Prinzip der Interessenstrennung und der Konfigurationsaufruf ist sehr verwirrend.

Normalerweise wie folgt geschrieben:

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 erscheint

Die aktuellen Details zur Unterstützung der Fetch-Version lauten wie folgt: https://caniuse.com/#search=fetch

Abrufsyntax

Die Abruf-API basiert auf dem Versprechen

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

init optionalem Konfigurationsobjekt, einschließlich aller Einstellungen für Anfragen:

• Methode: Anforderungsmethode, GET POST usw.

• Header: Header-Informationen anfordern, Form Is ein Headers-Objekt oder ByteString. body: Angeforderte Body-Informationen: kann ein Blob-, BufferSource-, FormData-, URLSearchParams- oder USVString-Objekt sein. Beachten Sie, dass GET- oder HEAD-Methodenanforderungen keine Textinformationen enthalten dürfen.

• Modus: Der angeforderte Modus, siehe unten

• Anmeldeinformationen: Standardmäßig fetch Es werden keine Cookies vom Server gesendet oder empfangen, was zu nicht authentifizierten Anfragen führt, wenn die Website auf Benutzersitzungen angewiesen ist (um Cookies zu senden, muss die Option „Anmeldeinformationen“ festgelegt sein).

   omit: Senden Sie niemals Cookies.

   same-origin: Senden Sie Cookies, HTTP-Basisauthentifizierung und andere Verifizierungsinformationen nur, wenn die URL denselben Ursprung hat wie das Antwortskript.

   include: Unabhängig davon, ob es sich um eine domänenübergreifende Anfrage handelt, senden Sie immer lokale Cookies, HTTP-Basisauthentifizierung und andere Verifizierungsinformationen der angeforderten Ressourcendomäne >Cache

  : Angeforderter Cache-Modus: Standard, No-Store, No-Cache, Force-Cache, Only-If-Cache

• Antwortmetadaten

  In Im obigen Beispiel können Sie sehen, dass die Antwort in JSON konvertiert wird. Wenn wir andere Metainformationen der vergangenen Antwort benötigen, können wir die folgenden Methoden verwenden:

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
})

Antwort. Header-Methode:

• has(name) (boolean)-判断是否存在该头部信息

• get(name) (string)-获取头部信息

• getAll(name) (Array)-获取所有的头部信息

• set(name, value)- 设置信息头的参数

• append(name, value)- 添加header内容

• delete(name)- 删除header的信息

• AntworttypforEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

  Im obigen Beispiel können Sie sehen, dass
einfach ist.

Wenn wir eine Abrufanforderung senden, sind die möglichen Rückgabewerttypen der Antwort „basic“, „cors“ oder „opaque“. Diese

sollen

console.log(response.type);//basic die Quelle angeben die Ressource und kann verwendet werden, um Ihnen mitzuteilen, was mit dem Antwortobjekt geschehen soll.

types

Wenn die Anfrage und die Ressource denselben Ursprung haben, dann ist die Anfrage vom Basistyp, dann können wir jeden Inhalt in der Antwort ohne Einschränkungen anzeigen

如果请求和资源是不同源的，并且返回一个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在线手册

Das obige ist der detaillierte Inhalt vonWas sind Ajax und Fetch? Was ist der Unterschied zwischen den beiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!