Comment implémenter l'encapsulation secondaire axios dans vue

Cet article présente principalement l'exemple de code de l'encapsulation secondaire de vue axios. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un œil

Pendant cette période, je vous ai expliqué les besoins du projet et utilisé vue.

Quand j'ai commencé à créer le framework, j'ai utilisé vue-resource. Plus tard, j'ai vu la recommandation officielle d'axios, alors je l'ai changé et je l'ai encapsulé en passant

//引入axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
 //发起请求时，取消掉当前正在进行的相同请求
 if (promiseArr[config.url]) {
  promiseArr[config.url]('操作取消')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//响应拦截器
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get请求
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post请求
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

Explication

1. Afin d'éviter que la même requête ne soit actuellement effectuée lorsqu'une requête est lancée, un jugement de hachage est ajouté à l'intercepteur de requête et la même URL de requête est interceptée

2. Configuration publique de get et post dans axios Retirez-le

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

3. Encapsulation des requêtes get et post Vous vous demandez peut-être, l'axios renvoie ici l'objet promis, pourquoi avez-vous besoin d'encapsuler. la promesse à nouveau pour get et post ? Parce que de mon côté, si c'est le cas, lors de l'utilisation de l'attente asynchrone en développement, la demande de données échouera. L'erreur signalée est que l'objet renvoyé n'est pas un objet promis. (ps : Async wait renvoie une promesse. Nous discuterons de ce problème plus tard.) Renvoyez simplement un objet de promesse directement pour éviter l'erreur ci-dessus. Ce qui suit est un exemple de l'interface de requête

import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

Ce qui suit est l'acquisition de données

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

À ce stade, nous avons simplement encapsulé des axios adaptés à notre propre projet

Raisons de l'encapsulation :

1. Vous pouvez discuter du code d'erreur avec le backend et le traiter dans une invite unifiée ici pour éviter des problèmes inutiles

2. décrypter l'intégralité du message de l'interface, vous pouvez Les

les interfaces sont unifiées classées ici :

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 
 
export default ApiSetting

Avantages de la classification :

1. Les mises à niveau ultérieures de l'interface ou les changements de nom de l'interface facilitent. maintenance

appel http :

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 
 
 } 
} 
</script>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Interprétation détaillée des nouvelles fonctionnalités d'Angular5.1

Comment utiliser vue pour développer des jeux de Sudoku

Comment utiliser vuex pour implémenter la gestion des menus

Interprétation détaillée de la compilation webpack3 compatible avec IE8 (tutoriel détaillé)

Comment l'implémenter à l'aide de JS Supprimer le json en double

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!