手写jsonp

注意

实现一个JSONP

答：回调形式：

function objectToQuery(data) {
  let str = ''
  for (let key in data) {
    str = str + `&${decodeURIComponent(key)}=${decodeURIComponent(data[key])}`
  }
  return str.substring(1)
}

function JSONP(url, data, callback) {
  const container = document.getElementsByTagName('head')[0]
  const script = document.createElement('script')
  const callBackName = 'callback_' + new Date().getTime()
  script.src = `${url}?${objectToQuery}&callback=${callBackName}`
  window[callBackName] = res => {
    callback && callback(res)
    container.removeChild(script)
    delete window[callBackName]
  }
  container.appendChild(script)
  // 异常处理
  script.onerror = () => {
    console.error('error happen in JSONP')
    container.removeChild(script)
    delete window[callBackName]
  }
}

// 测试
JSONP('https://www.runoob.com/try/ajax/jsonp.php', { name: 'zcl' }, (data) => {
  console.log(data)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Promise形式

function objectToQuery(data) {
  let str = ''
  for (let key in data) {
    str = str + `&${decodeURIComponent(key)}=${decodeURIComponent(data[key])}`
  }
  return str.substring(1)
}

function JSONP(url, data) {
  const container = document.getElementsByTagName('head')[0]
  const script = document.createElement('script')
  const callBackName = 'callback_' + new Date().getTime()
  script.src = `${url}?${objectToQuery}&callback=${callBackName}`

  container.appendChild(script)
  return new Promise((resolve, reject) => {
    window[callBackName] = res => {
      container.removeChild(script)
      delete window[callBackName]
      resolve(res)
    }
    // 异常处理
    script.onerror = () => {
      console.error('error happen in JSONP')
      container.removeChild(script)
      delete window[callBackName]
      reject('error happen in JSONP')
    }
  })
}

// 测试
JSONP('https://www.runoob.com/try/ajax/jsonp.php', { name: 'zcl' }).then(res => {
  console.log(res)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

注意：

不要对script.src 的异常处理
在head标签添加 script标签后，记得移除。回调执行后也要移除 window 上的回调函数

编辑

上次更新: 2025/07/17, 07:17:44

← 手写call、apply、bind 手写getQueryString→