【HAVENT原创】让 axios 支持 jsonp

因为不想让再引用新的第三方组件了，所以执念了一下，于是搜索到了下面的代码

//axios本版本不支持jsonp 自己拓展一个
axios.jsonp = (url) => {if(!url){console.error('Axios.JSONP 至少需要一个url参数!')return;}return new Promise((resolve,reject) => {window.jsonCallBack =(result) => {resolve(result)}var JSONP=document.createElement("script");JSONP.type="text/javascript";JSONP.src=`${url}&callback=jsonCallBack`;document.getElementsByTagName("head")[0].appendChild(JSONP);setTimeout(() => {document.getElementsByTagName("head")[0].removeChild(JSONP)},500)})
}

调试了一下，发现确实能用，但是存在一个缺陷，就是如果存在连续多次的请求，都会回调到同一个函数上，这样会导致获取异步结果的时候只返回了最后一次的结果，于是乎调整了一下函数，保证每次都是命中自己对应的方法，写的比较简单，因为我的 index 不会重复，所以我没做其他校验了，如果需要保证请求的唯一性，请将 index 参数设置为唯一值（比如时间戳 + 3位的随机数）

import axios from 'axios'
import es6Promise from 'es6-promise'// HH: 扩展 axios，让 axios 支持 jsonp
axios.jsonp = (url, index) => {if (!url) {console.error('Axios.JSONP 至少需要一个url参数!')return;}let callbackName = 'jsonCallBack' + index;return new Promise((resolve, reject) => {let JSONP = document.createElement("script");JSONP.type = "text/javascript";JSONP.src = `${url}&jsonpCall=${callbackName}`;document.getElementsByTagName("head")[0].appendChild(JSONP);window[callbackName] = (res) => {resolve(res)}setTimeout(() => {document.getElementsByTagName("head")[0].removeChild(JSONP)}, 500)})
}export const jsonp = (url, index) => axios.jsonp(url, index)

转载于:https://my.oschina.net/u/943746/blog/3074454

【HAVENT原创】让 axios 支持 jsonp相关推荐

Spring MVC 4.1 支持jsonp
2019独角兽企业重金招聘Python工程师标准>>> 使用ResponseBodyAdvice支持jsonp ResponseBodyAdvice是一个接口,接口描述, packa ...
【springboot】【若依(ruoyi)】@RestController 接口支持 JSONP
前言若依(ruoyi): v4.3 springboot 2.1.1.RELEASE spring 5.1.3.RELEASE 360极速浏览器 12.0.1476.0 (正式版本) (32 位) ...
AJAX、axios、JSONP、CORS
部分借鉴至:博客园-Mr_慕白 => HTTP报文格式部分借鉴至:CSDN-HansExploration => JSONP原理详解参考:阮一峰浏览器同源政策及其规避方法参考:阮一 ...
【HAVENT原创】Node Express API 通用配置
为什么80%的码农都做不了架构师?>>> ( 基于 Express 4.x ) 启动文件 /app.js: var express = require('express'); ...
部署ajax服务-支持jsonp
server端代码 var http = require("http"); var url = require('url'); //访问地址:http://127.0.0.1:40 ...
ashx 跨域_ASP.NET通用HTTP处理程序（ashx的），支持JSONP
Can someone show an example of an HTTP Handler that returns JSON and supports cross domain calls. I ...
【HAVENT原创】Australian Business Number (ABN) 验证
为什么80%的码农都做不了架构师?>>> PHP 代码如下: // ValidateABN // Checks ABN for validity using the publi ...
【HAVENT原创】Firebase 定时任务遍历删除子节点
为什么80%的码农都做不了架构师?>>> 每周定时执行,遍历 Firebase 数据库,删除过期的节点: var config = require('./config.json ...
【HAVENT原创】JS 屏蔽/禁止双击选中文字
为什么80%的码农都做不了架构师?>>> 源码如下: <div onselectstart="return false;" ><span& ...
由【说说JSON和JSONP..】博文，想到的MVC 扩展
前言今天看到随它去吧大牛的 [原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例文章,利用JSONP的跨域令人倍感狂喜.于是想,自己动手针对Asp.net MVC 进行一些扩展, ...

【HAVENT原创】让 axios 支持 jsonp

【HAVENT原创】让 axios 支持 jsonp相关推荐

最新文章

热门文章