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

How to build php+nginx+swoole+mysql+redis environment with docker

Operating system: Alibaba Cloud ESC instance cent...

Detailed explanation of Docker Volume permission management

Volume data volume is an important concept of Doc...

border-radius is a method for adding rounded borders to elements

border-radius:10px; /* All corners are rounded wi...

Summary of the use of Datetime and Timestamp in MySQL

Table of contents 1. How to represent the current...

Distinguishing between Linux hard links and soft links

In Linux, there are two types of file connections...

React+ts realizes secondary linkage effect

This article shares the specific code of React+ts...

In-depth study of JavaScript array deduplication problem

Table of contents Preface 👀 Start researching 🐱‍🏍...

WeChat applet implementation anchor positioning function example

Preface In the development of small programs, we ...

Summary of Several Methods for Implementing Vertical Centering with CSS

In the front-end layout process, it is relatively...

Example code for implementing verification code login in SMS API in Node

1. Node server setup + database connection The op...

IE6 web page creation reference IE6 default style

This is not actually an official document of IE. I...

Detailed explanation of CSS3 to achieve responsive accordion effect

I recently watched a video of a foreign guy using...

How to configure MGR single master and multiple slaves in MySQL 8.0.15

1. Introduction MySQL Group Replication (MGR for ...

The difference between animation and transition

The difference between CSS3 animation and JS anim...