Konfigurationsschritte für Axios (ausführliches Tutorial)

Dieser Artikel teilt Ihnen hauptsächlich die Konfigurationsschritte von dynamischen Axios mit. Durch dieses Tutorial können Sie die Konfiguration von dynamischen Axios leicht erkennen >

Vorwort

Als ich Vue-Projekte schrieb, verwendete ich vue-resource als Projekt-Ajax-Bibliothek, insbesondere an einem bestimmten Tag im November. Ein Update auf Weibo weist darauf hin, dass die Ajax-Bibliothek universell sein sollte und der technische Support für vue-resource eingestellt wurde und axios empfohlen wird.

Es wird empfohlen, das Vue-cli-Tool zum Erstellen und Verwalten von Projekten zu verwenden. Auch wenn Sie am Anfang nicht damit vertraut sind, werden Sie die Geheimnisse nach der Verwendung kennen. Vor einiger Zeit war das offiziell empfohlene Datenanforderungs-Plugin Vue-Ressource, aber jetzt hat es sich in Axios geändert. Sie müssen nicht wissen, warum es sich geändert hat. Wie auch immer, dieses ist besser zu verwenden als dieses. Verwenden Sie es also einfach. Hier sind einige Kapselungsaxios. Ich bitte um etwas Erfahrung und hoffe, Sie können mir sagen, ob ich falsch liege!

Die Methode ist wie folgt

Erstellen Sie die Datei, nachdem das Vue-Projekt initialisiert wurde Verzeichnis, das normalerweise zum Speichern einiger gekapselter Funktionsmethoden verwendet wird. Erstellen wir nun eine http.js-Datei im Util-Dateiverzeichnis, um die Axios-Methode zu kapseln.

2. Laden Sie den Code direkt hoch (reguläre Version), es gibt detaillierte Kommentare im Code

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口
// http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
 config => {
  const token = sessionStorage.getItem("token"); //获取存储在本地的token
  config.data = JSON.stringify(config.data);
  config.headers = {
   'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
  };
  if (token) {
   config.headers.Authorization = "Token " + token; //携带权限参数
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);


// http response 拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
 response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的
  if(response.status == 401) {
   router.push({ //push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数
    path: '/login' 
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error.response.data)
 });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

3. (dynamische Version), Axios Interceptor ist nicht erforderlich, nicht jedes Projekt erfordert es. und es gibt mehr als einen Inhaltstyp und eine Autorisierung in den Headern, sodass eine andere Methode verwendet werden muss.

util/http.js

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。
//^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
 'Content-Type': 'application/json', //设置跨域头部
 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params,
   headers: headers
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err.response)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

App.vue (dies ist die Programmeintragsdatei im src-Verzeichnis)

<template>
 <p id="app">
 <router-view/>
 </p>
</template>

<script>
import axios from &#39;axios&#39;;
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
 //若本地项目调试使用
 axios.defaults.baseURL = &#39;http://10.0.xx.xxx:xxxx/api/&#39;;
} else {
 //动态请求地址
 axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
 name: &#39;app&#39;,
 axios //这里记得导出，若请求地址永久固定一个，则就按照`普通版`配置一个baserURL就可以了
}
</script>

<style lang="scss"> //这里我使用的是scss
@import &#39;~@/style/style&#39;
</style>

Zusammenfassung

FAQ

Warum wird die dynamische Version als dynamisch bezeichnet, weil die Zugriffsadresse und die Anforderungsadresse dieselbe Adresse und Portnummer sind? Wenn ich beispielsweise über http://www.cmgos.com (Standardport 80) auf das Projekt zugreife, ändert sich meine Basis-URL automatisch in http:www.cmgos.com:80/api/. Der Grund dafür ist folgender Eines Tages, wenn das Projekt migriert oder http in https geändert wird, müssen Sie die Anforderungsadresse nicht ändern, das Programm wird automatisch abgeschlossen.

Ist die Datenanforderungsadresse korrekt konfiguriert? Wenn Sie baseURL konfigurieren, müssen Sie bei Verwendung Ihrer gekapselten Funktion nur die Anforderungsadresse basierend auf baseURL übergeben. Wenn Sie beispielsweise login/ übergeben, wird die Anforderungsadresse automatisch zu http:www.cmgos.com:80 /api/login/ , wenn nicht konfiguriert, können Sie die gesamte Anfrageadresse direkt übergeben

Hinweise

Bei Verwendung der dynamischen Version, Da kein Interceptor verwendet wird, muss die unten gekapselte Funktion bei der Rückgabe eines Fehlers als

geschrieben werden, um die zurückgegebenen Daten zu erhalten. Ich habe jedoch err.response.data geschrieben, weil Sie auf diese Weise den (Status-)Statuscode und andere Informationen erhalten können . Wenn Sie den zurückgegebenen Statuscode nicht beurteilen müssen, ändern Sie ihn in err.responseerr.response.data. Ich hoffe, dass er in Zukunft für alle hilfreich ist.

Verwandte Artikel:

So verwenden Sie das Ladefortschritts-Plug-in mit Pace.js und NProgress.js (ausführliches Tutorial)

Im WeChat-Applet Über den App-Lebenszyklus (ausführliches Tutorial)

In jQuery über die Verwendung des Ladefortschritts-Plug-ins NProgress.js

Im WeChat-Applet So verwenden Sie die Switch-Komponente

Das obige ist der detaillierte Inhalt vonKonfigurationsschritte für Axios (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!