Beispielcode einer Vue-Anwendung basierend auf der Axios-Anforderungskapselung

const Instanz = axios.create({
{
   // „url“ ist die für die Anfrage zu verwendende Server-URL
  URL: '/Benutzer',

  // `method` ist die Methode, die beim Erstellen der Anforderungsmethode verwendet wird: 'get', // Standard

  // `baseURL` wird automatisch vor `url` gestellt, es sei denn, `url` ist eine absolute URL.
  // Es ist praktisch, relative URLs an die Methoden der Axios-Instanz zu übergeben, indem man eine `baseURL` setzt
  Basis-URL: „https://some-domain.com/api/“,

  // `transformRequest` ermöglicht die Änderung von Anforderungsdaten vor dem Senden an den Server // Kann nur mit den Anforderungsmethoden 'PUT', 'POST' und 'PATCH' verwendet werden // Die Funktionen im folgenden Array müssen einen String, ArrayBuffer oder Stream zurückgeben
  transformRequest: [Funktion (Daten, Header) {
    //Führen Sie eine beliebige Konvertierung der Daten durch. Return Data;
  }],

  // `transformResponse` ermöglicht die Änderung der Antwortdaten vor der Übergabe an then/catch transformResponse: [function (data) {
    //Führen Sie eine beliebige Konvertierung der Daten durch. Return Data;
  }],

  // `headers` ist der benutzerdefinierte Anforderungsheader, der gesendet wird: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` sind die URL-Parameter, die mit der Anfrage gesendet werden // muss ein einfaches Objekt oder ein URLSearchParams-Objekt sein params: {
    Nr.: 12345
  },

   // „paramsSerializer“ ist eine Funktion, die für die Serialisierung von „Params“ verantwortlich ist // (z. B. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: Funktion(Params) {
    gibt Qs.stringify(Params, {ArrayFormat: 'Klammern'}) zurück
  },

  // `data` sind die Daten, die als Anfragetext gesendet werden sollen // Gilt nur für die Anfragemethoden 'PUT', 'POST' und 'PATCH'
  // Wenn „transformRequest“ nicht festgelegt ist, muss es einer der folgenden Typen sein:
  // - Zeichenfolge, einfaches Objekt, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browserspezifisch: FormData, File, Blob
  // - Knotenspezifisch: Stream
  Daten: {
    Vorname: 'Fred'
  },

  // `timeout` gibt die Anzahl der Millisekunden an, nach denen die Anforderung abläuft (0 bedeutet kein Timeout)
  // Wenn die Anfrage länger als `timeout` dauert, wird die Anfrage unterbrochen timeout: 1000,

   // `withCredentials` gibt an, ob Anmeldeinformationen für domänenübergreifende Anforderungen erforderlich sind withCredentials: false, // Standard

  // „Adapter“ ermöglicht eine benutzerdefinierte Anforderungsverarbeitung, um das Testen zu vereinfachen. // Gibt ein Versprechen mit einer gültigen Antwort zurück (siehe [Antwortdokumente](#response-api)).
  Adapter: Funktion (Konfiguration) {
    /* … */
  },

 // `auth` gibt an, dass die HTTP-Basisauthentifizierung verwendet werden soll, und stellt Anmeldeinformationen bereit // Dadurch wird ein `Authorization`-Header festgelegt, der alle vorhandenen benutzerdefinierten `Authorization`-Header überschreibt, die mit `headers` auth: { festgelegt wurden.
    Benutzername: 'janedoe',
    Passwort: „s00pers3cret“
  },

   // `responseType` gibt den Datentyp der Serverantwort an, der „Arraybuffer“, „Blob“, „Document“, „JSON“, „Text“ oder „Stream“ sein kann.
  Antworttyp: „json“, // Standard

  // `responseEncoding` gibt die Kodierung an, die zum Dekodieren von Antworten verwendet werden soll
  // Hinweis: Wird für `responseType` von 'stream' oder clientseitigen Anfragen ignoriert
  Antwortkodierung: „utf8“, // Standard

   // `xsrfCookieName` ist der Name des Cookies, der als Wert des XSRF-Tokens verwendet wird xsrfCookieName: 'XSRF-TOKEN', // Standard

  // `xsrfHeaderName` ist der Name des HTTP-Headers, der den XSRF-Token-Wert trägt
  xsrfHeaderName: 'X-XSRF-TOKEN', // Standard

   // `onUploadProgress` ermöglicht die Verarbeitung von Fortschrittsereignissen für Uploads onUploadProgress: function (progressEvent) {
    // Machen Sie mit dem nativen Fortschrittsereignis, was Sie wollen
  },

  // `onDownloadProgress` ermöglicht die Verarbeitung von Fortschrittsereignissen für den Download onDownloadProgress: function (progressEvent) {
    // Behandlung nativer Fortschrittsereignisse},

   // `maxContentLength` definiert die maximale Größe des Antwortinhalts maxContentLength: 2000,

  // „validateStatus“ definiert, ob das Versprechen für einen bestimmten HTTP-Antwortstatuscode eingelöst oder abgelehnt werden soll. Wenn „validateStatus“ „true“ zurückgibt (oder auf „null“ oder „undefined“ gesetzt ist), wird das Versprechen eingelöst, andernfalls wird das Versprechen abgelehnt.
  validateStatus: Funktion (Status) {
    Rückgabestatus >= 200 und Status < 300; // Standard
  },

  // `maxRedirects` definiert die maximale Anzahl von Weiterleitungen, denen in node.js gefolgt wird // Wenn der Wert auf 0 gesetzt ist, werden keine Weiterleitungen verfolgt maxRedirects: 5, // Standard

  // „socketPath“ definiert einen UNIX-Socket, der in node.js verwendet werden soll.
  // zB „/var/run/docker.sock“, um Anfragen an den Docker-Daemon zu senden.
  // Es kann nur entweder „socketPath“ oder „proxy“ angegeben werden.
  // Wenn beide angegeben sind, wird „socketPath“ verwendet.
  socketPath: null, // Standard

  // „httpAgent“ und „httpsAgent“ werden in node.js verwendet, um benutzerdefinierte Agenten zu definieren, die bei der Ausführung von http bzw. https verwendet werden sollen. Ermöglicht Konfigurationsoptionen wie diese:
  // `keepAlive` ist standardmäßig nicht aktiviert httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: neuer https.Agent({ keepAlive: true }),

  // „Proxy“ definiert den Hostnamen und den Port des Proxyservers. // „auth“ gibt an, dass die HTTP-Basisauthentifizierung verwendet werden soll, um eine Verbindung mit dem Proxy herzustellen und Anmeldeinformationen bereitzustellen. // Dadurch wird ein „Proxy-Authorization“-Header festgelegt, der alle vorhandenen benutzerdefinierten „Proxy-Authorization“-Header überschreibt, die mit „header“ festgelegt wurden.
  Proxy: {
    Host: '127.0.0.1',
    Port: 9000,
    Autorisierung:
      Benutzername: 'mikeymike',
      Passwort: „rapunz3l“
    }
  },

  // `cancelToken` gibt das Abbruchtoken an, das zum Abbrechen der Anfrage verwendet wird
  // (Weitere Informationen finden Sie im Abschnitt „Stornierung“ weiter unten.)
  cancelToken: neues CancelToken(Funktion (abbrechen) {
  })
}
}).dann(Funktion(Antwort){
// `data` Die vom Server bereitgestellten Antwortdaten: {},

  // `status` Der HTTP-Statuscode aus der Serverantwort Status: 200,

  // `statusText` HTTP-Statusinformationen aus der Serverantwort statusText: 'OK',

  // `headers` Server-Antwort-Header: {},

   // `config` sind die für die Anforderung bereitgestellten Konfigurationsinformationen config: {},
 // 'Anfrage'
  // „Anfrage“ ist die Anfrage, die diese Antwort generiert hat
  // Es ist die letzte ClientRequest-Instanz in node.js (in Weiterleitungen)
  // und eine XMLHttpRequest-Instanz des Browsers
  Anfrage: {}
});

