前面一篇整理Promise的Ajax的封装，这次做一个JSONP的封装，现在前端工程化的普及，基本上都是前后端分离，会有跨域的问题，JSONP是一种解决方案，不过JSONP只能处理get类型的请求。它的原理就是通过动态加载一个script文件，文件内容是一个回调函数，参数就是接口返回的数据，执行这个回调函数就能拿到数据。
代码如下：
//Jsonp.js
(function(){
//document.getElementsByTagName 返回一个HTMLCollection[head] [0]取得head元素
//html5 新增head属性 document.head引用文档的<head>元素
const head = document.head ? document.head : document.getElementsByTagName('head')[0]
let id = new Date();
const JsonpRequest = (options) => {
return new Promise((resolve,reject) => {
const script = document.createElement('script');
let responseData;
let callbackName = 'myJsonp' + (id++);
const removeScript = (e) => {
if(script.onload) script.onload = null;
if(script.onerror) script.onerror = null;
if(responseData){
resolve(responseData);
} else{
reject(new Error('fail'));
}
}
script.type = 'text/javascript';
if(script.onload){
script.onload = removeScript;
}
window[callbackName] = () => {
responseData = arguments;
}
script.src = options.url + urlParams(options.params) + '&cb' + callbackName;
head.appendChild(script);
});
window.JsonpRequest = window.JsonpRequest || JsonpRequest;
}
const urlParams = (params) => {
const result = [];
for(let prop in params){
result.push(`prop=${params[prop]}`);
}
return result.join('&');
}
})();
调用
<script src="Jsonp.js"></script>
<script>
JsonpRequest({
url:'localhost:8080',
params:{
id:123,
page:10
}
})
.then((data) => {
console.log(data)
},(e) => {
console.log(e)
});
</script>
网友评论