封装一个简单的JSONP

Posted 2021-03-05 艺术诗人

简单来说通过script标签的src属性,src属性不仅仅可以写 JS文件，可以请求任意文件。jsonp是通过JS这一特点实现，并添加async（异步属性）。

当我们用src请求一下后台文件（例如：php）。

1.如果我们在PHP文件中返回来的是 var data =1一条一句的话，将立即执行，那我们需要创建很多个script，才能完成我们的需求。

2.而且加了async有可能在下面拿不到。

所以一般在后台文件中返回的是函数调用，前台定义一个函数。通过SRC属性地址后？callback=hi. 前端页面就是hi()。并且用函数的形式可以解决异步的问题。

普通请求 通过控制台的 的 xhr 。而JSONP是通过控制台的js请求文件。

注意：动态创建的script都是异步的。

 

下面使用ES6‘封装JSONP

export function myJSONP (url,params,callbackName) {
  return new Promise((resolve, reject) => {// 根据url是否带有参数决定参数前缀符
    let paramFlag= url.indexOf(‘?‘) === -1 ? ‘?‘ : ‘&‘// 组装带回调函数和请求参数的url
    url += `${paramFlag}callback=${callbackName}`
    if (params) {
      for (let i in params) {
        url += `&${i} = ${params[i]}`
      }
    }
    let script = document.createElement(‘script‘)// 动态创建script标签 在回调函数中需要对该动态创建的标签进行删除
    script.src = url
    window[callbackName] = (res) => {// jsonp返回数据到回调函数 需要注意 回调函数必须绑定在window上 且接受数据完毕后要进行回调函数的删除
      delete window[callbackName]// 删除绑定在window上的回调函数
      document.body.removeChild(script)// 删除动态创建的script标签
      if (res) {
        resolve(res)
      } else {
        reject(‘没有返回数据‘)
      }
    }
    script.addEventListener(‘error‘, () => {// 处理动态加载script标签异常的情况
      delete window[callbackName]
      document.body.removeChild(script)
      reject(‘script资源加载失败‘)
    }, false)
    dcoument.body.appendChild(script)// 添加js节点到document上，开始请求
  })
}

 

使用

import myJSONP from ‘common/myJSON‘

const url = ‘接口地址‘
const params = ‘请求参数 对象‘
const callbackName = ‘回调函数名称‘

myJSONP(url, params, callbackName).then(res => {
  console.log(res)
  }).catch(err => {
  console.log(err)
})