自己动手，为vue写一个jsonp的方法

dongxiawu 发布于2019-08-21 15:02 / 738人阅读

摘要：它之后能够被使用到很多场景中其他处理请求和响应的方式，甚至任何需要生成自己的响应的方式。总结到这里都讲完了，其实没什么难度，主要是自己项目中遇到了，但是中没有这个方法啊。所以就想着实现了一个，因为其他的方法也都封装，不差这一个了。

Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象通用的定义。它之后能够被使用到很多场景中：service workers、Cache API、其他处理请求和响应的方式，甚至任何需要生成自己的响应的方式。

众所周知，fetch提供的请求资源的方法并不包括jsonp，但是我们又想像使用fetch那样使用jsonp方法该怎么办呢，本文就手把手教你实现一个自己的fetch jsonp方法。源码在这里.

这里就不再累述jsonp的原理了，不懂得自行百度或者google吧。

要自己书写一个jsonp的方法，是要实现以下几个模块：

生成script标签

注册callback函数

返回一个Promise

移除script标签

移除callback函数

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中没有这个方法啊。所以就想着实现了一个，因为其他的方法也都封装，不差这一个了。完整的项目代码在这里。

还有需要补充的是我直接resolve了，没有做错误处理，也一时想不到什么错误处理，有人想到了可以告诉我一下。

专线服务混合云自己动手写爬虫自己动手写网路爬虫自己动手写网络爬虫自己动手写开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88078.html

基于Vue.js的音乐播放器（Webapp）

摘要：概述项目是基于，成品是一个移动端的音乐播放器，来源于的实战课程。播放器是全局组件，放在下面，通过传递数据，触发提交，从而使播放器开始工作。将请求的数据格式化后再通过传递，组件间共享，实现歌曲的播放切换等。概述项目是基于Vue.js，成品是一个移动端的音乐播放器，来源于imooc的实战课程。自己动手实践并加以修改拓展。项目的大致流程是Vue-cli构建开发环境，分析需求，设计构思，规...

widuu 2019-08-20 18:23 评论0 收藏0
基于Vue.js的音乐播放器（Webapp）

摘要：概述项目是基于，成品是一个移动端的音乐播放器，来源于的实战课程。播放器是全局组件，放在下面，通过传递数据，触发提交，从而使播放器开始工作。将请求的数据格式化后再通过传递，组件间共享，实现歌曲的播放切换等。概述项目是基于Vue.js，成品是一个移动端的音乐播放器，来源于imooc的实战课程。自己动手实践并加以修改拓展。项目的大致流程是Vue-cli构建开发环境，分析需求，设计构思，规...

senntyou 2019-08-05 11:44 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

lwx12525 2019-08-20 16:35 评论0 收藏0
动手实现一个JSONP

摘要：但是当我们有多个请求，并且每个请求的处理都是不一样的时候，这个变量将会被覆盖。这是不行的，因此我们应该为每一次请求设置一个唯一且不会冲突的变量，因此增加一个生成名字的方法如下这时候我们会发现我们已经利用了一个类似于随机的形式完成了多次请求。文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。 show...

Julylovin 2019-08-21 16:49 评论0 收藏0