Best Practices für die Kapselung von Axios in Vue

Vue ist eines der am häufigsten verwendeten Frameworks in der Front-End-Entwicklung und Ajax-Anfragen sind ein sehr wichtiger Teil der Front-End-Entwicklung. Um Entwicklern die Verwendung zu erleichtern, gibt es in der Vue-Community viele Praktiken, die die Axios der Ajax-Anforderungsbibliothek kapseln. In diesem Artikel werden die Best Practices für die Kapselung von Axios in Vue vorgestellt und Ihnen dabei geholfen, die Verwendung von Axios in Vue-Projekten besser zu verstehen.

1. Axios kapseln

Im Vue-Projekt müssen wir Axios für eine einfache Verwendung kapseln. Hier ist ein Standard-Axios-Paket:

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

Der obige Code erstellt eine Axios-Instanz und konfiguriert darauf Anforderungs- und Antwort-Interceptoren. Im Request-Interceptor können wir das Benutzertoken über den Store abrufen und zur Authentifizierung zum Request-Header hinzufügen. Im Response-Interceptor kümmern wir uns um Server-Antwortausnahmen und nicht autorisierte Anfragen sowie um die Verarbeitung zurückgegebener Daten.

2. HTTP-Anfragen kapseln

Bei der Verwendung von Axios müssen wir http-Anfragen normalerweise für eine einheitliche Verwaltung weiter kapseln. Nachfolgend erstellen wir einen Wrapper für verschiedene http-Anfragen.

Get-Anfrage:

import http from '@/utils/http'

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

Post-Anfrage:

import http from '@/utils/http'

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

Löschanfrage:

import http from '@/utils/http'

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

Put-Anfrage:

import http from '@/utils/http'

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

Durch die obige Kapselung können wir die entsprechende Methode direkt aufrufen, wenn wir eine http-Anfrage verwenden.

3. Verwendung in Vue-Projekten

Um gekapselte Axios und http-Anfragen in Vue-Projekten zu verwenden, müssen Sie Folgendes tun:

Zuerst müssen wir Axios und gekapselte http-Anfragen in der Datei main.js einführen:

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

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

Zweitens verwenden wir es in der Komponente:

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
      })
    }
  }
}

Hier stellen wir die von der API gekapselte http-Anfrage vor und rufen die getData-Methode auf, um die http-Anfrage im gemounteten Lebenszyklus zu initiieren und schließlich das Ergebnis auf der Seite anzuzeigen.

4. Fazit

In diesem Artikel werden die Best Practices für die Kapselung von Axios in Vue vorgestellt. Diese Praktiken haben einen guten Effekt auf die Verbesserung der Entwicklungseffizienz und die Reduzierung von Codeduplizierungen. Für Entwickler, die neu bei Vue sind, sind diese Techniken leicht zu erlernen und zu verstehen und können auch in der tatsächlichen Entwicklung eine größere Rolle spielen.

Das obige ist der detaillierte Inhalt vonBest Practices für die Kapselung von Axios in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!