vue中使用jsonp

日常学习(三)—二次封装jsonp
  • jsonp
  • Object.assign()
  • encodeURIComponent
  • promise
  • 实例—二次封装jsonp(vue)

1.什么是jsonp?(参考:https://baike.baidu.com/item/jsonp/493658)

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
简单来说就是,前端动态生成<script> 标签插入html中,标签中的src属性中含有与后端约定的参数,后端拿到该参数后,以此作为响应函数的函数名,并且将前端需要的内容作为该函数的参数进行返回。


2.Object.assign()

对象拼接


3.encodeURIComponent

将文本字符串编码为一个有效的统一资源标识符 (URI)


3.Promise

Promise 意识是承诺,是对一个关联请求任务的承诺,对于不同的请求状态,执行不同的操作。Promise是一个构造函数,该构造函数含有两个参数,这两个参数都是函数,分别是resolve和reject,对应的请求状态为:fullfilled、rejected。Promise 对象中含有then方法,then方法含有两个参数,一个接受resolve状态,一个接受reject状态,


4.实例—二次封装jsonp — 返回Promise对象
导入的jsonp依赖地址:https://github.com/webmodules/jsonp

 //封装jsonp,使其返回一个promise,
import OriginJsonp from 'jsonp'

//对外暴露封装的jsonp 方法
export default function jsonp( url,data,option){
    url += (url.indexOf('?')<0?'?':'&') + param(data);
    return new Promise((resolve,reject)=>{
        OriginJsonp(url,option,(err,data)=>{
            if(!err){
                resolve(data);
            }else{
                reject(err);
            }
        })
    })
}


//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) : '' 
}

调用:

        methods:{
            _getRecommands(){
                getRecommands().then((res)=>{
                    if(res.code === ERR_OK){
                        console.log(res.data);
                    }
                });
            }
        }
        //resOriginJsonpresolvedata)传来的data或是rejecterr)传来的err,根据请求状态决定。
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值