JavaScript Promise(承诺)对象—创建天气实例

JavaScript Promise(承诺)对象—创建天气实例ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。实例API地址获取:https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=j

i张一鸣

515人浏览 · 2022-02-22 19:30:15

i张一鸣 · 2022-02-22 19:30:15 发布

JavaScript Promise(承诺)对象—创建天气实例

ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

实例API

地址获取:https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp
天气获取:http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=省&city=市

实现代码

<!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">
    <script src="./js/jquery-3.6.0.js"></script>
    <title>Document</title>
</head>
<body>
    <span class="city"></span>
    <span>空气质量:&nbsp;<span class="quality"></span></span>
    <span>温度:&nbsp;<span class="temperature"></span></span>
    <script>
        /**
         * @description 定义一个获取api的方法
         * @param {String} url 请求的地址
         * @return {Promise} 返回一个promise的实例
        **/
        function getApi(url) {
            //返回一个Promise的实例
            return new Promise((resolve, reject) => {
                //发起ajax请求 url请求的地址;dataType请求数据的类型为jsonp;success成功回调;error失败返回的函数
                $.ajax({
                    url,
                    dataType: "jsonp",
                    success(res) {
                        resolve(res)
                        //兑现成立 对应.then
                    },
                    error(err) {
                        reject(err)
                        //拒绝兑现 对应.catch
                    }
                })
            })
        }
        var url = "https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp"
        //调用函数 传入url
        getApi(url)
            //当resolve被执行通过.then获取resolve的结果
            .then(res => {
                var siteStr = res.result.ad_info
                //设置获取的城市
                console.log(siteStr);
                $(".city").text(res.result.ad_info.city);
                var url2 = `http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${siteStr.province}&city=${siteStr.city}`
                return getApi(url2)
            })
            .then(res => {
                var quality = res.data.air.aqi_name;
                var temperature = res.data.observe.degree;
                console.log(quality, temperature);
                $(".quality").text(`${quality}`);
                $(".temperature").text(`${temperature}℃`)
            })
            .catch(err => console.log(err))
        //失败后控制台输出失败的结果
    </script>
</body>
</html>