Meilleures pratiques pour encapsuler axios dans Vue

Vue est l'un des frameworks les plus couramment utilisés dans le développement front-end, et les requêtes Ajax sont un élément très critique du développement front-end. Afin de faciliter l'utilisation par les développeurs, il existe de nombreuses pratiques dans la communauté Vue qui encapsulent la bibliothèque de requêtes Ajax axios. Cet article présentera les meilleures pratiques pour encapsuler axios dans Vue et vous aidera à mieux comprendre comment utiliser axios dans les projets Vue.

1. Encapsuler axios

Dans le projet Vue, nous devons encapsuler axios pour une utilisation facile. Voici un package axios standard :

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL: process.env.VUE_APP_BASE_API // api请求的baseURL
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前进行token鉴权
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      // 抛出异常信息
      return Promise.reject(new Error(res.message || '错误'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    if (error.response.status === 401) {
      // 跳转到登录页
      router.push({ path: '/login' })
    }
    return Promise.reject(error)
  }
)

export default service

Le code ci-dessus crée une instance axios et y configure les intercepteurs de requêtes et de réponses. Dans l'intercepteur de requêtes, nous pouvons obtenir le jeton utilisateur via le magasin et l'ajouter à l'en-tête de la requête pour l'authentification. Dans l'intercepteur de réponse, nous gérons les exceptions de réponse du serveur et les demandes non autorisées, ainsi que le traitement des données renvoyées.

2. Encapsuler les requêtes http

Lors de l'utilisation d'axios, nous devons généralement encapsuler davantage les requêtes http pour une gestion unifiée. Ci-dessous, nous créons un wrapper pour diverses requêtes http.

get request:

import http from '@/utils/http'

export default {
    get(url, params) {
        return http.get(url, {
            params: params
        })
    }
}

post request:

import http from '@/utils/http'

export default {
    post(url, data) {
        return http.post(url, data)
    }
}

delete request:

import http from '@/utils/http'

export default {
    delete(url) {
        return http.delete(url)
    }
}

put request:

import http from '@/utils/http'

export default {
    put(url, data) {
        return http.put(url, data)
    }
}

Grâce à l'encapsulation ci-dessus, nous pouvons directement appeler la méthode correspondante lors de l'utilisation de la requête http.

3. Utilisation dans les projets Vue

Pour utiliser des requêtes axios et http encapsulées dans les projets Vue, vous devez procéder comme suit :

Tout d'abord, nous devons introduire les axios et les requêtes http encapsulées dans le fichier main.js :

import axios from 'axios'
import http from '@/utils/http'

Vue.prototype.$axios = axios
Vue.prototype.$http = http

Deuxièmement, utilisez-le dans le composant :

import api from '@/api/api'

export default {
  name: 'Demo',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {
        // 请求参数
      }
      api.get('/data', params).then(res => {
        console.log(res)
        this.dataList = res.data
      })
    }
  }
}

Ici, nous introduisons la requête http encapsulée par l'API, et appelons la méthode getData pour lancer la requête http dans le cycle de vie monté, et enfin affichons le résultat sur la page.

4. Conclusion

Cet article présente les meilleures pratiques pour encapsuler les axios dans Vue. Ces pratiques ont un bon effet sur l'amélioration de l'efficacité du développement et la réduction de la duplication de code. Pour les développeurs qui débutent avec Vue, ces techniques peuvent être facilement apprises et comprises, et peuvent également jouer un rôle plus important dans le développement réel.

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!