jsonp的原理介绍及Promise封装

ninefive 发布于2019-08-21 17:43 / 1631人阅读

摘要：什么叫是填充式或参数式的简写，是通过请求跨域接口，获取数据的新实现方式的实现原理动态创建标签，因为标签是没有同源策略限制，可以跨域的。具体看接下来的实现这个是库的具体实现，建议下载来研究一下，最好自己动手写一遍。

什么叫jsonp?

jsonp是json with padding（填充式json或参数式json）的简写，是通过ajax请求跨域接口，获取数据的新实现方式

jsonp的实现原理：

动态创建script标签，因为script标签是没有同源策略限制，可以跨域的。把script标签的src指向正式服务端地址，这个地址跟个参数callback=xxx, 服务端在返回数据时，在xxx里包裹一个方法（里面是返回的数据），相当于在前端执行xxx这个方法，但是浏览器并没有这个方法，所以在发送请求之前在window注册这个方法，这样的话相当于在前端执行window.xxx()这个方法去获取数据。具体看接下来的实现！

https://github.com/webmodules...
这个是jsonp库的具体实现，建议下载来研究一下，最好自己动手写一遍。本文主要是Promise封装，所以就不具体介绍jsonp的具体实现

步骤一：

首先安装这个库，因为我是在node npm环境下开发，所以

$ npm install jsonp

参数介绍
jsonp(url, opts, fn)
url (String) 服务器端数据接口地址
opts (Object) 一般只需关注param即可

param (String) 默认是callback,这是与后端约定的参数名称，也可以随便定义，只要前后端统一

timeout (Number) 请求超时时间，默认是6000ms

prefix (String) callback值的前缀，默认是__jp

name (String) 指定全局注册的回调方法名，一般不会用到，因为默认是prefix+自增数字

fn 回调方法，用es6 Promise

步骤二：

下面是具体用法：
建一个名叫jsonp.js的文件
先引入jsonp库文件

import originJSONP from "jsonp"

对外暴露方法 url:请求服务器地址，data:参数

export default function jsonp(url,data,option) {
    url += (url.indexOf("?")<0?"?":"&")+param(data)
    return new Promise(function(resolve,reject) {
        originJSONP(url,option, function(err,data) {
            if(!err){
                resolve(data)
            }else{
                reject(err)
            }
        })
    })
}

定义一个将Object的参数处理成为 url挂载参数的形式的函数

export function param(data) {
  let url = ""
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ""
    url += "&" + k + "=" + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ""
}

到这里这个Promise 就封装好了，接下来就具体调用来获取数据

步骤三：

建一个js文件，名字自己定义
引入前面封装的jsonp.js

import jsonp from "../common/js/jsonp.js"

定义参数

const commonParams = {
    g_tk:1319877694,
    inCharset:"utf-8",
    outCharset:"utf-8",
    notice:0,
    format:"jsonp"
};

定义前后端统一参数

const options = {
    param:"jsonpCallback"
};

定义获取数据函数这里我是拿QQ音乐的数据https://m.y.qq.com/（感谢QQ音乐的接口支持）

export function getDataFunc() { 
    const url = "https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"
    const data = Object.assign({},commonParams,{
        platform:"h5",
        uin:0,
        needNewCode:1,
    })
    return jsonp(url,data,options)
}

到此，咱们就完成用jsonp库进行Promise封装，并获取数据的过程！感谢阅读！

超融合服务器私有云 Promise封装FileReader webrtc介绍及简单应用 ddos攻击原理及防范人工智能原理及应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89929.html

如何构建通用 api 中间层

摘要：是在收到响应后执行的函数，可以不用返回。一步步介绍了如何构建以及使用中间层，来统一管理接口地址，最后还介绍了下中间件等高级功能。零、问题的由来开门见山地说，这篇文章是一篇安利软文~，安利的对象就是最近搞的 tua-api。顾名思义，这就是一款辅助获取接口数据的工具。发请求相关的工具辣么多，那我为啥要用你呢？理想状态下，项目中应该有一个 api 中间层。各种接口在这里定义，业务...

BingqiChen 2019-08-23 13:00 评论0 收藏0
ES6(一) —— 异步编程解决办法[从回调函数到promise,generator,async]

摘要：回调函数这是最原始的一种异步解决方法。从的对象演化而来对象是提出的一种对异步编程的解决方案，但它不是新的语法，而是一种新的写法，允许将回调函数的嵌套改成链式调用。一、前言异步编程对JavaScript来说非常重要，因为JavaScript的语言环境是单线程的，如果没有异步编程将变得非常可怕，估计根本无法使用。这篇文章就来总结一下从最原始的回调函数到现在的ES6、ES7的新方法。文...

greatwhole 2019-08-22 15:19 评论0 收藏0
axios 封装和使用

摘要：当然不限于此种写法，还有其他的写法可网上搜索封装参考执行异步请求发请求配置对象指定请求参数发请求如果成功了调用如果失败了不调用而是提示异常信息请求出错了要求能根据接口文档定义接口请求包含应用中所有接口请求函数的模块每个函数的返回值都是基本要当然不限于此种写法，还有其他的写法可网上搜索axios封装参考//api/axios.js import axios from axiosimpo...

Airmusic 2019-08-26 10:38 评论0 收藏0
axios封装，组件获取数据

摘要：当然不限于此种写法，还有其他的写法可网上搜索封装参考执行异步请求发请求配置对象指定请求参数发请求如果成功了调用如果失败了不调用而是提示异常信息请求出错了要求能根据接口文档定义接口请求包含应用中所有接口请求函数的模块每个函数的返回值都是基本要当然不限于此种写法，还有其他的写法可网上搜索axios封装参考//api/axios.js import axios from axiosimpo...

djfml 2019-08-26 10:38 评论0 收藏0
fetch使用的常见问题及其解决办法

首先声明一下，本文不是要讲解fetch的具体用法，不清楚的可以参考MDN fetch教程。引言说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： f...

pubdreamcc 2019-08-20 14:34 评论0 收藏0