Einfache Kapselung von Axios und Beispielcode zur Verwendung

importiere Axios von „Axios“;
importiere ElementUI von „element-ui“;
importiere „element-ui/lib/theme-chalk/index.css“;
Router aus „../router“ importieren;

wenn (Prozess.env.NODE_ENV === 'Entwicklung') {
  axios.defaults.baseURL = "API";
} sonst wenn (Prozess.Umgebung.NODE_ENV === 'Produktion') {
  axios.defaults.baseURL = "https://xxxxxxxxxx/index/";
}

//Der Anforderungs-Interceptor unterscheidet die Anforderungsheader beim Senden normaler Anforderungen und beim Senden von Formulardaten axios.interceptors.request.use((config) => {
  config.headers['Inhaltstyp'] = 'Anwendung/json';
  wenn (Konfigurationsmethode === 'post') {
    //Anforderungsheader für FormData, wenn (Object.prototype.toString.call(config.data) === '[object FormData]') {
      // Anforderungs-Interceptor-Verarbeitung config.headers['Content-Type'] = 'multipart/form-data';
    } sonst wenn (Object.prototype.toString.call(config.data) === '[Objekt String]') {
      config.headers['Inhaltstyp'] = 'Anwendung/x-www-form-urlencoded';
    }
  } anders {
    config.headers['Inhaltstyp'] = 'Anwendung/json';
  }
  Konfiguration zurückgeben;
});

//Antwort-Interceptor axios.interceptors.response.use(
  (Konfiguration) => {
    let Wert = Konfigurationsdaten;
    wenn (config.status && config.status === 200) {
      wenn (Typ des Wertes === 'Zeichenfolge') {
        wenn (Wert === 'Timeout') {
          ElementUI.MessageBox.confirm('Sie haben zu lange nicht gearbeitet oder Sie haben keine Berechtigung zum Arbeiten. Bitte gehen Sie zur Anmeldeseite und melden Sie sich erneut an?', 'Prompt', {
            confirmButtonText: 'Bestätigen',
            Typ: "Warnung"
          }).then(() => {
            router.push({ Name: 'login' });
          });
        }anders {
          ElementUI.Message.info(Wert);
        }
      }
    }
    Konfiguration zurückgeben;
  },
  (fehler) => {
    let-Wert = err.response.statusText;
    Schalter (Fehler.Antwort.Status) {
      Fall 400:
        ElementUI.Message.error('Das Syntaxformat ist falsch und der Server kann diese Anfrage nicht verstehen.')
        brechen;
      Fall 401:
      Fall 403:
      Fall 404:
      Fall 405:
        ElementUI.Message.warning(Wert);
        brechen;
      Standard:
        ElementUI.Message.error('Während des Vorgangs ist ein Fehler aufgetreten. Dieser Vorgang ist ungültig!' + Wert);
        brechen;
    }
    Fehlerantwort zurückgeben
  }
);

exportiere asynchrone Funktion axiosGet(url, params = {}) {
  : Lassen Sie res = await axios.get(url, { params: params });
  wenn(res.status === 200){
    Rückgabewert.Daten
  }anders {
    throw res.statusText
  }
}

exportiere asynchrone Funktion axiosPost(url, params = {}) {
  let res = warte auf axios.post(URL, Parameter);
  wenn(res.status === 200){
    Rückgabewert.Daten
  }anders {
    throw res.statusText
  }
}

importiere { axiosGet, axiosPost } aus './axios'

Standard exportieren {
  getLogin:(params = {}) => {
    returniere axiosPost('/login', Parameter)
  },
  getUser:(params = {}) => {
    returniere axiosGet('http://localhost:3000/Benutzer', Parameter)
  }
}

importiere DbauditServer aus '@/server/api'
//Fügen Sie api.js in die Datei ein, um die Schnittstelle aufzurufen

let formData = neue FormData
formData.append('Passwort', this.formLabelAlign.password)
let res1 = await DbauditServer.getLogin(formData) //Rufen Sie es einfach auf und es wird normal funktionieren let res2 = await DbauditServer.getUser()