Instanz.get('/longRequest', {
 Zeitüberschreitung: 5000
});

Instanz.Standardwerte.Timeout = 2500;

var Instanz = axios.create();

// Anfrage-Interceptor hinzufügen axios.interceptors.request.use(function (config) {
    // Tun Sie etwas, bevor Sie die Anfrage senden. Return-Konfiguration;
  }, Funktion (Fehler) {
    // Etwas mit dem Anforderungsfehler tun return Promise.reject(error);
  });

// Antwort-Interceptor hinzufügen axios.interceptors.response.use(function (response) {
    // Etwas mit den Antwortdaten machen return response;
  }, Funktion (Fehler) {
    Schalter (Fehler.Antwort.Status) {
      Fall 400:
        err.message = 'Fehleranforderung';
        brechen;
      Fall 401:
        err.message = „Nicht autorisiert, bitte melden Sie sich erneut an“;
        brechen;
      Fall 403:
        err.message = 'Zugriff verweigert';
        brechen;
      Fall 404:
        err.message = „Anforderungsfehler, die Ressource wurde nicht gefunden“;
        brechen;
      Fall 405:
        err.message = „Anforderungsmethode nicht zulässig“;
        brechen;
      Fall 408:
        err.message = „Zeitüberschreitung der Anforderung“;
        brechen;
       Fall 415:
        err.message = „Der Server kann das an die Anfrage angehängte Medienformat nicht verarbeiten.“;
        brechen;
      Fall 500:
        err.message = 'Serverfehler';
        brechen;
      Fall 501:
        err.message = 'Netzwerk nicht implementiert';
        brechen;
      Fall 502:
        err.message = 'Netzwerkfehler';
        brechen;
      Fall 503:
        err.message = „Dienst nicht verfügbar“;
        brechen;
      Fall 504:
        err.message = „Netzwerk-Timeout“;
        brechen;
      Fall 505:
        err.message = „Die HTTP-Version unterstützt diese Anfrage nicht“;
        brechen;
      Standard:
        err.message = `Verbindungsfehler ${err.response.status}`;
    }
  } anders {
    err.message = „Verbindung zum Server konnte nicht hergestellt werden“;
  }
  gibt Promise.resolve(err.response) zurück;
  });

