encapsulation de la demande Uniapp

Avec le développement rapide des applications mobiles, les frameworks front-end se diversifient de plus en plus. Parmi eux, uniapp, en tant que framework de développement multiplateforme basé sur Vue.js, est de plus en plus utilisé dans le développement d'applications mobiles.

En tant que développeurs front-end, lorsque nous développons uniapp, nous utilisons souvent de nombreuses API ou interfaces serveur pour l'interaction des données. Au cours du processus de demande de données, nous devons prendre en compte la communication réseau, le format des données, la sécurité des données et d'autres problèmes, tout en garantissant la lisibilité et la maintenabilité du code. Pour résoudre ces problèmes, nous pouvons encapsuler les requêtes API pour améliorer la lisibilité et la maintenabilité du code.

Présentons maintenant l'encapsulation de la demande d'uniapp.

1. Requête réseau

Pour envoyer une requête réseau dans uniapp, vous devez utiliser uni.request(). Cette fonction est une fonction asynchrone et doit être encapsulée à l'aide de Promise. Ce qui suit est un exemple d'encapsulation simple :

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

Dans cette fonction d'encapsulation, nous devons transmettre la méthode de requête, l'URL de requête et les données de requête. De plus, cette fonction définit également les en-têtes de requête, les fonctions de rappel pour le succès et l'échec de la requête.

2. Gestion unifiée des erreurs

Dans le processus d'encapsulation des requêtes, nous devons prendre en compte la gestion des erreurs dans les requêtes. Au cours du processus de gestion des erreurs, nous pouvons améliorer la maintenabilité du code en traitant uniformément les codes d'erreur. Voici un exemple courant de traitement de code d'erreur :

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

Dans cette fonction encapsulée, nous définissons différents messages d'invite d'erreur en jugeant différents types de codes d'erreur. Cette approche rend le code plus facile à maintenir.

3. Configuration des requêtes

Pour les interfaces API fréquemment utilisées, nous pouvons encapsuler les requêtes de manière plus fine. Au cours du processus d'envoi d'une demande, nous pouvons définir diverses options et paramètres de la demande pour obtenir une demande plus flexible et efficace.

Ce qui suit est un exemple de configuration de requête :

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

Dans cette fonction d'encapsulation, nous définissons l'URL de base, le délai d'attente de la requête et les en-têtes de la requête. Lors de l'appel de la fonction, les paramètres externes transmis seront fusionnés en fonction des exigences et le paramètre Accept-Language est ajouté à l'en-tête de la demande pour obtenir une configuration de demande plus flexible.

4. Intercepteur de requêtes

Dans une application complexe, nous pouvons avoir besoin d'intercepter des requêtes. Par exemple, pour chaque demande, les informations de vérification du jeton doivent être ajoutées à l'en-tête de la demande avant l'envoi.

Ce qui suit est un exemple d'intercepteur de requête :

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  uni.addInterceptor('request', (options) => {
    options.header['token'] = uni.getStorageSync('token');
    return options;
  });

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

Dans cette fonction encapsulée, nous utilisons la fonction uni.addInterceptor() pour ajouter des informations de vérification de jeton à la requête. Une telle méthode d'encapsulation peut permettre une gestion et un traitement unifiés de chaque demande.

Résumé

En tant que développeur front-end, la lisibilité et la maintenabilité du code ont toujours été un enjeu indispensable. Dans uniapp, nous devrions atteindre cet objectif en encapsulant les requêtes API pour améliorer autant que possible la réutilisabilité et la lisibilité du code. Parallèlement, dans les demandes de packaging, nous optimisons la méthode de packaging en fonction des besoins réels de chaque projet pour obtenir des opérations de demande plus efficaces.

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!