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]
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...]
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.GETAXIOS.post
axios.request
Vous pouvez transmettre de nombreuses configurations de requêteaxios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .then(function () { // always executed });
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
axios.request({ url: '/user', method: 'get', // 默认 baseURL: '/api', //...})
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: {}}
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';
const instance = axios.create({ baseURL: 'https://api.example.com'}); instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
const instance = axios.create();instance.defaults.timeout = 2500;instance.get('/longRequest', { timeout: 5000});
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!