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

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

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

function jsonp({ url, params, callbackName }) {
    //拼接url地址
      function getUrl() {
        let paramsStr = ''
        for (let item in params) {
          if (Object.prototype.hasOwnProperty.call(params, item)) {
            paramsStr += `${item}=${params[item]}&`
          }
        }
        return `${url}?${paramsStr}callback=${callbackName}`
      }

      return new Promise((resolve, reject) => {
      //创建一个script标签
        let scriptEle = document.createElement('script')
       //给script标签的src属性赋值。
        scriptEle.src = getUrl()
        //将其插入文档流中
        document.body.appendChild(scriptEle)
        //监听回调函数
        window[callbackName] = (data) => {
          resolve(data)
          document.body.removeChild(scriptEle)
        }
      })
    }

    jsonp({ url: 'http://127.0.0.1:3000', params: {}, callbackName: 'func' }).then(res => {
      console.log(res)
    })

相关文章