目录

 

基本概念

代码与实例

---

 

基本概念

这里关于jsonp请看这篇博文：https://blog.csdn.net/qq78442761/article/details/102067313

 

代码与实例

这里把数据打印到控制台：

程序结构如下：

源码如下：

config.js

export const commonParams = {

  pre: 1,
  p: 3,
  ie: 'utf-8',
  json: 1,
  prod: 'pc',
  from: 'pc_web'
}

export const options = {

    // cb: 'jQuery110206443125406022925_1570194853214',
    // wd: '12'
}

json.js

import originJsonp from 'jsonp'

export default function jsonp(url, data) {

    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);

    return new Promise((resolve, reject) =>{

        originJsonp(url, (err, data) => {

            if(!err){

                resolve(data);
            }
            else{

                reject(err);
            }
        })
    })
}

export function param(data) {

    let url = '';
    for(let k in data){

        let value = data[k] !== undefined ? data[k] : '';
        url += '&' + k + '=' + encodeURIComponent(value);
    }

    return url ? url.substring(1) : '';
}

test.js

import  jsonp from '../common/jsonp'
import {commonParams} from "./config"

export function testRe() {

    const url = "https://www.baidu.com/sugrec";
    const data = Object.assign({}, commonParams, {

        //可以添加变动的get数据
        wd: '123'
    })


    return jsonp(url, data)
}

Test.vue

<template>
    <div>
      <h1>Hello world</h1>
    </div>
</template>

<script>

    import {testRe} from '../common/test'

    export default {

        created() {

          this._getRecommend();
        },
        methods: {

          _getRecommend(){

            testRe().then((res) => {

                console.log(res);
            })
          }
        }
    }
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Test',
      component: Test
      // name: 'HelloWorld',
      // component: HelloWorld
    }
  ]
})