Mehrere Möglichkeiten, Axios in Vue zu kapseln

Axios von „Axios“ importieren
importiere { Nachricht, Wird geladen } von 'element-ui'
const ConfigBaseURL = 'https://localhost:3000/' //Standardpfad, Sie können auch env verwenden, um die Umgebung festzulegen let loadingInstance = null //Hier wird geladen
//Verwenden Sie die Methode „create“, um eine Axios-Instanz zu erstellen. export const Service = axios.create({
  Timeout: 7000, // Anforderungstimeout baseURL: ConfigBaseURL,
  Methode: 'post',
  Überschriften: {
    „Inhaltstyp“: „Anwendung/json;Zeichensatz=UTF-8“
  }
})
// Anforderungs-Interceptor hinzufügen Service.interceptors.request.use(config => {
  loadingInstance = Wird geladen.service({
    Sperre: wahr,
    Text: „wird geladen …“
  })
  Konfiguration zurückgeben
})
// Antwort-Interceptor hinzufügen Service.interceptors.response.use(response => {
  wird geladenInstance.schließen()
  // console.log(Antwort)
  Antwortdaten zurückgeben
}, Fehler => {
  console.log('TCL: Fehler', Fehler)
  const msg = Fehler.Nachricht !== undefiniert ? Fehler.Nachricht : ''
  Nachricht({
    Meldung: 'Netzwerkfehler' + msg,
    Typ: "Fehler",
    Dauer: 3 * 1000
  })
  wird geladenInstance.schließen()
  returniere Promise.reject(Fehler)
})

importiere {Service} aus './Service'
Exportfunktion getConfigsByProductId(productId) {
  return Dienst({
    URL: "/manager/getConfigsByProductId",
    Parameter: { Produkt-ID: Produkt-ID }
  })
}
Exportfunktion getAllAndroidPlugins() {
  return Dienst({
    URL: "/manager/getAndroidPlugin",
    Methode: 'get'
  })
}
Exportfunktion addNewAndroidPlugin(Daten) {
  return Service({
    URL: '/manager/addAndroidPlguin',
    Daten: JSON.stringify(Daten)
  })
}

importiere {getAllAndroidPlugins,getConfigsByProductId,addNewAndroidPlugin} aus '@/api/request.js'

getAllAndroidPlugins()
.dann(res=>{

})

importiere {Service} von '@/api/Service.js'
Vue.prototype.$axios=Dienst

//Dienst.js
Axios von „Axios“ importieren
const ConfigBaseURL = 'https://localhost:3000/' //Standardpfad, Sie können auch env verwenden, um die Umgebung zu bestimmen //Verwenden Sie die Methode „create“, um eine Axios-Instanz zu erstellen export const Service = axios.create({
  Timeout: 7000, // Anforderungstimeout baseURL: ConfigBaseURL,
  Methode: 'post',
  Überschriften: {
    „Inhaltstyp“: „Anwendung/json;Zeichensatz=UTF-8“
  }
})
// Anforderungs-Interceptor hinzufügen Service.interceptors.request.use(config => {
  Konfiguration zurückgeben
})
// Antwort-Interceptor hinzufügen Service.interceptors.response.use(response => {
  // console.log(Antwort)
  Antwortdaten zurückgeben
}, Fehler => {
  returniere Promise.reject(Fehler)
})

Importieren von „await-to-js“
Exportfunktion isObj(obj) {
  const typeCheck = Typ von Objekt!=='undefined' und& Typ von Objekt === 'Objekt' und& Objekt !== null 
  Rückgabewert: typeCheck && Object.keys(obj).length > 0
}
asynchrone Exportfunktion _get(url, qs,headers) {
  Konstante Parameter = {
    URL (URL = URL = URL),
    Methode: 'get',
    Parameter: qs? qs: ''
  }
  if (header) { params.headers = headers }
  const [err, res] = warte auf (Dienst (Params))
  wenn (!err && res) {
    Rückgabewert
  } anders {
    returniere console.log(err)
  }
}

asynchrone Exportfunktion _get(url, qs,headers) {
  Konstante Parameter = {
    URL (URL = URL = URL),
    Methode: 'get',
    Parameter: isObj(qs) ? qs : {}
  }
  wenn (isObj(headers)) {params.headers = headers}
  const [err, res] = warte auf (Dienst (Params))
  wenn (!err && res) {
    Rückgabewert
  } anders {
    returniere console.log(err)
  }
}

Exportiere asynchrone Funktion _post(URL, qs, Body) {
  Konstante Parameter = {
    URL (URL = URL = URL),
    Methode: 'post',
    Parameter: isObj(qs) ? qs : {},
    Daten: isObj(body) ? body : {}
  }
  const [err, res] = warte auf (Dienst (Params))
  wenn (!err && res) {
    Rückgabewert
  } anders {
    returniere console.log(err)
  }
}

//ein.vue
<Skript>
importiere{_get}von './Service'
Standard exportieren{
	Methoden:{
    	asynchroner Test () {
        const res = warte auf _get('http://baidu.com')
       }
    }
}
</Skript>