Une analyse approfondie du processus et des principes des requêtes asynchrones dans axios

1. Qu'est-ce qu'axios ?

axios est une méthode basée sur Promise qui peut envoyer des requêtes get, post et autres, et peut être utilisée à la fois par le front-end et le back-end. [Recommandé : Tutoriel vidéo Ajax, front-end web]

2. Principes internes d'axios

• La bibliothèque axios expose une instance axios au monde extérieur. L'instance axios contient une méthode Axios. , et la méthode Axios a un objet intercepteurs (intercepteur), un objet intercepteurs a un objet requête et un objet réponse, et request object et <code>response object ont tous deux des méthodes d'utilisation, nous pouvons donc appeler axios.interceptors.request.use() et axios.interceptors.response.use().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

• L'<code>request object et le response object dans l'objet interceptors sont en fait un tableau (gestionnaires) utilisé pour gérer les intercepteurs. Lorsque nous appelons axios.interceptors.request.use(), un rappel de réussite et un rappel d'échec seront poussés dans le tableau d'intercepteurs de la requête (gestionnaires). Chaque fois qu'il est utilisé, poussez-le une fois, semblable à [res1, rej1, res2, rej2...]

Le suivant est une chaîne, c'est un tableau qui stocke tous les rappels, parce qu'il est utilisé pour Promise, il doit donc utiliser deux valeurs , les valeurs initiales sont dispatchRequest et undefiend. Ensuite, Promise.resolve(config).then(fn1, fn2). Lorsque le résultat dans config est rempli (réussi), la configuration dans config est transmise à fn1 et exécutée. S'il s'agit d'un rejet (rapport d'erreur), le résultat de l'erreur est transmis à fn2 et exécuté, c'est-à-dire Promise.resolve(config).then(chain[0], chain[1]). chain[0] est un rappel de réussite, chain[1] est un rappel d'échec. Il existe de nombreux éléments de configuration dans config, il peut s'agir d'une valeur ou d'une méthode de chaîne, etc.

L'étape suivante consiste à trier toutes les promesses, à décaler la fonction de rappel dans le request array vers l'avant du chain array et à déplacer le tableau de réponses La fonction de rappel dans > est poussée à la fin du tableau de chaînes. Le tableau de chaînes final est similaire à [res2, rej2, res1, rej1, dispatchRequest, undefiend, res3, rej3, res4, rej4].

dispatchRequest est utilisé pour exécuter axios.request Il y a un adaptateur dans la méthode dispatchRequest, quels différents objets seront appelés en fonction de différents environnements. S'il s'agit d'un environnement de navigateur, appelez l'objet XMLHttpRequest. S'il s'agit d'un environnement nodejs, appelez objet http. C'est pourquoi il peut être utilisé à la fois sur le front-end et sur le back-end. adapter analysera et encapsulera les données demandées, et l'objet encapsulé est l'objet de réponse que nous pouvons voir.

Après le traitement de dispatchRequest, la fonction de rappel de interceptors.response sera exécutée. C'est pourquoi l'ordre d'exécution que nous voyons est que le interceptors.request de ce dernier est exécuté avant le interceptors.requets du premier, puis axios.request est exécuté. code>, et enfin exécutez interceptors.response dans l'ordre

Ensuite, exécutez notre logique métier. S III. Utilisation d'Axios

1. En utilisant la méthode Axios

Méthodes couramment utilisées : Get, Post, Request

AXIOS.GET

RREEEEE

AXIOS.post

rreeeee

axios.request

Vous pouvez transmettre de nombreuses configurations de requête

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

2. En transmettant la méthode de configuration

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

4 Module de réponseLe module de réponse a les paramètres suivants

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

5 Configuration

1. configuration

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

2. La configuration de l'instance

🎜

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

🎜🎜3. La priorité de la configuration 🎜🎜

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

🎜Le paramètre de délai d'attente final est de 5000, donc la priorité ici, la configuration dans la requête > Configuration de l'instanciation > Configuration par défaut d'axios 🎜🎜 6. Intercepteurs Les intercepteurs 🎜🎜 peuvent traiter les données avant de demander des données ou avant de recevoir des données 🎜

const instance = axios.create({
  baseURL: 'https://api.example.com'});
 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

🎜 7. Traitement simultané des demandes 🎜

const instance = axios.create();instance.defaults.timeout = 2500;instance.get('/longRequest', {
  timeout: 5000});

🎜 Document de référence : https://www.npmjs.com/package/axios🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!