Detailed explanation of the steps for using Jsonp in VUE2.0

This time I will bring you a detailed explanation of the steps for using Jsonp in VUE2.0. What are the precautions for using Jsonp in VUE2.0. The following is a practical case, let's take a look.

1. The purpose and principle of JSONP

The main purpose of using JSONP is to dynamically create Scripts, dynamically splice URLs, and then capture data. Achieve cross-domain. To be precise, AJAX requests are not allowed to make cross-domain requests due to the same origin. However, the link in the src attribute of the Script tag can access cross-domain js scripts. Using this feature, the server no longer returns JSON format. Data, but returns a piece of JS code that calls a certain function, and calls it in the src attribute to achieve cross-domain.

2. How to use JSONP

2.1 Introduce jsonp from github

Open the project> ;package.json>Add code under "dependencies"

"jsonp": "^0.2.1"

such as As shown in the figure, then execute the installationcmd command and re-run the project

npm install 
 npm run dev

2.2 Encapsulate jsonp.js

import originJSONP from 'jsonp'
export default function jsonp(url, data, option) {
 url += (url.indexOf('?') < 0 ? &#39;?&#39; : &#39;&&#39;) + param(data)
 return new Promise((resolve, reject) => {
 originJSONP(url, option, (err, data) => {
  if (!err) {
  resolve(data)
  } else {
  reject(err)
  }
 })
 })
}
function param(data) {
 let url = ''
 for (var k in data) {
 let value = data[k] !== undefined ? data[k] : ''
 url += `&${k}=${encodeURIComponent(value)}`
 }
 // 删除第一个&
 return url ? url.substring(1) : ''
}

Directory structure is as follows:

2.3 API call of jsonp.js

Create an api folder under the src folder, For storing js for api calls, create two new files, config.js and recommendation.js.

config.js
export const commonParams = {
 g_tK: 5381,
 inCharset: 'utf-8',
 outCharset: 'utf-8',
 notice: 0,
 format: 'jsonp'
}
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0
recommend.js
import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'
export function getRecommend() {
 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //此处的url可以自行修改，本文是qq音乐链接
 const data = Object.assign({}, commonParams, {
 platform: 'h5',
 uin: 0,
 needNewCode: 1
 })
 return jsonp(url, data, options)
}

The directory structure is as follows:

2.4 recommend.vue file calls

# in the project directory ##src>components>recommend>Corresponding file.vue

recommend.vue

<template>
 <p class="recommend">
  recommend
 </p>
</template>
<script type="text/ecmascript-6">
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default {
 name: 'recommend',
 created() {
 this._getRecommend()
 },
 methods: {
 _getRecommend() {
  getRecommend().then((res) => {
  if (res.code === ERR_OK) {
   console.log(res.data.slider)
  }
  })
 }
 }
}
</script>

2.5 Page jsonp request success result

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to add and delete tables using Vue.js

How to use vue to participate in the router

The above is the detailed content of Detailed explanation of the steps for using Jsonp in VUE2.0. For more information, please follow other related articles on the PHP Chinese website!