Cette fois, je vais vous présenter vue+axios pour intercepter les demandes de connexion. Quelles sont les précautions pour que vue+axios intercepte les demandes de connexion. Ce qui suit est un cas pratique, jetons un coup d'œil.
Lorsque nous effectuons des requêtes d'interface, par exemple lorsque nous jugeons le délai de connexion, l'interface renvoie généralement un code d'erreur spécifique. Ensuite, si nous jugeons une interface longue et laborieuse pour chaque interface, nous pouvons utiliser The. L'intercepteur effectue une interception de requête http unifiée.
1. Installer et configurer axios
cnpm install --save axios
Nous pouvons créer un fichier js pour effectuer ce traitement unifié , créez un nouveau axios.js, comme suit
import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mint-ui'; // http request 拦截器 axios.interceptors.request.use( config => { Indicator.open() return config; }, err => { Indicator.close() return Promise.reject(err); }); // http response 拦截器 axios.interceptors.response.use( response => { Indicator.close() return response; }, error => { Indicator.close() }); export default axios
puis introduisez ce fichier js dans main.js
import axios from './axio'; Vue.prototype.$axios = axios;
afin que vous puissiez utiliser axios pour demander, ce qui peut être utilisé dans les composants This.axios appelle
this.$axios({ url:requestUrl+'homePage/v1/indexNewPropertiesResult', method:'POST', }).then(function(response){ //接口返回数据 console.log(response) that.modulesArr=response.data.data.modules; // that.getRecommendGoods(0); });
Ce n'est qu'en utilisant l'interface de requête axios qu'il peut être intercepté. Il peut désormais être intercepté dans axios.js et vous pouvez effectuer les opérations dont vous avez besoin dans les deux états<.>
Supplément :
axios utilise des intercepteurs pour traiter toutes les requêtes http de manière uniforme
axios utilise des intercepteurs
pour intercepter les demandes ou les réponses avant qu'elles ne soient traitées d'ici là ou interceptées.•Intercepteur de requêtes http
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
•Intercepteur de réponses http
// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
• Supprimer les intercepteurs
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
•Ajouter des intercepteurs pour les instances axios personnalisées
var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});
Explication détaillée de l'utilisation de dev à prd
Explication détaillée des étapes d'utilisation de dev -serveur dans webpack
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!