Eine eingehende Analyse des Prozesses und der Prinzipien asynchroner Anfragen in Axios

1. Was ist Axios?

axios ist eine Promise-basierte Methode, die Get-, Post- und andere Anfragen senden kann und sowohl von Front- als auch Back-Ends verwendet werden kann. [Empfohlen: Ajax-Video-Tutorial, Web-Frontend]

2. Interne Prinzipien von Axios

• Die Axios-Bibliothek stellt eine Axios-Instanz der Außenwelt zur Verfügung und die Axios-Methode hat ein Interceptors-Objekt (Interceptor), Interceptors-Objekt hat Anfrageobjekt und Antwortobjekt, und request object und <code>response Objects haben beide Verwendungsmethoden, sodass wir axios.interceptors.request.use() und axios.interceptors.response.use() aufrufen können.interceptors对象(拦截器)，interceptors对象有request对象和response对象，并且request对象和response对象都有use方法，所以，我们可以调用axios.interceptors.request.use()和axios.interceptors.response.use().

• interceptors对象里面的request对象和response对象其实是一个用来管理拦截器的数组（handlers）。当我们调用axios.interceptors.request.use()，就会在request的拦截器数组（handlers）里面push一个成功回调和一个失败回调。每使用一次，就push一次，类似[res1,rej1,res2, rej2…]

• 接下来是一个chain，它是一个存储所有回调的数组，因为它是给Promise使用的，所以它需要使用两个值，初始值为dispatchRequest和undefiend。接着，Promise.resolve(config).then(fn1, fn2)。当config里面的结果为fulfilled(成功），就把config里的配置传给fn1并执行。如果为reject(报错)，就把错误结果传给fn2并执行.即Promise.resolve(config).then(chain[0], chain[1])。chain[0]为成功回调，chain[1]为失败回调。config里面有很多配置项，他们可能是一个string值或方法等。

• 接下来是整理所有的Promise,把request数组里的回调函数unshift到chain数组的最前面，把response数组里的回调函数push到chain数组的最后面。最终chain数组里面类似[res2, rej2,res1, rej1, dispatchRequest,undefiend,res3, rej3, res4, rej4]。

• dispatchRequest是用来执行axios.request的，dispatchRequest方法里面有一个adapter,它会根据不同的环境调用不同的对象。如果是在浏览器环境下，调用XMLHttpRequest对象。如果是nodejs环境下，就调用http对象。这就是为什么它既能在前端使用，也能在后端使用的原因。adapter会对请求到的数据进行解析封装，封装后的对象就是我们能看到的response响应对象。

• 处理完dispatchRequest，就会执行interceptors.response的回调函数。这就是为什么我们看到的执行顺序是，后者的interceptors.request比前者的interceptors.requets先执行，接着执行axios.request,最后顺序执行interceptors.response

• Das <code>Anforderungsobjekt und das Antwortobjekt im Interceptors-Objekt sind eigentlich ein Array (Handler), das zur Verwaltung von Interceptoren verwendet wird. Wenn wir axios.interceptors.request.use() aufrufen, werden ein Erfolgsrückruf und ein Fehlerrückruf in das Interceptor-Array (Handler) der Anfrage gepusht. Schieben Sie es bei jeder Verwendung einmal, ähnlich wie [res1, rej1, res2, rej2...]

Das nächste ist eine Kette, es ist ein Array, das alle Rückrufe speichert, weil es für Promise verwendet wird, daher müssen zwei Werte verwendet werden, die Anfangswerte sind „dispatchRequest“ und „undefiend“. Als nächstes Promise.resolve(config).then(fn1, fn2). Wenn das Ergebnis in config erfüllt (erfolgreich) ist, wird die Konfiguration in config an fn1 übergeben und ausgeführt. Wenn es abgelehnt wird (Fehlerbericht), wird das Fehlerergebnis an fn2 übergeben und ausgeführt. Das heißt, Promise.resolve(config).then(chain[0], chain[1]). Kette[0] ist ein Erfolgsrückruf, Kette[1] ist ein Fehlerrückruf. Es gibt viele Konfigurationselemente in der Konfiguration, es kann sich um einen Zeichenfolgenwert oder eine Methode usw. handeln.

Der nächste Schritt besteht darin, alle Promises zu organisieren, die Rückruffunktion im request array an den Anfang des chain array zu verschieben und den zu verschieben AntwortarrayDie Rückruffunktion in > wird an das Ende des Kettenarrays verschoben. Das endgültige Kettenarray ähnelt [res2, rej2, res1, rej1,chipRequest, undefiend, res3, rej3, res4, rej4].

dispatchRequest wird verwendet, um axios.request auszuführen. Es gibt einen adapter in der dispatchRequest-Methode. Welche unterschiedlichen Objekte werden je nach Umgebung aufgerufen? Wenn es sich in einer Browserumgebung befindet, rufen Sie das XMLHttpRequest-Objekt auf. Wenn es sich um eine NodeJS-Umgebung handelt, rufen Sie http object auf. Deshalb kann es sowohl im Frontend als auch im Backend eingesetzt werden. adapter analysiert und kapselt die angeforderten Daten, und das gekapselte Objekt ist das Antwort-Antwortobjekt, das wir sehen können.

Nach der Verarbeitung von dispatchRequest wird die Rückruffunktion von interceptors.response ausgeführt. Aus diesem Grund ist die Ausführungsreihenfolge, die wir sehen, dass der interceptors.request des letzteren vor dem interceptors.requets des ersteren und dann axios.request ausgeführt wird wird ausgeführt. code> und schließlich interceptors.response> der Reihe nach ausführen.

Als nächstes führen wir unsere Geschäftslogik aus. S III. Verwendung von Axios

1. Durch Verwendung der Axios-Methode

Häufig verwendete Methoden: Get, Post, Request

AXIOS.GET

RREEEEE

AXIOS.post

rreeeee

axios.request

Sie können viele Anforderungskonfigurationen übergeben

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

4. Das Antwortmodul hat die folgenden Parameter

1 Konfiguration

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2. Die Konfiguration der Instanz

axios.request({
	url: '/user',
	method: 'get', // 默认
	baseURL: '/api',
	//...})

3. Die endgültige Timeout-Einstellung ist 5000, also die Priorität hier, die Konfiguration in der Anfrage > Instanziierungskonfiguration > Standardkonfiguration von Axios

6. Interceptors Interceptors

können Daten verarbeiten, bevor sie Daten anfordern oder bevor sie Daten empfangen 🎜

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

🎜 7. Gleichzeitige Anforderungsverarbeitung 🎜

{
	data: {},
	status: 200,
	statusText: 'ok'，
	header: {},
	config: {},
	request: {}}

🎜 Referenzdokument: https://www.npmjs.com /package/axios🎜

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse des Prozesses und der Prinzipien asynchroner Anfragen in Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!