A quoi sert vue encapsulant axios ?

Vue encapsulant les axios peut améliorer la qualité du code et rendre son utilisation plus pratique. L'API d'axios est très conviviale et les développeurs peuvent facilement l'utiliser directement dans le projet ; cependant, à mesure que l'échelle du projet augmente, chaque fois qu'une requête HTTP est lancée, il est nécessaire d'écrire des opérations telles que la définition du délai d'attente, la configuration des en-têtes de requête, gestion des erreurs, etc. Ce type de travail répétitif non seulement fait perdre du temps, mais rend également le code redondant et difficile à maintenir ; afin d'améliorer la qualité de notre code, nous devrions encapsuler axios deux fois dans le projet avant de l'utiliser, ce qui peut le rendre plus pratique ; utiliser.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

axios Qu'est-ce que

axios est un client HTTP léger

basé sur le service XMLHttpRequest pour effectuer des requêtes HTTP, prend en charge une configuration riche, prend en charge Promise, prend en charge le côté navigateur et le côté Node.js. Depuis Vue2.0, Youda a annoncé qu'il annulerait la recommandation officielle de vue-resource et recommanderait plutôt axios. Désormais, axios est devenu le premier choix de la plupart des développeurs Vue

Pourquoi encapsuler

L'API d'axios est très conviviale et vous pouvez facilement l'utiliser directement dans votre projet.

Cependant, à mesure que l'échelle du projet augmente, chaque fois qu'une requête HTTP est lancée, ces opérations telles que la définition du délai d'attente, la définition de l'en-tête de la requête, la détermination de l'adresse de requête à utiliser en fonction de l'environnement du projet, la gestion des erreurs, etc. , tout doit être écrit

Ce type de duplication de travail fait non seulement perdre du temps, mais rend également le code redondant et difficile à maintenir. Afin d'améliorer la qualité de notre code, nous devrions encapsuler axios deux fois dans le projet puis utiliser

Par exemple :

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...}).then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);});

Si chaque page envoie des requêtes similaires, beaucoup de configuration et de gestion des erreurs doivent être écrites, juste il semble trop fastidieux

À ce stade, nous devons ré-encapsuler axios pour le rendre plus pratique à utiliser

Comment encapsuler

Pendant l'encapsulation, vous devez négocier certains accords avec le backend, demander des en-têtes, un code d'état , délai d'attente de la demande...

Définir le préfixe de la demande d'interface : en fonction des environnements de développement, de test et de production, les préfixes doivent être distingués

En-tête de la demande : pour implémenter certains services spécifiques, certains paramètres doivent être transportés. Ce n'est qu'alors que les requêtes peuvent être effectué (par exemple : entreprise d'adhésion)

Code d'état : selon les différents statuts renvoyés par l'interface, différents services peuvent être exécutés. Cela doit être convenu avec le backend

Méthode de requête : effectuer une ré-encapsulation basée sur. get, post et d'autres méthodes, il est plus pratique à utiliser

Intercepteur de requête : déterminez quelles requêtes sont accessibles en fonction des paramètres de l'en-tête de la requête

Intercepteur de réponse : ce bloc est basé sur le code d'état renvoyé par le backend pour déterminer le exécution de différents services

Définissez le préfixe de demande d'interface

Utilisez les variables d'environnement de nœud pour porter des jugements afin de distinguer les environnements de développement, de test et de production

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

Lors du débogage local, vous devez également configurer devServer dans le vue.config. js pour implémenter le transfert proxy. Pour réaliser un transfert inter-domaines

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

Définissez les en-têtes de requête et le délai d'expiration

Dans la plupart des cas, les en-têtes de requête sont corrigés. Dans quelques cas seulement, certains en-têtes de requête spéciaux sont requis. l'en-tête des requêtes universelles comme configuration de base. Lorsqu'un en-tête de requête spécial est requis, transmettez l'en-tête de requête spéciale en tant que paramètre pour écraser la configuration de base

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

Encapsulez la méthode de requête

Introduisez d'abord la méthode encapsulée, puis ré-encapsulez-la dans une méthode dans l'interface pour être appelé et l'exposer

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

Mettez la méthode encapsulée dans un fichier api.js

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

Vous pouvez l'appeler directement dans la page

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

De cette façon, l'API pourra être gérée de manière uniforme à l'avenir, la maintenance et la modification. il suffit de le faire dans le fichier api.js. faire une couche après avoir reçu la réponse Opérations, telles que juger du statut de connexion et de l'autorisation en fonction du code de statut

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

Résumé

L'encapsulation est une méthode très significative en programmation L'encapsulation axios simple nous permet d'apprécier son charme

encapsulation axios. Il n'y a pas de norme absolue, tant que votre package peut répondre aux besoins de votre projet et est facile à utiliser, c'est une bonne solution de package

[Recommandations associées : tutoriel vidéo vuejs

,

développement web front-end

]

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!