day-15-实现一个jsonp

H246802 commented 5 years ago

封装一个 jsonp 方法，可以使用如下方式调用

jsonp(url[, data][, callbackName])

url
类型：String，请求 url
data
类型：PlainObject，参数对象
callbackName
类型：String，传递给服务端的回调函数的 key
默认是“callback”
返回值
Promise 对象

// ?jsoncallback=fn&page=1&cate=recommend
jsonp('http://photo.sina.cn/aj/index',
  {
    page: 1, cate: 'recommend'
  }, 'jsoncallback')
  .then(data => {
    console.log(data)
  })

H246802 commented 5 years ago

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<script>

  // 转换成链接参数形式
  let parseParam = function (param, key) {
    var paramStr = ""
    if (param instanceof String || param instanceof Number || param instanceof Boolean) {
      paramStr += "&" + key + "=" + encodeURIComponent(param)
    } else {
      $.each(param, function (i) {
        var k = key == null ? i : key + (param instanceof Array ? "[" + i + "]" : "." + i)
        paramStr += '&' + parseParam(this, k)
      })
    }
    return paramStr.substr(1)
  }

  function jsonp(url, data = {}, callback) {
    return new Promise(function (resolve, reject) {
      let reqUrl;
      data[callback] = callback
      // 对象序列化并和url拼接
      reqUrl = url + '?' + parseParam(data)
      let script = document.createElement("script")
      script.src = reqUrl
      $('body').append(script)
      if (window[callback]) {
      } else {
        window[callback] = function (data) {
          resolve(data)
        }
      }
    })

  }

  // ?jsoncallback=fn&page=1&cate=recommend
  jsonp('http://photo.sina.cn/aj/index',
    {
      page: 1, cate: 'recommend'
    }, 'jsoncallback')
    .then(data => {
      console.log(data)
    }) 
  jsonp('http://photo.sina.cn/aj/index',
    {
      page: 2, cate: 'recommend'
    }, 'jsoncallback')
    .then(data => {
      console.log(data)
    })
</script>
</body>
</html>

H246802 commented 5 years ago

js部分

let parseParam = function (param, key) {
    var paramStr = ""
    if (param instanceof String || param instanceof Number || param instanceof Boolean) {
      paramStr += "&" + key + "=" + encodeURIComponent(param)
    } else {
      $.each(param, function (i) {
        var k = key == null ? i : key + (param instanceof Array ? "[" + i + "]" : "." + i)
        paramStr += '&' + parseParam(this, k)
      })
    }
    return paramStr.substr(1)
  }

 function jsonp(url, data = {}, callback) {
    return new Promise(function (resolve, reject) {
      let reqUrl;
      data[callback] = callback
      // 对象序列化并和url拼接
      reqUrl = url + '?' + parseParam(data)
      let script = document.createElement("script")
      script.src = reqUrl
      $('body').append(script)
      if (window[callback]) {
      } else {
        window[callback] = function (data) {
          resolve(data)
        }
      }
    })

  }

H246802 / 30-days-challenge

day-15-实现一个jsonp #15