[JavaScript知识库]前端手写(十九)——手写jsonp实现原理

一、写在前面
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)
    })