Was sind $.ajax, axios und fetch? Ausführliche Erklärung zur Verwendung von fetch

In diesem Artikel erfahren Sie, was $.ajax, axios und fetch jeweils sind, sodass Sie mehr über die Verwendung von fetch erfahren können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

• Ajax Was ist das?

Antwort: Ajax ist eine Technologie, die asynchrone Datenübertragung (HTTP-Anfrage) zwischen dem Browser und dem Server nutzen kann. Damit kann eine Seite eine kleine Datenmenge anfordern, ohne die gesamte Seite aktualisieren zu müssen. Um einen Teil des Inhalts auf einer herkömmlichen Seite (ohne Verwendung von Ajax) zu aktualisieren, muss die gesamte Webseite neu geladen werden.

• Ajax Basierend auf was?

Antwort: Es basiert auf XMLHttpRequest (XHR). Dabei handelt es sich um eine relativ grobe API, die nicht dem Designprinzip der Interessenstrennung (Separation of Concerns) entspricht und nicht so benutzerfreundlich zu konfigurieren und zu verwenden ist. Was ist der Hintergrund von

• $.ajax?

Antwort: Aus den oben genannten Gründen wird auf verschiedene Ajax-Bibliotheken verwiesen, die bekannteste ist jedoch $.ajax() in der jQuery-API. $.ajax() Einer seiner Vorteile ist der asynchrone Betrieb, aber der asynchrone Betrieb von jQuery ist ein ereignisbasiertes asynchrones Modell, das nicht so benutzerfreundlich ist wie versprochen.

• fetch Hintergrund generiert?

Antwort: Basierend auf den verschiedenen oben genannten Faktoren entstand die Fetch-API. Aber es ist einfach zu verwenden und weist einige Probleme auf (dieses Problem wird weiter unten ausführlich besprochen und die entsprechenden Lösungen werden erläutert), gepaart mit Kompatibilitätsproblemen (IE unterstützt es überhaupt nicht), sodass viele Entwickler Axios verwenden . Drei-Parteien-Bibliothek.

• Bibliothek, die Promise (Axios) unterstützt?

Antwort: axios Diese Bibliothek ist mittlerweile eine relativ verbreitete Branchenlösung. axios Ein Grund für ihre Beliebtheit sind Versprechen, und ein anderer Grund ist die Popularität der Bibliothek (vue.js, Angular.js, React.js usw.), während die traditionelle jQuery eine Bibliothek ist, die auf DOM-Operationen basiert. Es weist jedoch auch Mängel auf. Das heißt, bevor wir es verwenden, müssen wir sicherstellen, dass die Bibliothek eingeführt wurde.

Eigentlich verwende ich persönlich lieber fetch. Wenn während der Entwicklung Kompatibilitätsprobleme auftreten, ist nur ein isomorpher Abruf erforderlich, ohne dass eine zusätzliche Bibliothek eingeführt werden muss. Konzentrieren wir uns auf das Abrufen.

Verwendung von fetch

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

URL: Zugriffsadresse
Optionen: Allgemeine Konfigurationsparameter
Antwort: Rückgabeobjekt anfordern

Parameterkonfiguration anfordernoptions Details können gefunden werden Siehe MDN-Abruf

Probleme und Lösungen abrufen

1. Sie benötigen zwei Schritte, um die Daten abzurufen

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

Los Durch das Obige können Sie im Code feststellen, dass das durch direktes Drucken zurückgegebene Response-Objekt überhaupt keine Daten enthält. Um die erforderlichen Daten zu erhalten, müssen Sie eine Zwischenmethode response.text() durchlaufen (Abruf bietet 5 Methoden).

Andererseits ist axios viel bequemer zu verwenden. Das zurückgegebene Response-Objekt enthält Daten im data-Attribut. Der Referenzcode lautet wie folgt:

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

Natürlich ist das kein großes Problem, aber die Verwendung ist etwas mühsam.

1. Die Abrufanforderung ist standardmäßig auf „Nein“ eingestellt cookie

Um dieses Problem zu lösen, müssen Sie options >{credentials: 'include'}

Nicht alle Anforderungsfehler werden

1. reject

Das heißt, die

-Methode kann nicht alle Fehler abfangen, wenn ein Fehler auftritt , Sie können einen Statuscode (z. B. 404, 500 usw.) verwenden. Der von

zurückgegebene catch hat keine Ablehnung. fetch ist nur gültig, wenn das Netzwerk ausfällt oder die Anfrage ist blockiert. PromisecatchUm dieses Problem zu lösen, können wir feststellen, ob das

im

-Objekt wahr ist. Wenn nicht, verwenden Sie Response, um manuell ein ok hinzuzufügen. Der Referenzcode lautet wie folgt: Promise

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

rejectWenn Sie nicht manuell hinzufügen, wird

ausgedruckt, was wir natürlich nicht wollen Betrachten Sie dieses Problem. Der Code lautet wie folgt: reject

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

undefinedOptimierung des AbrufsaxiosDa die

-Methode ein

zurückgibt, können Sie

zusätzlich aufrufen Um sicherzustellen, dass alle Fehler ein einheitliches Format zurückgeben (beide geben ein res.text() zurück), kann der obige Code wie folgt optimiert werden: promise

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

.thenSchüler, die Express/Koa gespielt haben oder ein gewisses Verständnis davon haben Backend, wissen Sie, dass der Server in einigen Fällen auch einige prompte Informationen zurückgibt, wie soll ich also damit umgehen? Zu den häufigen Fehlermeldungen gehören ein Statuscode (Status) und eine Eingabeaufforderung (Msg). Der Code wird wie folgt geändert: PromiseServer:

res.status(404).send({
    err: 'not found'
})

Client:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

兼容解决方案

以上问题解决并优化fetch的使用后，发现fetch还是一个不错的选择。针对不同使用情况可以作如下处理：

首先，要引入 es5-shim 解决fetch这个新特性的同构；

其次，要引入 es6-promise 解决promise的兼容问题；

然后，引入 fetch-ie8 解决fech的同构问题；

最后，引入 fetch-jsonp 解决跨域问题。

当然，你也不需要针对性的解决这些问题，GitHub团队提供了一个polyfill解决方案，你不需要一步步的是实现。只需要两步：

1. 安装 fetch package

   npm install whatwg-fetch --save

2. 在使用的模块引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)

其他的使用和 fetch 则这个原生的API雷同。

哪些情况可以放弃使用fetch

1. 获取Promsie的状态，如：isRejected, isResolved

2. 如果使用习惯了jquery的progress方法的，或者使用deffered的一些方法

具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 fetch-issue

Das obige ist der detaillierte Inhalt vonWas sind $.ajax, axios und fetch? Ausführliche Erklärung zur Verwendung von fetch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!