So verwenden Sie JSONP in Vue

1. Einleitung

Kürzlich stieß ich bei der Arbeit an einer Methode zur Handschrifteingabe auf ein domänenübergreifendes Problem. Ich verwendete die Schnittstelle der QQ-Eingabemethode, und der Proxy konnte den Effekt nicht erzielen. Hier verwendete ich jsonp, um es zu implementieren. Sie können Baidu selbst nach dem Prinzip von jsonp durchsuchen. Hier werde ich die Verwendung von vue-jsonp und einige kleine Fallstricke aufzeichnen. Die offizielle Dokumentation finden Sie unter der npm-Adresse.

2. Installation

npm installiere vue-jsonp -S

oder

Garn hinzufügen vue-jsonp

3. Nutzung

mian.js-Referenz

// Haupt.js
Vue von „vue“ importieren
importiere { VueJsonp } von 'vue-jsonp'
Vue.use(VueJsonp) // $jsonp wird auf dem Vue-Prototyp gemountet und kann direkt mit vm.$jsonp() verwendet werden

Hinweis: Die Paketversion hier ist 2.0.0. Achten Sie beim Importieren auf die Verwendung der Dekonstruktionszuweisung { }. Einige Tutorials im Internet sind alte Versionen. Bei Bedarf können Sie für spezifische Verwendungstutorials zur offiziellen npm-Adresse im Vorwort gehen.

4. Verwendung von Vue-Dateien

dies.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: "sehr schön"
}).dann(res => {
  // Der Code hier wird nicht ausgeführt, // da die zurückgegebene Callback-Funktion direkt aufgerufen wird})

Angenommen, der Name der zurückgegebenen Funktion ist „callbackFun“, müssen Sie die Funktion „callbackFun“ an das Fensterobjekt binden.

montiert() {
  // Binden Sie die Methode callbackFun an das Fensterobjekt window['callbackFun'] = (data) => {
    cosole.log('definierte Rückruffunktion')
  }
  // Angenommen, callbackFun.ajax_callback() wird zurückgegeben
  Fenster['callbackFun'] = {
    ajax_callback: Funktion (res) {
      cosole.log('definierte Rückruffunktion')
    }
  }
}

Hinweis: Die JSONP-Anforderungsmethode ist nur „get“

Dies ist das Ende dieses Artikels zur Verwendung von JSONP in Vue. Weitere Informationen zur Verwendung von JSONP in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!