手写jsonp

最新推荐文章于 2024-03-04 10:13:55 发布

不会敲代码的小王ꦿ

最新推荐文章于 2024-03-04 10:13:55 发布

阅读量61

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_68086484/article/details/127097426

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        width: 200px;
        height: 70px;
        line-height: 70px;
    }

    .box .show {
        line-height: 70px;
    }

    .show img {
        vertical-align: middle;
    }
</style>

<body>
    <div class="box">
        <div class="city"></div>
        <div class="show"></div>
    </div>

</body>
<script>
    //什么是浏览器同源策略(当前文件请求服务器时候要求，请求地址与当前文件同源)
    //同源：域名，子域名，端口号，协议一致
    //跨域：绕过浏览器的同源策略域名获取数据
    //jsonp 利用script src 没有同源策略限制返回方法执行加数据
    //提前定义这个方法就可以
    //拼接url，定义方法的名称，动态创建script异步
    var _city = document.querySelector('.city');
    var _show = document.querySelector('.show');
    function jsonp(url) {
        return new Promise((resolve, reject) => {
            //定义函数的名称
            var funname = "jp" + Date.now();
            //定义scrpit的src
            var src = url + "&callback=" + funname;
            //创建一个script
            var script = document.createElement("script")
            //指定src
            script.src = src;
            //插入body
            document.body.appendChild(script);
            //定义函数
            window[funname] = function (data) {
                //把动态创建的script标签移除
                document.body.removeChild(script);
                resolve(data);
            }
            //错误拒绝
            script.onerror = function (err) {
                //把动态创建的script标签移除
                document.body.removeChild(script);
                reject(err)
            }
        })
    }
    jsonp("https://r.inews.qq.com/api/ip2city?otype=jsonp").then(res => {
        //先通过ip获取
        // console.log(res);
        _city.innerHTML = res.city;
        //返回新的promise获取天气
        return jsonp(`https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.province}&city=${res.city}`)
    }).then(res => {
        console.log("天气", res);
        var degree = res.data.observe.degree;
        var pics = res.data.observe.weather_code;
        var weather = res.data.air.aqi_name

        _show.innerHTML = (`
        <img src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/weather/${pics}.svg' width='50'>
        ${degree}℃
        ${weather}
        `);
    }).catch(err => console.error(err))

</script>

</html>