jsonp应用，如何利用jsonp从别的应用抓数据

比如说你想抓取一些数据的话该如何抓取呢？
比如你想使用QQ音乐，网易云音乐，或者饿了吗的这些已经成熟的体系的直接应用来使用的话
1.首先你当然是要写一个jsonp.js文档，这是当然的了😄
在这个jsonp文档当中你要首先import (你自己起的名字） from ‘jsonp’
这个jsonp就是我们最最最基础的如何抓取数据的jsonp了
后续每一个component如何单独的抓取的话需要在api或者你自己换一个名字也行，单独每一个页面抓取的数据后续都要单独进行一个js文档的编辑，全部都基于这个最基础的jsonp的文档，所以其他每个单独的js文档都要import这个最基础的jsonp doc
这里我写一个简单的最基础的jsonp的文档import originJsonp

from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  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] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

2.每一个不同的组件有时候需要不同的功能，所以这个时候你每一个不同的要抓取数据的功能你都要封装一个js来专门抓取你要的数据，当然前提是基于jsonp文档的所以首先要import它
a.
写一个export function，里面第一步写上url，const url绑定的是你要抓取的数据的链接
b.寻找拼接数据之把重复数据封装在一个js当中

有的时候当你要从一个来源获取多个数据的时候，你会发现你要获取的数据肯定是有相对重复的数据，所以你可以写一个公共的js封装，使得更有效率

e.g.
export const Common = {
…相同的数据
}

如果你使用了这个公共配置来提高效率的话，你就可以直接把比如说哪个状态代表no－error也写在这个公共配置里面了
比如export const ERROR_NO = 0这种，名字随便起，一般都会把正确的代码配置为0，当然如果你不是很在乎语义化的话其实写不写这个也无所谓。。。

记住还有一个公共配置就是callback，param要和你的接口保持一致

c.封装单独的不同功能的js

当你把重复的数据封装完了后
你的单独的component要import它，⚠import时候要使用这个｛｝形式

因为是公共数据，所以在你这个组建的接口数据中，你接手的数据肯定是不只这些公共数据的，但是它们都是属于这个接口数据要接受的data，所以你要把它们放在一起，

使用Object.assign({},common(相同的数据，来自你的公共配置),{
单独的要接受的数据
｝

最后记住要return一个jsonp，jsonp是返回一个promise

3.一个简单的组件的数据抓取js就写完了
但是我们要在组件中真的使用这个的话除了要在组件中import它，还需要在created中书写它
在

e.g.
created(){
    this.调用数据的方法（）
｝
methods：｛
    调用数据的方法名，和组件接口调用方法js中的名字相同(){
        方法名().then(res)=>{
            if(res.code===0,如果这里你想更有语义话你可以使用你注册的语义话的名字，比如res.code==ERROR_NO这种）｛
            
        }
    })
    }
}