手写JSONP

发布时间 2023-10-26 09:56:58作者: Mizuki-Vone

为何

  • 跨域拿数据的其中一种解决办法
  • 但是注意只能是get请求

手写

  const jsonp = (url, data = {}, callback = 'callback') => {
    const datastr = url.indexOf('?') > -1 ? '?' : '&'
    Object.entries(data).map(([key, val]) => {
      datastr += `${key}=${val}&`
    })
    datastr +=`callback=`+callback

    const newScript = document.createElement('script')
    newScript.src = url + datastr
    document.body.appendChild(newScript)

    return new Promise((resolve, reject) => {
      window[callback] = (res) => {
        try {
          resolve(res)
        }
        catch {
          reject(res)
        }
        finally {
          document.body.removeChild(newScript)
        }
      }
    })
  }
  
  // 然后就可以调用了
  jsonp('test.com/api', { page: 1, page_size: 10 }).then(res => {
    console.log(res)
  })