Fetch 提供了对
Request和Response（以及其他与网络请求有关的）对象通用的定义。它之后能够被使用到很多场景中：service workers、Cache API、其他处理请求和响应的方式，甚至任何需要生成自己的响应的方式。
众所周知，fetch提供的请求资源的方法并不包括jsonp，但是我们又想像使用fetch那样使用jsonp方法该怎么办呢，本文就手把手教你实现一个自己的fetch jsonp方法。源码在这里.
这里就不再累述jsonp的原理了，不懂得自行百度或者google吧。
要自己书写一个jsonp的方法，是要实现以下几个模块：
1、生成script标签
这一部分就直接生成手动操作dom实现就可以，需要注意的是，为了方便之后删除这个script标签，需要在创建的时候给这个标签增加一个id属性。具体代码如下：
function createScript(_url,_id) {
const script = document.createElement('script');
script.setAttribute('src',_url);
script.id = _id;
document.getElementsByTagName('head')[0].appendChild(script);
}
2、注册callback函数
注册callback函数主要是给window添加一个属性，这个属性可以什么都不用干，因为毕竟你只需要拿到他的参数，也就是请求的资源就可以。这里有一点需要注意就是为了防止和window本来的属性冲突，最好取个奇奇怪怪，随机最好的名字。我取得名字就是jsonp123212这种。代码如下：
function generateCB() {
return `jsonp${Math.ceil(Math.random() * 1000000)}`;
}
window[cb] = (res) => {
alert(res) //这里的res就是你想请求的资源
}
3、返回一个promise
这一部分是核心，只有成功的返回了一个promise才能有机会像fetch那样的形式去使用。实现的方法就是在callback函数中把返回的结果resolve出去。怎么resolve出去？callback是全局的函数啊？这个时候就得想想闭包了，它的存在就是结束这种坑爹的事情的，我们只要在定时callback的时候让他能访问到resolve是不是就解决了呢？是的，具体做法，你看看：
function fetchJsonp(url) {
return new Promise((resolve,reject)=>{
window[cb] = (res) => {
resolve(res)
}
createScript() // 这里就是生成script的函数
})
}
4、移除script标签
script标签用过就不要再留着了，坏处一大堆，为了优雅我们就删了他
function removeScipt(_id) {
const script = document.getElementById(_id);
document.getElementsByTagName('head')[0].removeChild(script);
}
5、移除cb函数
script你都移除了，cb更不能留着了啊，这个还是个全局变量呢，所以删。
function removeCB(_name) {
delete window[_name];
}
总结
到这里都讲完了，其实没什么难度，主要是自己项目中遇到了jsonp，但是fetch中没有这个方法啊。所以就想着实现了一个，因为其他的方法也都封装，不差这一个了。完整的项目代码在这里。