Adresse de demande de configuration unifiée de développement Uniapp

Avec la popularité des applications mobiles, les développeurs doivent s'adapter progressivement aux méthodes de développement des différents systèmes d'exploitation et mesurer comment développer plus rapidement et utiliser les ressources plus efficacement. Uniapp est un framework multiplateforme qui a émergé au fur et à mesure que les temps l'exigent. Il peut non seulement créer rapidement des applications multi-terminaux (H5, applet WeChat, App), mais intègre également plusieurs bibliothèques couramment utilisées (telles que vuex, uni). -ui, etc.). Au cours du processus de développement d'uniapp, de nombreuses requêtes nécessitent des requêtes réseau. Une configuration d'adresse de requête unifiée peut faciliter la maintenance et les mises à niveau. Cet article explique comment configurer uniformément l'adresse de requête sous deux aspects : le développement uniapp et la bibliothèque de requêtes axios.

1. L'utilisation de requêtes dans uniapp

Les requêtes dans uniapp peuvent également utiliser le XMLHttpRequest natif, mais compte tenu de l'efficacité du développement, nous choisissons généralement une bibliothèque de requêtes plus facile à utiliser - uni-request. uni-request encapsule XMLHttpRequest et la requête d'uniapp et peut être traitée à l'aide de Promise. Dans le même temps, uni-request encapsule également une série de fonctions pratiques telles que les intercepteurs et les tentatives. Lors de l'utilisation d'uni-request, nous devons monter l'objet $http dans main.js :

import request from '@/common/request.js'

Vue.prototype.$http = request

Ensuite, lorsqu'une requête doit être faite, vous pouvez directement appeler la méthode sous l'objet $http pour faire une requête, par exemple :

this.$http.get('/api/user').then((res) => {
  console.log(res)
})

2. Configurez l'adresse de la demande

Pour configurer uniformément l'adresse de la demande, les deux aspects suivants doivent être pris en compte.

1. Configuration globale dans uniapp

Nous encapsulons généralement la demande dans un fichier séparé pour utilisation. Demander la configuration d'une adresse dans ce fichier peut être une opération relativement simple. Nous pouvons ajouter le code suivant dans le fichier request.js :

const baseURL = 'https://your.base.url.com/api/'

export default function(options) {
  // function definition
  // ...
  return uni.request({
    url: baseURL + options.url,
    method: options.method || 'GET',
    data: options.data || {},
    header: options.header || {}
  })
}

Dans cet exemple, notre baseURL est définie sur https://your.base.url.com/api/, ce qui signifie qu'à chaque requête, ajoutez cette baseURL devant lui. Par conséquent, lorsque nous appelons la requête, il suffit d’appeler l’adresse relative.

2. Configuration globale dans axios

Dans uniapp, on peut également utiliser axios pour opérer des requêtes. Bien que moins utilisé pendant le processus de développement, axios dispose d'intercepteurs et d'éléments de configuration plus flexibles et plus puissants. On peut dire que dans des scénarios d'utilisation réels, il sera plus polyvalent que l'uni-requête.

Nous pouvons effectuer une configuration globale dans le fichier main.js :

import axios from 'axios'

axios.defaults.baseURL = 'https://your.base.url.com/api/'
Vue.prototype.$http = axios

De cette façon, dans les requêtes ultérieures, cette baseURL sera également suivie.

3. Résumé

Cet article explique comment configurer uniformément l'adresse de requête d'axiso et d'uniapp. Pour les développeurs, il ne s'agit pas seulement d'un routage déclaratif traditionnel, mais cela signifie également une collaboration d'équipe plus efficace et un contrôle plus flexible de la logique métier. Je pense qu'une fois que les lecteurs en auront appris davantage sur les requêtes écrites par eux-mêmes dans uniapp, ils seront en mesure de mettre en œuvre facilement une coordination globale des adresses de requête.

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!