前端手写(十九)——手写jsonp实现原理

x33g5p2x  于2022-04-02 转载在 其他  
字(0.7k)|赞(0)|评价(0)|浏览(450)

一、写在前面
jsonp可以实现跨域,其原理就是在script标签不受同源策略的限制。如果面试官让你手写一个jsonp,来实现跨域,此时你该如何去做。
二、手写实现

  1. function jsonp({ url, params, callbackName }) {
  2. //拼接url地址
  3. function getUrl() {
  4. let paramsStr = ''
  5. for (let item in params) {
  6. if (Object.prototype.hasOwnProperty.call(params, item)) {
  7. paramsStr += `${item}=${params[item]}&`
  8. }
  9. }
  10. return `${url}?${paramsStr}callback=${callbackName}`
  11. }
  12. return new Promise((resolve, reject) => {
  13. //创建一个script标签
  14. let scriptEle = document.createElement('script')
  15. //给script标签的src属性赋值。
  16. scriptEle.src = getUrl()
  17. //将其插入文档流中
  18. document.body.appendChild(scriptEle)
  19. //监听回调函数
  20. window[callbackName] = (data) => {
  21. resolve(data)
  22. document.body.removeChild(scriptEle)
  23. }
  24. })
  25. }
  26. jsonp({ url: 'http://127.0.0.1:3000', params: {}, callbackName: 'func' }).then(res => {
  27. console.log(res)
  28. })

相关文章