Introduction à la méthode d'utilisation de l'interception des requêtes axios dans Vue

Cet article vous présente la méthode d'utilisation de l'interception des requêtes axios dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Préface

L'utilisation de base d'axios ne sera pas trop expliquée. Comment l'utiliser peut être vu dans les instructions du document axios·Instructions chinoises d'axios

<.>Ici et s'il vous plaît, partagez l'utilisation de l'interception axios dans des projets réels

Beaucoup de gens ont vu la colonne intercepteur dans la documentation officielle d'axios Certaines personnes peuvent être un peu confuses car le document vous dit seulement qu'il y a ceci. chose. Il ne vous dit pas dans quelles circonstances il est utilisé. De nombreux débutants abandonneront l'intercepteur axios. Après tout, l'intercepteur peut être supprimé, mais son utilisation réduira beaucoup de code inutile dans la page.

2. Le framework d'interface utilisateur utilisé dans le projet

précédent est iview

Les conseils amicaux suivants utilisent tous le composant d'invite de message d'iview ui, comme celui-ci.$Message .xxx

/api/request n'est qu'un exemple d'interface. Le développement réel utilise l'interface fournie par le backend.
le code est le code d'état d'arrière-plan. Je donne juste un exemple ici. Ne me demandez pas pourquoi mon code de retour est différent du vôtre... Tout cela doit être communiqué et accepté avec l'arrière-plan.
L'en-tête de requête utilisé est : axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; Quant à la raison pour laquelle cet en-tête de requête est utilisé, vous pouvez lire mon autre article sur l'envoi de deux requêtes par axios. Il y a un problème de requête OPTIONS
car cette requête est utilisée. Par conséquent, vous. vous devez utiliser le module qs, sinon le backend ne reconnaîtra pas ces données.

3. Ne pas utiliser l'interception des requêtes

C'est également possible si l'interception des requêtes n'est pas utilisée, mais cela ajoutera beaucoup de code. Prenons l'exemple de la page de connexion.

Une page simple et sans fioritures, |ω・)

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时，请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

Si l'interception des demandes n'est pas utilisée, chaque demande et chaque statut doivent être spécialement traités. S'il y a des dizaines de demandes de statut spécial et de nombreuses demandes pour chaque page, alors la page deviendra très longue, volumineuse et difficile à maintenir.

3. Utiliser l'interception de demande

Nous pouvons extraire le même code de retour de demande et l'écrire dans l'interception de demande

Après avoir configuré l'interception, après avoir Le code du composant peut être beaucoup simplifié, prenons l'interface de connexion comme exemple :

dans main.js

//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理，状态为10时为登录超时
  if (response.data.code === 10) {
    iView.Message.error("登录已超时，请重新登录");
    router.push("/login")
  //其余错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将我们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

De cette façon, nous ajoutons l'interception aux requêtes axios , ce qui peut réduire beaucoup de logique de code, la page est plus lisible et maintenable

4. Autres

C'est l'utilisation la plus basique de l'interception axios, bien sûr Plus que cela, nous pouvons également nous développer et faire plus de choses. Tant que votre entreprise a des besoins, l'interception axios peut toujours vous aider. Ceux-ci doivent être tirés d'un exemple. Les outils sont morts et les gens sont vivants. . Un petit exemple, comme la définition d'une signature de demande.

La demande de signature est une méthode de communication convenue entre le front-end et le back-end. Le cryptage des données peut garantir dans une certaine mesure la sécurité des données

Prenons cette page de connexion comme exemple<.>

Avant d'envoyer les informations de données httpRequest en arrière-plan, nous signons et chiffrons les données

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

Dans

main.js
, nous interceptons les données envoyées

De cette façon, nous avons terminé le cryptage et la signature des données, puis les envoyons en arrière-plan.

//请求发送拦截
axios.interceptors.request.use((request) => {

  //获取请求的数据，这里是loginName和password
  let REQUEST_DATA = request.data
  //获取请求的地址，这里是/api/request
  let REQUEST_URL = request.url
   
  //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
  request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  //发送请求给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

  let postData = {}

  //时间戳，时间戳函数不作展示，也是已封装好的
  postData.timestamp = getNowFormatDate();

  //请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
  postData.session = localStorage.getItem('session') || '';
  postData.secretKey = localStorage.getItem('secretKey') || '';
  
  //请求的地址，这里是/api/request
  postData.method = method;
    
  //请求的数据这里是loginName和password，进行base64加密
  let base64Data = Base64.encode(JSON.stringify(data));
   
  //设置签名并进行md5加密
  let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
   
  //把数据再次进行加密
  postData.data = encodeURI(base64Data);

  postData.signature = signature;
   
  return postData
}

Remarque : ceci n'est affiché qu'à titre d'exemple. Si une signature est nécessaire, la manière de signer est le résultat de la communication entre le front-end et le back-end !

L'utilisation de l'interception des requêtes axios est bien plus que cela. La manière de l'utiliser dépend spécifiquement du travail réel et des projets réels.

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!