axios.get({
	Methode: 'get',
	URL: „xxxx“,
	reponseType:'', //entsprechender Typ parems:{//Eingabeparameter }
}).dann(Funktion(Antwort){
	....
})

axios({
  Methode: 'post',
  URL: '/Benutzer/12345',
  Daten: {
    Vorname: 'Fred',
    Nachname: 'Flintstone'
  }
}).dann(Funktion(res){

});

axios({
  Methode: 'löschen',
  URL: '/Benutzer/12345',
 //Parameter 1: Am Ende der Anfrage einhängen parmes: {
 }
 //Parameter 2: In die Daten des Anforderungstexts einbinden{
}
}).dann(Funktion(res){

});

axios({
  Methode: 'put',
  URL: '/Benutzer/12345',
 Daten{
}
}).dann(Funktion(res){

});

axios({
  Methode: 'Patch',
  URL: '/Benutzer/12345',
 Daten{
}
}).dann(Funktion(res){

});

axios.all(iterierbar)
axios.spread(Rückruf)
Funktion getUserAccount() {
returniere axios.get('/Benutzer/12345');
}

Funktion getUserPermissions() {
  returniere axios.get('/Benutzer/12345/Berechtigungen');
}
//Anforderungsarray axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) { // Antworttext der entsprechenden Anfrage // beide Anfragen sind jetzt abgeschlossen }));

Importieren Sie statische Ressourcen, importieren Sie Axios von „Axios“.
 importiere qs von „qs“;
importiere apiMap aus „./apiMap“;

Setzen Sie den globalen Standardparameter axios.defaults.withCredentials = false;
axios.defaults.headers.post['Inhaltstyp'] = 'application/json; Zeichensatz=UTF-8';

Legen Sie die Standardanforderungsparameter fest const instance = axios.create({
    Basis-URL: process.env.API_ROOT,
    Zeitüberschreitung: 15 * 1000,
    Autorisierung:
    	...
    },
    Überschriften: {
      „Inhaltstyp“: „application/json;charset=utf-8“,
      'X-Angefordert-Mit': 'XMLHttpRequest',
    },
  },
);
Einrichten der Anforderungsabfangfunktion:
Instanz.Interceptors.Request.Use(Funktion (Konfiguration) {
...
})
Entsprechende Interception einrichten:
// Antwort-Interceptor ist Ausnahmebehandlungsinstance.interceptors.response.use(response =>
   Antwort
