Was nützt die Vue-Kapselung von Axios?

Vue-Kapselung von Axios kann die Codequalität verbessern und die Verwendung komfortabler machen. Die API von axios ist sehr benutzerfreundlich und Entwickler können sie problemlos direkt im Projekt verwenden. Mit zunehmender Projektgröße ist es jedoch erforderlich, bei jeder Initiierung einer HTTP-Anfrage Vorgänge wie das Festlegen eines Zeitlimits, das Festlegen von Anforderungsheadern usw. zu schreiben. Fehlerbehandlung usw. . Diese Art der sich wiederholenden Arbeit verschwendet nicht nur Zeit, sondern macht den Code auch überflüssig und schwierig zu warten. Um die Qualität unseres Codes zu verbessern, sollten wir Axios vor der Verwendung zweimal im Projekt kapseln, was die Arbeit erleichtern kann verwenden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer. Axios Was ist Axios? Seit Vue2.0 hat Youda angekündigt, die offizielle Empfehlung von vue-resource abzubrechen und stattdessen axios zu empfehlen. Mittlerweile ist Axios für die meisten Vue-Entwickler zur ersten Wahl geworden.

Mit zunehmendem Umfang des Projekts werden jedoch bei jeder Initiierung einer HTTP-Anfrage diese Vorgänge wie das Festlegen des Zeitlimits, das Festlegen des Anforderungsheaders, das Bestimmen der zu verwendenden Anforderungsadresse basierend auf der Projektumgebung, die Fehlerbehandlung usw. , alles muss geschrieben werden Diese Art der Doppelarbeit verschwendet nicht nur Zeit, sondern macht den Code auch überflüssig und schwierig zu warten. Um die Qualität unseres Codes zu verbessern, sollten wir Axios zweimal im Projekt kapseln und dann verwenden Zum Beispiel:

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...}).then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);});

Wenn jede Seite ähnliche Anfragen sendet, muss einfach viel Konfiguration und Fehlerbehandlung geschrieben werden Es scheint zu umständlich

Zu diesem Zeitpunkt müssen wir Axios neu kapseln, um die Verwendung komfortabler zu machen

So kapseln Sie

Während der Kapselung müssen Sie einige Vereinbarungen mit dem Backend aushandeln, Header anfordern und Statuscodes angeben , Anforderungs-Timeout ... Schnittstellen-Anforderungspräfix festlegen: Abhängig von der Entwicklungs-, Test- und Produktionsumgebung müssen die Präfixe unterschieden werden

Anforderungsheader: Um bestimmte Dienste zu implementieren, müssen einige Parameter übertragen werden. Nur dann können Anforderungen ausgeführt werden gemacht werden (zum Beispiel: Mitgliedschaftsgeschäft)

Statuscode: Abhängig vom unterschiedlichen Status, der von der Schnittstelle zurückgegeben wird, können unterschiedliche Dienste ausgeführt werden. Dies muss mit dem Backend vereinbart werden.

Anforderungsmethode: Führen Sie eine Neukapselung basierend auf durch Get-, Post- und andere Methoden sind bequemer zu verwenden.

Request-Interceptor: Bestimmen Sie, auf welche Anforderungen gemäß den Einstellungen des Anforderungsheaders zugegriffen werden kann.

Response-Interceptor: Dieser Block basiert auf dem vom Backend zurückgegebenen Statuscode, um zu bestimmen Ausführung verschiedener Dienste

Legen Sie das Schnittstellenanforderungspräfix fest

Verwenden Sie Knotenumgebungsvariablen, um Entscheidungen zur Unterscheidung von Entwicklungs-, Test- und Produktionsumgebungen zu treffen

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

Beim lokalen Debuggen müssen Sie auch devServer in der vue.config konfigurieren. js-Datei zum Implementieren einer domänenübergreifenden

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

Anforderungsheader und Timeout-Zeit festlegen

In den meisten Fällen sind die Anforderungsheader festgelegt. Hier sind einige spezielle Anforderungsheader erforderlich Der Universal Requests Header als Basiskonfiguration. Wenn ein spezieller Anforderungsheader erforderlich ist, übergeben Sie den speziellen Anforderungsheader als Parameter, um die Grundkonfiguration zu überschreiben aufzurufen und verfügbar zu machen

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

Fügen Sie die gekapselte Methode in eine api.js-Datei ein

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

Sie können sie direkt auf der Seite aufrufen

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

Auf diese Weise kann die API in Zukunft einheitlich verwaltet und geändert werden Muss nur in der api.js-Datei durchgeführt werden

Request Interceptor

Request Interceptor kann jeder Anfrage ein Token hinzufügen und ist nach der einheitlichen Verarbeitung einfach zu warten

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

Response interceptor

Response interceptor kann Führen Sie nach Erhalt der Antwort eine Schicht aus, z. B. die Beurteilung des Anmeldestatus und der Autorisierung anhand des Statuscodes.

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

Zusammenfassung

Die einfache Kapselung von Axios ermöglicht es uns, ihren Charme zu schätzen Niemand Absoluter Standard, solange Ihr Paket Ihre Projektanforderungen erfüllt und einfach zu verwenden ist, ist es eine gute Paketlösung

[Verwandte Empfehlungen:

vuejs-Video-Tutorial

,

Web-Front-End-Entwicklung

]

Das obige ist der detaillierte Inhalt vonWas nützt die Vue-Kapselung von Axios?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!