Introduction à l'encapsulation Axios et aux méthodes courantes dans Vue

Introduction à l'encapsulation Axios et aux méthodes courantes dans Vue

Axios est une bibliothèque HTTP basée sur Promise. Son avantage est qu'elle a une bonne lisibilité, facilité d'utilisation et évolutivité. En tant que framework frontal populaire, Vue fournit également une prise en charge complète d'Axios. Cet article expliquera comment encapsuler Axios dans Vue et présentera certaines méthodes couramment utilisées d'Axios.

1. Encapsulation Axios

Pendant le processus de développement, nous devons souvent effectuer une encapsulation personnalisée d'Axios, comme l'ajout d'en-têtes fixes, le traitement uniforme des retours d'erreur, etc. Cela rend le code plus propre et plus facile à maintenir. Ce qui suit décrit comment encapsuler Axios.

(1) Encapsulation de la configuration des requêtes

Définissons d'abord un fichier config.js pour une gestion unifiée de la configuration des requêtes.

import axios from 'axios'

// 创建一个axios的实例
const Axios = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default Axios

Dans ce fichier, nous définissons une instance Axios et ajoutons l'interception de requêtes et l'intercepteur de réponse. De cette façon, lors de l'envoi d'une requête, elle sera d'abord traitée par l'intercepteur de requête, et lors de la réponse, elle sera également traitée en premier par l'intercepteur de réponse.

(2) Encapsulation de la méthode de requête

L'instance Axios a été définie dans le fichier config.js, et nous pouvons créer différentes méthodes de requête selon les besoins. Par exemple, nous devons maintenant définir une méthode get.

import Axios from './config'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

La méthode get ici utilise la méthode get de l'instance Axios et transmet l'URL et les paramètres lors de la demande, afin qu'une requête GET puisse être envoyée. Lorsque la demande aboutit, nous utilisons Promise pour résoudre les données renvoyées, et lorsque la demande échoue, nous rejetons l'erreur.

De même, nous pouvons encapsuler différents types de méthodes de requête selon les besoins.

2. Introduction aux méthodes courantes d'Axios

Après avoir terminé l'emballage d'Axios, certaines méthodes couramment utilisées d'Axios seront présentées ci-dessous.

(1) GET request

get(url[, config])

url : URL demandée, vous pouvez utiliser un chemin relatif ou un chemin absolu.

config : configuration demandée, y compris les paramètres, les en-têtes, etc.

import Axios from './config'

Axios.get('/user?id=1')
  .then(response => {})
  .catch(error => {})

(2) Requête POST

post(url[, data[, config]])

url : URL demandée, vous pouvez utiliser un chemin relatif ou un chemin absolu.

data : Données demandées.

config : configuration demandée, y compris les en-têtes, etc.

import Axios from './config'

Axios.post('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(3) PUT request

put(url[, data[, config]])

url : L'url demandée, vous pouvez utiliser un chemin relatif ou un chemin absolu.

data : Données demandées.

config : configuration demandée, y compris les en-têtes, etc.

import Axios from './config'

Axios.put('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(4) DELETE request

delete(url[, config])

url : L'url demandée, vous pouvez utiliser un chemin relatif ou un chemin absolu.

config : configuration demandée, y compris les en-têtes, etc.

import Axios from './config'

Axios.delete('/user?id=1')
  .then(response => {})
  .catch(error => {})

(5) Interception de requête

Dans le fichier config.js, nous définissons un intercepteur de requête. Vous pouvez utiliser des intercepteurs de requêtes pour effectuer un traitement de données personnalisé, ajouter des en-têtes de requête, etc.

Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'token'
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

(6) Interception de réponse

Dans le fichier config.js, nous définissons un intercepteur de réponse. Vous pouvez utiliser des intercepteurs de réponses pour effectuer une gestion personnalisée des erreurs, un traitement des données, etc.

Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // do something
    }
    return Promise.reject(error)
  }
)

3. Résumé

Cet article présente comment encapsuler Axios dans Vue, ainsi que certaines méthodes couramment utilisées d'Axios. L'avantage d'Axios réside dans sa facilité d'utilisation et son évolutivité, qui peuvent nous aider à envoyer rapidement des requêtes HTTP et à traiter les résultats des réponses pendant le développement. Lors de l'utilisation d'Axios, nous devrions parvenir à une gestion unifiée de la configuration des demandes pour faciliter la maintenance ultérieure. Dans le même temps, différents types de méthodes de requête doivent être encapsulés selon les besoins pour répondre aux différents besoins de développement.

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!