vue3 kapselt die API-Anfragen der Axios-Bibliothek und verwendet Interceptoren, um Anfragen und Antworten zu verarbeiten

Inhaltsverzeichnis

Warum den Kapselungsteil hinzufügen?

Spezifischer Code:

Erklärung des Codes:

wie benutzt man?

---

Warum den Kapselungsteil hinzufügen?

• Vereinfachen Sie den Prozess des Sendens von HTTP-Anfragen
• Stellen Sie einen einheitlichen Fehlerbehandlungsmechanismus bereit
• Unterstützt die Verwaltung und Authentifizierung des Benutzerstatus
• Hat eine gute Skalierbarkeit und Flexibilität
• Verbessern Sie die Entwicklungseffizienz und machen Sie den Code sauberer und einfacher zu warten

Spezifischer Code:

import axios from 'axios'
import { ElMessage } from 'element-plus'

// 从存储的用户模块中导入useUserStore钩子函数。
import useUserStore from '@/store/modules/user'

// 使用axios库创建一个名为api的实例，用于发送HTTP请求
const api = axios.create({
  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
  timeout: 1000 * 60,
  responseType: 'json',
})

api.interceptors.request.use(
  (request) => {
    const userStore = useUserStore()
    /**
     * 全局拦截请求发送前提交的参数
     * 以下代码为示例，在请求头里带上 token 信息
     */
    if (userStore.isLogin && request.headers) {
      request.headers.Token = userStore.token
    }
    // 是否将 POST 请求参数进行字符串化处理
    if (request.method === 'post') {
      // request.data = qs.stringify(request.data, {
      //   arrayFormat: 'brackets',
      // })
    }
    return request
  },
)

api.interceptors.response.use(
  (response) => {
    /**
     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
     * 假设返回数据格式为：{ status: 1, error: '', data: '' }
     * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
     * 请求出错时 error 会返回错误信息
     */
    if (response.data.status === 1) {
      if (response.data.error !== '') {
        // 这里做错误提示，如果使用了 element plus 则可以使用 Message 进行提示
        // ElMessage.error(options)
        return Promise.reject(response.data)
      }
    }
    else {
      useUserStore().logout()
    }
    return Promise.resolve(response.data)
  },
  (error) => {
    let message = error.message
    if (message === 'Network Error') {
      message = '后端网络故障'
    }
    else if (message.includes('timeout')) {
      message = '接口请求超时'
    }
    else if (message.includes('Request failed with status code')) {
      message = `接口${message.substr(message.length - 3)}异常`
    }
    ElMessage({
      message,
      type: 'error',
    })
    return Promise.reject(error)
  },
)

export default api

Erklärung des Codes:

1. Die benötigten Bibliotheken und Module werden vorgestellt:

   • axios: Wird zum Senden von HTTP-Anfragen verwendet.
   • ElMessage: Nachrichtenaufforderungskomponente von Element Plus.

2. Import useUserStore Hook-Funktion, die verwendet wird, um Benutzerstatus und Token vom gespeicherten Benutzermodul abzurufen.

3. erstellt eine Axios-Instanz mit dem Namen api zum Senden von HTTP-Anfragen. Beim Erstellen der Instanz werden die Basis-URL und das Zeitlimit basierend auf Umgebungsvariablen festgelegt.

4. Verwenden Sie die Methode api.interceptors.request.use(), um einen Anfrage-Interceptor zu registrieren, der einige Vorgänge ausführt, bevor die Anfrage gesendet wird. Die Details lauten wie folgt:

   • Rufen Sie den Benutzerstatus und das Token ab. Wenn der Benutzer angemeldet ist und der Anforderungsheader vorhanden ist, fügen Sie das Token zum Anforderungsheader hinzu.
   • Für POST-Anfragen können Sie optional die Anforderungsparameter mit Strings versehen (dieser Teil des Codes ist auskommentiert).

5. Verwenden Sie die Methode api.interceptors.response.use(), um einen Antwort-Interceptor zu registrieren, der die Anfrage nach ihrer Rückkehr verarbeitet. Die Details lauten wie folgt:

   • Bestimmen Sie den Statuscode der Antwortdaten. Wenn er 1 ist, bedeutet dies, dass die Anfrage erfolgreich ist, andernfalls wird sie als Fehler betrachtet.
   • Wenn eine Fehlermeldung vorliegt, wird eine globale Fehlermeldung angezeigt (im Beispielcode wird die Methode ElMessage.error() von Element Plus verwendet).
   • Wenn der Statuscode nicht 1 ist, rufen Sie die Methode useUserStore().logout() auf, um den Benutzer abzumelden.

6. Verwenden Sie Promise.resolve() im Antwort-Interceptor, um verarbeitete Daten zurückzugeben, oder verwenden Sie Promise.reject(), um Fehlerinformationen zurückzugeben.

7. Einige Fehlerinformationen werden verarbeitet und im Fehlerrückruf des Antwort-Interceptors abgefragt, darunter Netzwerkfehler, Zeitüberschreitungsfehler und Anforderungsausnahmefehler.

8. Abschließend exportieren Sie api zur Verwendung durch andere Module.

wie benutzt man?

Um dieses Codemodul zu verwenden, stellen Sie zunächst sicher, dass Axios und Element Plus installiert sind. Dies kann dann durch Importieren des Moduls api überall dort verwendet werden, wo Sie API-Anfragen senden müssen, zum Beispiel:

import api from '@/path/to/api'

// 发送 GET 请求
api.get('/api/endpoint')
  .then(response => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  })

// 发送 POST 请求
api.post('/api/endpoint', { key: value })
  .then(response => {
    // 处理返回的数据
  })
  .catch(error => {
    // 处理请求错误
  })

Je nach Ihren spezifischen Anforderungen können Sie verschiedene Methoden auf der api-Instanz aufrufen (z. B. get, post). , put, delete usw.), um verschiedene Arten von Anfragen zu senden und erfolgreiche Antwortdaten in der Methode then zu verarbeiten catchAnforderungsfehler in der Methode behandeln