美文网首页
看到个大牛写的jsonp封装,写的真好,抄一下

看到个大牛写的jsonp封装,写的真好,抄一下

作者: 带带带前端 | 来源:发表于2019-01-23 15:00 被阅读0次

客户端

/**
 * JSONP请求工具
 * @param url 请求的地址
 * @param data 请求的参数
 * @returns {Promise<any>}
 */
const request = ({url, data}) => {
  return new Promise((resolve, reject) => {
    // 处理传参成xx=yy&aa=bb的形式
    const handleData = (data) => {
      const keys = Object.keys(data)
      const keysLen = keys.length
      return keys.reduce((pre, cur, index) => {
        const value = data[cur]
        const flag = index !== keysLen - 1 ? '&' : ''
        return `${pre}${cur}=${value}${flag}`
      }, '')
    }
    // 动态创建script标签
    const script = document.createElement('script')
    // 接口返回的数据获取
    window.jsonpCb = (res) => {
      document.body.removeChild(script)
      delete window.jsonpCb
      resolve(res)
    }
    script.src = `${url}?${handleData(data)}&cb=jsonpCb`
    document.body.appendChild(script)
  })
}
// 使用方式
request({
  url: 'http://localhost:9871/api/jsonp',
  data: {
    // 传参
    msg: 'helloJsonp'
  }
}).then(res => {
  console.log(res)
})

服务端

const {successBody} = require('../utli')
class CrossDomain {
  static async jsonp (ctx) {
    // 前端传过来的参数
    const query = ctx.request.query
    // 设置一个cookies
    ctx.cookies.set('tokenId', '1')
    // query.cb是前后端约定的方法名字,其实就是后端返回一个直接执行的方法给前端,由于前端是用script标签发起的请求,所以返回了这个方法后相当于立马执行,并且把要返回的数据放在方法的参数里。
    ctx.body = `${query.cb}(${JSON.stringify(successBody({msg: query.msg}, 'success'))})`
  }
}
module.exports = CrossDomain

相关文章

  • 看到个大牛写的jsonp封装,写的真好,抄一下

    客户端 服务端

  • Promise 封装 jsonp

    这里写一个 Promise 封装 jsonp 请求到 QQ 音乐数据的 demo。 jsfiddle在线演示地址 ...

  • iOS 封装SDK

    背景 因为老大让封装sdk,看了几天的博客,水了几个群,最后大牛们告知如何选择。(如果写的有错,望大牛指正QAQ)...

  • 写一个JSONP

    首先让我们来先写一个server html代码 main.js代码 返回html会同时返回里面内联的main.js...

  • 2021-02-22

    重写母亲 我笔下的母亲有争议。 有人说:你写的母亲写的真好,第一次看到写母亲这样写,写的真好,能投稿。...

  • 写的真好

    梨花香 缠着衣角掠过熙攘 复悄入红帘深帐 听枝头黄鹂逗趣儿 细风绕指淌 坐船舫 兰桨拨开雾霭迷茫 不觉已一日过半 ...

  • 写的真好

    生活是水,水不等于诗, 在阳光的照耀下,水化成气,变成虹。 这五彩的虹, 才是诗。

  • 写的真好。。

    如果你爱一个人,你一定要告诉她,不是为了要她报答,而是让她以后在黑暗的日子里,否定自己的时候,想起世界上还有人这么...

  • 写的真好

    琳琅是我的偶像

  • 写的真好

    不是所有人,都生活在同一片海里。 01 知乎网友@风墟讲过这么一个故事。 一对母女在马路上吵架。 起因是妈妈在开车...

网友评论

      本文标题:看到个大牛写的jsonp封装,写的真好,抄一下

      本文链接:https://www.haomeiwen.com/subject/npnjjqtx.html