How to use jsonp in vue

1. Introduction

Recently, I encountered a cross-domain problem when working on a handwriting input method. I used the interface of the QQ input method, and the proxy could not achieve the effect. Here I used jsonp to implement it. You can search Baidu for the principle of jsonp yourself. Here I will record the use of vue-jsonp and some small pitfalls. For the official documentation, please go to the npm address.

2. Installation

npm install vue-jsonp -S

or

yarn add vue-jsonp

3. Use

mian.js reference

// main.js
import Vue from 'vue'
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp) // $jsonp is mounted on the vue prototype and can be used directly with vm.$jsonp()

Note: The package version here is 2.0.0. When importing, pay attention to using { } deconstruction assignment. Some tutorials on the Internet are old versions. If necessary, you can go to the official npm address in the preface for specific usage tutorials.

4. Use of vue files

this.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
}).then(res => {
  // The code here is not executed // because the returned callback function will be called directly})

Assuming the name of the returned function is callbackFun, you need to bind the callbackFun function to the window object.

mounted() {
  // Bind the callbackFun method to the window object window['callbackFun'] = (data) => {
    cosole.log('defined callback function')
  }
  // Assume that callbackFun.ajax_callback() is returned
  window['callbackFun'] = {
    ajax_callback: function (res) {
      cosole.log('defined callback function')
    }
  }
}

Note: jsonp request method is only get

This is the end of this article about how to use jsonp in vue. For more information about the use of jsonp in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!