vue jsonp跨域请求资源

最近开发项目中爬了一个坑，关于vue-jsonp跨域请求资源的小问题，网上一搜一大堆，但是试了都不是很理想，简单点贴一下我的代码吧。

首先我们要先  npm install jsonp，然后封装一步jsonp.js

下面的是jsonp.js

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&')+ param(data)
  console.log(url)
  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    if (typeof value == 'object') {
      value = JSON.stringify(value)
    }
    url += '&' + k + '=' + encodeURIComponent(value)
  }

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

接下来就是接口封装，其实封装到外部js的。里面的params就是接口请求的参数，在vue相应页面去调用这个接口

// 跨域请求淘宝图文详情
export const GetTbShopImgs =(params) => {
    const url = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'//跨域请求url
    const commonParams = {
        // type:'0'
    }
    let data = Object.assign({}, commonParams, params)
    const options = {
        prefix:'mtopjsonp1',//回调函数名，可选
        param: 'callback'
    }
    
    // 这里返回一个promise对象
    return jsonp(url, data, options)
}

这段就是我在vue methods对象里面的跨域请求代码，这里先说下，query是发送到上面的接口封装的params ，因为我传的id是int型，所以要转换成string，尽管下面已经把params转换成了jsonz字符串，但是经过我的检测，那一串id依然是int，导致请求状态码是204，虽然请求成功但是数据时没有返回的，所以提醒一下，还是多一遍操作吧！我这里使用jsonp是请求一个数据资源的，所以传过去的是一个key为data的json对象，这里一定要注意，如果请求失败，可能是你没有把参数转换成json导致的

 getTbShopImgs(){
            var params={
                id: this.$route.query.id.toString(),
                type: "0"
            };
            let query={
                data:JSON.stringify(params)
            }
            GetTbShopImgs(query).then (res => {
                console.log(res,125)
                
            }).catch(err=>{
                console.log(err)
                
            });
        },