vue,jsonp的方法
来源:互联网 发布:数控软件手机版 编辑:程序博客网 时间:2024/06/16 06:03
Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象通用的定义。它之后能够被使用到很多场景中:service workers、Cache API、其他处理请求和响应的方式,甚至任何需要生成自己的响应的方式。
众所周知,fetch提供的请求资源的方法并不包括jsonp,但是我们又想像使用fetch那样使用jsonp方法该怎么办呢,本文就手把手教你实现一个自己的fetch jsonp方法。源码在这里.
这里就不再累述jsonp的原理了,不懂得自行百度或者google吧。
要自己书写一个jsonp的方法,是要实现以下几个模块:
- 生成script标签
- 注册callback函数
- 返回一个Promise
- 移除script标签
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中没有这个方法啊。所以就想着实现了一个,因为其他的方法也都封装,不差这一个了。完整的项目代码在这里。
- vue,jsonp的方法
- vue-resource jsonp跨域问题解决方法
- vue.js的ajax和jsonp请求
- Vue jsonp定义跨域的报头
- Vue mock & vue-resource & JSONP
- Vue jsonp交互
- vue-resource、Vue中response的get、post和jsonp请求例子
- vue.js(vue-resource) ---jsonp跨域
- jsonp 跨域请求 VUE
- 四十、vue中封装jsonp
- vue中jsonp跨域小栗子
- vue开发:vue全局组件的方法
- jsonp实现跨域的方法
- 原生JS实现的AJAX方法、JSONP
- 用vue的jsonp写了个百度搜索的demo
- Vue实例的简单方法
- vue引入jquery的方法
- 安装vue.js的方法
- 端口汇总
- android.os.TransactionTooLargeException: data parcel size 962920 bytes
- for循环中写i++与++i有啥区别吗
- Docker
- Oozie介绍
- vue,jsonp的方法
- Ubuntu17.04解决博通网卡问题
- 莫比乌斯反演初涉
- Vue.js2.0-饿了么商家
- echarts图表大小
- WIN2008服务器开放Tomcat/Mysql端口
- 数据格式与数据类型
- 欢迎使用CSDN-markdown编辑器
- 【C++心路历程30】(APIO2013)道路费用