Native Netzwerkanforderungsschema von Vue und Netzwerkanforderungsbibliothek von JS

1. Native Netzwerkanforderung

1. XMLHttpRequest (W3C-Standard)

// Das Produkt, wenn es kein Versprechen gibt

Damals wurde alles zurückgerufen, was zu umständlich war.

2. Holen

// Von HTML5 bereitgestelltes Objekt, basierend auf Promise. Aufgrund der Existenz von Promise wird es verwendet, um Netzwerkanforderungen zu vereinfachen.

Verwenden von Fetch – Web-API-Referenz | MDN

Fetch ist eine neue Ajax-Lösung. Fetch gibt ein Promise-Objekt zurück. Fetch ist keine weitere Kapselung von Ajax, sondern natives JS und verwendet nicht das XMLHttpRequest-Objekt.

Parameter:

1. Der erste Parameter ist die URL:

2. Der zweite Parameter der Einstellungsanforderung ist ein optionaler Parameter

3. Rückgabe mit Promise zur Verarbeitung von Ergebnissen/Rückrufen

fetch(URL, Optionen).dann(res=>res.json()/text()).dann(ret=>console.log(ret))

Kompatibilitätsprobleme:

Was soll ich tun, wenn die niedrigere IE-Version nicht mit Fetch kompatibel ist? =》Verwenden Sie die Fetch-Bibliothek eines Drittanbieters [fetch-polyfill]

Verwenden Sie fetch, um eine Netzwerkanforderung zu stellen. Lassen Sie url1 url2 beide Adressen gleichzeitig ausführen, bevor verwandte Vorgänge ausgeführt werden. Promise.all

let url1 Ich muss Promise.finally verarbeiten, unabhängig davon, ob es erfolgreich ausgeführt wird

fetch kapselt Netzwerkanfragen

2. js Netzwerkanforderungsbibliothek

Achsen

Gibt JSON-Daten als Promise-Typ zurück.

Dokumentation: Anleitungen · Axios Chinesische Anleitungen · Kanyun

Axios ist eine auf Versprechen basierende HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann.

Kann Anfragen und Antworten abfangen und JSON-Daten automatisch konvertieren. Axios ist auch die vom Vue-Autor empfohlene Netzwerkanforderungsbibliothek.

// axios.get/post/put/delete
axios.get(url,config) // config kann Header-Informationen festlegen axios.post(url,data,config)
axios.put(URL,Daten,Konfiguration)
axios.delete(URL,Daten,Konfiguration) 

Oder Anfrage per Instanz

Einstellungsinformationen (allgemein) über Instanzanfrage hinzufügen!

Legen Sie es nicht einheitlich für alle Instanzen fest (wird nicht häufig verwendet), da es für alle festgelegt ist

// Setze axios.defaults.timeout = 10000 für Axios
axios.defaults.baseURL = "http://localhost:3000"
axios.defaults.headers.a = "Administrator"

postenAbsenden

// Beitragsübermittlung axios.post(url, { id: 1, name: 'aaaa' }).then(res => console.log(res.data))

Oder Axios verwendet direkt # Standardschrift (nicht allgemein gebräuchlich)

// axios verwendet direkt axios({
  URL (URL = URL = URL),
  Methode: 'get',
  Daten:{}
}).dann(res => console.log(res))

Interceptor-Aspekt-Programmierung

(Pipeline) (Middleware)

1. Interceptor anfordern (kann mehrfach aufgerufen werden)

axios.interceptors.request.use(Konfiguration => {
  // Einheitliche Einstellung der Anforderungsdomänennamenadresse config.baseURL = 'http://localhost:3000'
  // Zeitüberschreitung config.timeout = 1000
  // Header-Informationen festlegen config.headers.token = 'mytoken login'
  Konfiguration zurückgeben;
}, err => Promise.reject(err))

2. Antwort-Interceptor (Verarbeitung, Filterung)

axios.interceptors.response.use(Antwort => {
  Antwortdaten zurückgeben
}, err => {
  // Dies kann einheitlich im Antwort-Interceptor behandelt werden, Ausnahmewarnung für Anforderungen („Anforderung fehlgeschlagen, bitte erneut anfordern“)
  returniere Promise.reject(err)
});

Oben sind die Details der nativen Netzwerkanforderungs- und JS-Netzwerkanforderungsbibliothek der Netzwerkanforderungslösung aufgeführt. Weitere Informationen zu nativen Netzwerkanforderungen und der JS-Netzwerkanforderungsbibliothek finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!