jsonp的跨域请求原始方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function jp(data){
console.log(data);
}
</script>
<script src="https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=jp" type="text/javascript" charset="utf-8"></script>
</body>
</html>
jsonp的封装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp 方法封装</title>
</head>
<body>
<script type="text/javascript">
//目标
/* jsop().then()*/
//传入参数：url 函数名称jp callback 传入后端参数
function jsonp(url, option = {
callback: "callback",
jp: "jp"
}) {
var callback = option.callback || 'callback'; //传给后端get的参数
var jp = option.jp || 'jp'; //传给后端的callback值
url = url + `&${callback}=${jp}`; //url添加 &callback=jp
//动态创建一个script标签
var script = document.createElement("script");
//指定script的src值
script.src = url;
//插入script标签到header
var head = document.querySelector("head");
head.append(script);
return new Promise((resolve, reject) => {
//创建一个函数，函数名与jp保持一致
window[jp] = data => {
resolve(data);
}
script.onload = function() {
head.removeChild(script);
}
script.onerror = function(e) {
head.removeChild(script);
reject(e);
}
})
}
var url =
"https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82";
jsonp(url).then(res => {
console.log(res);
}).catch(err => {
console.log(err)
})
</script>
</body>
</html>