Explication détaillée de l'utilisation d'axios pour envoyer des requêtes asynchrones dans Vue

Vue est un framework frontal extrêmement populaire, et Axios est actuellement une bibliothèque de requêtes asynchrones frontales populaire. Cet article présentera en détail comment utiliser Axios pour envoyer des requêtes asynchrones dans Vue.

Installation et utilisation d'Axios
Axios est un client HTTP basé sur Promise pour l'envoi de requêtes asynchrones. Nous pouvons l'installer via npm :

npm install axios

Ensuite, nous pouvons l'utiliser dans Vue, nous devons d'abord l'importer dans le composant :

importer axios depuis 'axios'

Ensuite, nous pourrons utiliser Axios dans Vue. Nous présenterons ensuite la méthode spécifique d'utilisation d'Axios pour envoyer des requêtes asynchrones dans Vue.

Méthodes courantes d'Axios
Dans Axios, les méthodes de requête couramment utilisées sont GET, POST, PUT, DELETE, etc. Ces méthodes correspondent à différents types de requêtes HTTP.

Par exemple, nous pouvons utiliser Axios pour envoyer une requête GET :

axios.get('/api/data').then(response => {
console.log(response)
})

où, /api/ data représente l'interface API qui doit être demandée.

De même, nous pouvons envoyer une requête POST :

axios.post('/api/data', {
firstName : 'Fred',
lastName : 'Flintstone'
}).then(response => {
console.log(response)
})

Les méthodes ci-dessus sont les méthodes GET et POST couramment utilisées dans Axios. De plus, il existe également des méthodes PUT, DELETE et d'autres. L'utilisation de ces méthodes est la même que celle de GET et POST. méthodes.

Interception de requêtes et interception de réponses d'Axios
Dans Axios, nous pouvons configurer des intercepteurs de requêtes et des intercepteurs de réponses pour effectuer un traitement personnalisé des requêtes et des réponses.

Par exemple, on peut ajouter un token dans l'intercepteur de requêtes :

axios.interceptors.request.use(
config => {

// 在请求发送之前做一些处理
const token = localStorage.getItem('token')
if (token) {
  config.headers.Authorization = `Bearer ${token}`
}
return config

},
error => {

// 对请求错误做些什么
return Promise.reject(error)

}
)

Dans le code ci-dessus, nous déterminons s'il existe un jeton avant d'envoyer la requête. Si tel est le cas, ajoutez-le à l'en-tête de la requête pour implémenter l'authentification de l'utilisateur.

De plus, nous pouvons également effectuer certains traitements sur les données renvoyées dans l'intercepteur de réponse, comme un traitement unifié des données ou un jugement de certains états.

axios.interceptors.response.use(
réponse => {

// 对响应数据做一些处理
return response

},
error => {

// 对响应错误做些什么
return Promise.reject(error)

}
)

Configuration globale d'Axios
Nous pouvons également définir certaines configurations globales dans Axios, par exemple, définissez le délai d'expiration de la demande :

axios.defaults.timeout = 10000

Le code ci-dessus signifie définir le délai d'expiration de la demande sur 10 secondes. De plus, vous pouvez également définir les en-têtes par défaut de la requête, définir la baseURL de la requête, etc.

Résumé
Axios est l'une des bibliothèques principales pour l'envoi de requêtes asynchrones dans Vue. Elle fournit un moyen simple et facile à utiliser pour envoyer diverses requêtes via Promise. L'utilisation d'Axios dans le projet Vue peut non seulement améliorer les performances et la maintenabilité des applications Web, mais également nous permettre de mieux contrôler le processus de demande des applications Web.

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!