关于前端:jsliang-求职系列-13-JSONP

一目录

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三根本实现
3.1 步骤一：前端局部
3.2 步骤二：后端局部
3.3 步骤三：前端局部
四手写 JSONP
4.1 封装 JSONP
4.2 简略实现
4.3 欠缺版本
五参考文献

二前言

基本原理：利用 script 标签的 src 没有跨域限度来实现跨域目标。

执行过程：

前端定义一个解析函数：jsonpCallBack = function (res) {}
通过 params 的模式包装 script 标签的申请参数，并且申明执行函数，如：cb = jsonpCallBack
后端获取前端申明的执行函数（jsonpCallBack），并且带上参数且调用函数的形式传递给前端
前端再 script 标签返回资源的时候就会执行 jsonpCallBack 并通过回调函数的形式拿到数据。

优缺点：

【毛病】只能进行 GET 申请
【长处】兼容性好，在一些古老的浏览器中都能够运行。

三根本实现

上面咱们通过 3 步骤来理解如何应用 JSONP。

3.1 步骤一：前端局部

前端代码：

<script type='text/javascript'>  window.jsonpCallBack = function(res) {    console.log(res);  }</script><script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallBack' type='text/javascript'></script>

创立一个 jsonpCallBack 函数，然而还没有被调用。
加载 src 中的资源，调用 localhost:8080 端口的 API：api/jsonp，传递的参数是 id = 1 以及 cb = jsonpCallBack

3.2 步骤二：后端局部

后端代码：

const Koa = require('koa');const app = new Koa();const items = [{ id: 1, title: 'title1' }, { id: 2, title: 'title2' }]app.use(async (ctx, next) => {  if (ctx.path === '/api/jsonp') {    const { cb, id } = ctx.query;    const title = items.find(item => item.id == id)['title']    ctx.body = `${cb}(${JSON.stringify({title})})`;    return;  }})console.log('listen 8080...')app.listen(8080);

解析 ctx.query，将 id 和 cb 获取到。
查找 title
返回一个字符串，该字符串调用 cb 办法，并将 title 转成字符串，返回到内容 ctx.body 中。

3.3 步骤三：前端局部

这时候前端接管到 Node.js 的返回，间接调用了 cb(title)，办法，最终执行了它的回调，从而执行：

window.jsonpCallBack = function(res) {  console.log(res);}

输入：{ title: 'title1' }

四手写 JSONP

4.1 封装 JSONP

定义一个 JSONP 办法，接管 4 个参数：

url：api 接口
params：api 接口参数
callbackKey：与后端约定回调函数用哪个字段
callback：拿到数据之后前端执行的回调函数

JSONP({  url: 'https://www.baidu.com/s',  params: { wd: 'jsliang' },  callBackkey: 'cb',  callback(res) {    console.log(res);  }})

4.2 简略实现

咱们看看简略实现：

const JSONP = ({  url,  params = {},  callBackkey = 'cb',  callback,}) => {  params[callBackkey] = callBackkey;  window[callBackkey] = callback;  const newParam = Object.keys(params).map((key) => `${key}=${params[key]}`).join('&');  const script = document.createElement('script');  script.setAttribute('src', `${url}?${newParam}`);  document.body.appendChild(script);}JSONP({  url: 'https://www.baidu.com/s',  params: { wd: 'jsliang' },  callBackkey: 'cb',  callback(res) {    console.log(res);  }})

4.3 欠缺版本

优化屡次调用时候的一个问题：

function JSONP({  url,  params = {},  callbackKey = "cb",  callback,}) {  // 定义本地的惟一 callBackId，避免屡次调用的时候出问题  JSONP.callBackId = JSONP.callBackId || 1; // 默认为 1  // 拿到这个 id  const callBackId = JSONP.callBackId;  // 将要执行的回调如果到 JSONP 对象中，防止净化 window  JSONP.callbacks = JSONP.callbacks || [];  JSONP.callbacks[callBackId] = callback;  // 把这个名称退出到参数中：`cb = JSONP.callbacks[1]`  params[callbackKey] = `JSONP.callbacks[${callBackId}]`;  // 组合 params：'id=1&cb=JSONP.callbacks[1]'  const paramString = Object.keys(params).map((key) => `${key}=${params[key]}`);  // 动态创建 script 标签  const script = document.createElement("script");  script.setAttribute("src", `${url}?${paramString}`);  document.body.appendChild(script);  // id 自增，保障惟一  JSONP.callBackId++;}JSONP({  url: "http://localhost:8080/api/jsonp",  params: { id: 1 },  callbackKey: "cb",  callback(res) {    console.log(res);  },});JSONP({  url: "http://localhost:8080/api/jsonp",  params: { id: 2 },  callbackKey: "cb",  callback(res) {    console.log(res);  },});

以上，就是手写局部的内容。

五参考文献

对于本文影响较大的是呆呆大佬的文章：

[x] JSONP 原理及实现【浏览倡议：30min】

外面还有最终降级加强版，jsliang 就不颤抖了，面试问手写 JSONP 还没有碰到。

一 目录

二 前言

三 根本实现