面试官:写一个jsonp叭。

329 阅读1分钟

1.动态创建一个script标签,src为请求的url。
2.url的参数为callback=callbackName。
3.给全局对象window添加属性callbackName,value为回调函数,属性名最好使用hash,防止冲突。
4.后端读取函数名,返回的data为传入参数的函数,参数即我们所需要的。
5.callback执行完删除。

类似于script标签的还有img,a等。

简单实现

 function jsonp(url, cbFn) {
            let re = /callback=([^&]+)/;
            let fnName = url.match(re)[1];
            let script = document.createElement('script');
            script.src = url;
            document.body.append(script)

            window[fnName] = cbFn;
            script.onload = function () {
                this.remove();
            }
        }
        
jsonp('http://127.0.0.1:3000/list?callback=foo', function (data) {
            console.log(data);
        })
        
//后端设置
let fnName = ctx.request.query.callback;

ctx.body = fnName + '({"username":"james"})'        
        

记录记录!