, (err) => {
  wenn (Fehler && Fehler.Antwort) {
    Schalter (Fehler.Antwort.Status) {
      Fall 400:
        err.message = 'Fehleranforderung';
        brechen;
      Fall 401:
        err.message = „Nicht autorisiert, bitte melden Sie sich erneut an“;
        brechen;
      Fall 403:
        err.message = 'Zugriff verweigert';
        brechen;
      Fall 404:
        err.message = „Anforderungsfehler, die Ressource wurde nicht gefunden“;
        brechen;
      Fall 405:
        err.message = „Anforderungsmethode nicht zulässig“;
        brechen;
      Fall 408:
        err.message = „Zeitüberschreitung der Anforderung“;
        brechen;
       Fall 415:
        err.message = „Der Server kann das an die Anfrage angehängte Medienformat nicht verarbeiten.“;
        brechen;
      Fall 500:
        err.message = 'Serverfehler';
        brechen;
      Fall 501:
        err.message = 'Netzwerk nicht implementiert';
        brechen;
      Fall 502:
        err.message = 'Netzwerkfehler';
        brechen;
      Fall 503:
        err.message = „Dienst nicht verfügbar“;
        brechen;
      Fall 504:
        err.message = „Netzwerk-Timeout“;
        brechen;
      Fall 505:
        err.message = „Die HTTP-Version unterstützt diese Anfrage nicht“;
        brechen;
      Standard:
        err.message = `Verbindungsfehler ${err.response.status}`;
    }
  } anders {
    err.message = „Verbindung zum Server konnte nicht hergestellt werden“;
  }
  gibt Promise.resolve(err.response) zurück;
});
Anforderung der Kapselungsschnittstelle:
lass api={
	/**
	
	* Methodenkapselung erhalten	
	* @param URL
	
	* @param Parameter
	
	* @returns {Versprechen}
	
	*/
	
	erhalte (URL, Parameter = {}) {
	  returniere neues Promise((lösen, ablehnen) => {
		  Instanz.get(apiMap[url],params).then(res => {
	      auflösen(res.data)
	    }).catch(err => {
	      ablehnen (Fehler)
	    })
	  })
	},
	
	/**
	
	* Post
	
	* @param URL
	
	* @param Parameter
	
	* @returns {Versprechen}
	
	*/
	
	posten (URL, Parameter = {}) {
	  returniere neues Promise((lösen, ablehnen) => {
	    Instanz.post(APIMap[URL], Parameter)
	      .then(res => {
	        auflösen(res.data)
	      }, err => {
	        ablehnen (Fehler)
	      })
	  })
	},
	
	/**
	
	* Methodenkapselung löschen	
	* @param URL
	
	* @param Parameter
	
	* @returns {Versprechen}
	
	*/
	
	löschen (URL, Parameter = {}) {
	  returniere neues Promise((lösen, ablehnen) => {
	    Instanz.Löschen(APIMap[URL], Params).dann(Res => {
	      auflösen(res.data)
	    }).catch(err => {
	      ablehnen (Fehler)
	    })
	  })
	},
	
	/**
	
	* Kapselung der Put-Methode	
	* @param URL
	
	* @param Parameter
	
	* @returns {Versprechen}
	
	*/
	
	setze (URL, Parameter = {}) {
	  returniere neues Promise((lösen, ablehnen) => {
	    Instanz.setze(apiMap[url], params).dann(res => {
	      auflösen(res.data)
	    }).catch(err => {
	      ablehnen (Fehler)
	    })
	  })
	},
	
	/**
	
	* Patch-Methodenkapselung	
	* @param URL
	
	* @param Parameter
	
	* @returns {Versprechen}
	
	*/
	
	Patch (URL, Parameter = {}) {
	  returniere neues Promise((lösen, ablehnen) => {
	    Instanz.Patch(APIMap[URL], Parameter).dann(Res => {
	      auflösen(res.data)
	    }).catch(err => {
	      ablehnen (Fehler)
	    })
	  })
	}
}

Standard-API exportieren;

Standard exportieren {
  //Themenlistenschlüssel: ‚Pfad‘
};

Vue-Ressourcen importierenVue ​​aus „vue“ importieren
Importieren Sie das ViewUI-Plug-In „Importieren Sie ViewUI aus ‚View-Design‘“.
Importieren Sie die ViewUICSS-Datei „importieren Sie ‚view-design/dist/styles/iview.css‘“.
Datei importieren|Standardmäßig ist kein Dateisuffix erforderlich. Import-API von ‚/index‘.
Globale Bindung | $ legt den Bereich für Instanzeigenschaften fest Vue.prototype.$api = Api;

Erstellen Sie eine Konfigurationsdatei index.js:
importiere Vue von „vue“;
importiere Vuex von „vuex“;
Importiere Status aus „./state“;
Vue.use(Vuex);
const store = neuer Vuex.Store(Status);
Standardspeicher exportieren;
Erstellen Sie eine detaillierte Datei mit globalen Parametern, state.js
Standard exportieren {
	Status: { //Hier globale Parameter einfügen Test: 0
	},
	Mutationen: { //Wert festlegen test(Zustand, Wert)=>Zustand.test=Wert;
	},
	Getter: {//Rückgabewert Test: Status => Status.test;
	}
};
Aufrufmethode:
var Daten = this.$store.getter.test;
var Daten = this.$store.commit('test', Daten);