vue使用jsonp请求 |
您所在的位置：网站首页 › axios发送jsonp请求 › vue使用jsonp请求 |
vue使用jsonp请求
|
Vue-jsonp
用于处理 vue 发送 JSONP 请求的轻量js库。 Install npm install vue-jsonp -S 复制代码 用法 在main.js中添加，注册为Vue的全局插件 import { VueJsonp } from 'vue-jsonp' Vue.use(VueJsonp) 复制代码现在你可以在Vue的组件中使用 this.$jsonp 发送 jsonp 请求了，因为Vue.use(VueJsonp)里把 $jsonp 赋给 vue 原型了：Vue.prototype.$jsonp = jsonp 例如请求百度地图接口： this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', { region: "杭州", keyword: query, key: "CCWBZ-LZD6S-67COM-6GWDO-CHJ67-*****", output: 'jsonp' }).then(res => { // ... }) 复制代码 在组件中直接使用函数： import { jsonp } from 'vue-jsonp' jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', { region: "杭州", keyword: query, key: "CCWBZ-LZD6S-67COM-6GWDO-CHJ67-*****", output: 'jsonp' }).then(res => { // ... }) 复制代码 发送数据和设置查询参数 & 函数名 // The request url will be "/some-jsonp-url?name=LancerComet&age=100&callback=jsonp_{RANDOM_STR}". jsonp('/some-jsonp-url', { name: 'LancerComet', age: 100 }) 复制代码 自定义查询和函数名 // The request url will be "/some-jsonp-url?name=LancerComet&age=100&cb=jsonp_func". jsonp('/some-jsonp-url', { callbackQuery: 'cb', callbackName: 'jsonp_func', name: 'LancerComet', age: 100 }) 复制代码 部分源码分析
在 TypeScript 中制作插件需要类型声明，项目中使用TypeScript 模块补充 (module augmentation)的特性，在declare module 'vue/types/vue' 中声明了 Vue 要补充的 $jsonp 类型，注册VueJsonp插件， 将$jsonp 赋给 vue 原型，将jsonp 函数挂载到Vue.prototype.$jsonp上。 const VueJsonp: PluginObject = { install (V: typeof Vue) { V.prototype.$jsonp = jsonp } } 复制代码 jsonp() jsonp函数就是动态创建了script标签，利用script的src不受同源策略约束来跨域获取数据 在window对象上根据callbackName创建全局回调函数来接收数据，将请求地址拼接上请求参数，并挂载到document上，等服务端响应并返回约定的数据，返回一个promise实例, resolve(json) JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。 function jsonp ( url: string, param: IJsonpParam = {}, timeout?: number ): Promise { if (typeof url !== 'string') { throw new Error('[Vue-jsonp] Type of param "url" is not string.') } if (typeof param !== 'object' || !param) { throw new Error('[Vue-jsonp] Invalid params, should be an object.') } timeout = typeof timeout === 'number' ? timeout : DEFAULT_TIMEOUT return new Promise((resolve, reject) => { const callbackQuery = typeof param.callbackQuery === 'string' ? param.callbackQuery : 'callback' const callbackName = typeof param.callbackName === 'string' ? param.callbackName : 'jsonp_' + randomStr() param[callbackQuery] = callbackName // Remove callbackQuery and callbackName. delete param.callbackQuery delete param.callbackName // Convert params to querying str. let queryStrs: (string[])[] = [] Object.keys(param).forEach(queryKey => { queryStrs = queryStrs.concat(formatParams(queryKey, param[queryKey])) }) const queryStr = flatten(queryStrs).join('&') const onError = () => { removeErrorListener() clearTimeout(timeoutTimer) reject({ status: 400, statusText: 'Bad Request' }) } const removeErrorListener = () => { paddingScript.removeEventListener('error', onError) } const removeScript = () => { document.body.removeChild(paddingScript) delete window[callbackName] } // Timeout timer. let timeoutTimer = null // Setup timeout. if (timeout > -1) { timeoutTimer = setTimeout(() => { removeErrorListener() removeScript() reject({ statusText: 'Request Timeout', status: 408 }) }, timeout) } // Create global function. window[callbackName] = (json: T) => { clearTimeout(timeoutTimer) removeErrorListener() removeScript() resolve(json) } // Create script element. const paddingScript = document.createElement('script') // Add error listener. paddingScript.addEventListener('error', onError) // Append to head element. paddingScript.src = url + (/\?/.test(url) ? '&' : '?') + queryStr document.body.appendChild(paddingScript) }) } 复制代码 参考资料vue-jsonp - npm vue-jsonp - github |
【本文地址】
今日新闻 |
推荐新闻 |