什么叫jsonp?
jsonp是json with padding（填充式json或参数式json）的简写，是通过ajax请求跨域接口，获取数据的新实现方式
jsonp的实现原理：
动态创建script标签，因为script标签是没有同源策略限制，可以跨域的。 把script标签的src指向正式服务端地址，这个地址跟个参数callback=xxx, 服务端在返回数据时，在xxx里包裹一个方法（里面是返回的数据），相当于在前端执行xxx这个方法，但是浏览器并没有这个方法，所以在发送请求之前在window注册这个方法，这样的话相当于在前端执行window.xxx()这个方法去获取数据。 具体看接下来的实现！
https://github.com/webmodules...
这个是jsonp库的具体实现，建议下载来研究一下，最好自己动手写一遍。本文主要是Promise封装，所以就不具体介绍jsonp的具体实现
步骤一：
首先安装这个库，因为我是在node npm环境下开发，所以
1 $ npm install jsonp
参数介绍
jsonp(url, opts, fn)
url (String) 服务器端数据接口地址
opts (Object) 一般只需关注param即可
-
param (String) 默认是callback,这是与后端约定的参数名称，也可以随便定义，只要前后端统一
-
timeout (Number) 请求超时时间，默认是6000ms
-
prefix (String) callback值的前缀，默认是__jp
-
name (String) 指定全局注册的回调方法名，一般不会用到，因为默认是prefix+自增数字
fn 回调方法，用es6 Promise
步骤二：
下面是具体用法：
建一个名叫jsonp.js的文件
先引入jsonp库文件
1 import originJSONP from 'jsonp'
对外暴露方法 url:请求服务器地址，data:参数
1 export default function jsonp(url,data,option) {
2 url += (url.indexOf('?')<0?'?':'&')+param(data)
3 return new Promise(function(resolve,reject) {
4 originJSONP(url,option, function(err,data) {
5 if(!err){
6 resolve(data)
7 }else{
8 reject(err)
9 }
10 })
11 })
12 }
定义一个将Object的参数处理成为 url挂载参数的形式 的函数
1 export function param(data) {
2 let url = ''
3 for (var k in data) {
4 let value = data[k] !== undefined ? data[k] : ''
5 url += '&' + k + '=' + encodeURIComponent(value)
6 }
7 return url ? url.substring(1) : ''
8 }
到这里 这个Promise 就封装好了，接下来就具体调用来获取数据
步骤三：
建一个js文件，名字自己定义
引入前面封装的jsonp.js
1 import jsonp from '../common/js/jsonp.js'
定义参数
1 const commonParams = {
2 g_tk:1319877694,
3 inCharset:'utf-8',
4 outCharset:'utf-8',
5 notice:0,
6 format:'jsonp'
7 };
定义前后端统一参数
1 const options = {
2 param:'callback'
3 };
获取referer
1 export function getReferer() {
2 let refer = document.referrer,
3 reg = /(\w+):(\/\/[^/:]+)([^# ]*)/;
4 if (!!refer && !refer.match(reg)[2].match(/(www|m).joyme.com/g)) {
5 return refer;
6 } else {
7 return "";
8 }
9 }
完整封装jsonp
1 import originJSONP from "jsonp";
2 import { getReferer } from "js/utils";
3 export default function jsonp(url, data, option) {
4 const refer = getReferer();
5 if(!url.includes("show.g.mediav.com")){
6 url += `?platform=0&referer=${refer}`;
7 }
8 // console.log('url:::', url);
9 url += (url.indexOf("?") < 0 ? "?" : "&") + param(data);
10 return new Promise((resolve, reject) => {
11 originJSONP(url, option, (err, data) => {
12 if (!err) {
13 resolve(data);
14 } else {
15 reject(err);
16 }
17 });
18 });
19 }
20
21 function param(data) {
22 let url = "";
23 for (var k in data) {
24 let value = data[k] !== undefined ? data[k] : "";
25 url += `&${k}=${encodeURIComponent(value)}`;
26 }
27 return url ? url.substring(1) : "";
28 }
api调用
1 const decode = val => decodeURIComponent(val);
2 let BASEURL = "";
3 const env = process.env.NODE_ENV;
4 // console.log('env===', env)
5 if (env === "development") {
6 BASEURL = `//test.appapi.joyme.com/web/`;
7 } else if (env === "test") {
8 BASEURL = `//test.appapi.joyme.com/web/`;
9 } else if (env === "gray") {
10 BASEURL = `//apptest.joyme.com/web/`;
11 } else {
12 BASEURL = `//appapi.joyme.com/web/`;
13 }
14 const APPOINTURL = `${BASEURL}appoint`;
15 /**
16 * 根据tag（版区名称）获取瀑布流数据
17 * @param {版区名称(标签)} tag
18 * @param {当前页数} page
19 * @param {第二页时需要传入上一页最后一条数据的mtime} lastDataMTime
20 */
21 export const getDataByTag = (tag, page, lastDataMTime) =>
22 jsonp(
23 APPOINTURL,
24 {
25 uri: decode("block/detail"),
26 tag: decode(tag),
27 page: page,
28 order_val: lastDataMTime
29 },
30 options
31 );