How to use jsonp in vue

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!

You may also be interested in:
  • How to display Json format data in Vue
  • How to load local json data in vue
  • How to send Json format data in post request in Vue-cli
  • How to use simulated JSON data to view the effect in Vue
  • The two simplest ways to share Vue using JSON
  • How to get background json string in vue

<<:  Analyze the compilation and burning of Linux kernel and device tree

>>:  Example code for implementing transparent gradient effects with CSS

Recommend

mysql batch delete large amounts of data

mysql batch delete large amounts of data Assume t...

Vue+js realizes video fade-in and fade-out effect

Vue+js realizes the fade in and fade out of the v...

Detailed explanation of several methods of deduplication in Javascript array

Table of contents Array deduplication 1 Double-la...

A brief discussion on whether too many MySQL data queries will cause OOM

Table of contents Impact of full table scan on th...

Detailed explanation of how to pass password to ssh/scp command in bash script

Install SSHPASS For most recent operating systems...

Mysql get table comment field operation

I won't say much nonsense, let's just loo...

MySql 5.6.35 winx64 installation detailed tutorial

Note: There was no error in the project startup d...

A brief discussion on the problem of forgotten mysql password and login error

If you forget your MySQL login password, the solu...

Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin

nginx version 1.11.3 Using the following configur...

Introduction to network drivers for Linux devices

Wired network: Ethernet Wireless network: 4G, wif...

What hidden attributes in the form can be submitted with the form

The form elements with visibility=hidden and displ...

How to install Oracle on Windows Server 2016

1. Install Oracle There are too many Oracle insta...

Implementation of CSS dynamic height transition animation effect

This question originated from a message on Nugget...