ajax与Promise做一个城市与天气的案例

最新推荐文章于 2022-10-22 20:37:01 发布

洋芋坨坨！

最新推荐文章于 2022-10-22 20:37:01 发布

阅读量309

点赞数 3

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_64550674/article/details/123095536

版权

<body>
		<div>
			<span class="city"></span>
			<span class="weather"></span>
		</div>
		<script type="text/javascript">
			function getApi(url) {
				//返回一个promise实例
				return new Promise((resolve, reject) => {
					//发起ajax请求  url请求的地址；dataType请求数据类型为jsonp；success成功回调；error失败回调函数
					$.ajax({
						url,
						dataType: "jsonp",
						success(res) {
							//兑现成功  对应.then
							resolve(res)
						},
						error(res) {
							//拒绝兑现  对应 .catch
							reject(err)
						}
					})
				})
			}
			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 => {
					console.log(res)
					//设置.city的文本为获取的城市
					var ad_info = res.result.ad_info;
					$(".city").text(ad_info.city)
					var url2 =
						`http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${ad_info.province}&city=${ad_info.city}`
					//调用下一个getApi  返回下一个promise实例
					return getApi(url2)
				})
				//.then执行完返回的是个新的promise实例 他也有个.then方法（前面不能有；）
				.then(res => {
					console.log("天气", res)
					var str = `${res.data.observe.degree}°C,${res.data.observe.weather}`;
					console.log(str)
					$(".weather").text(str)

				})
				//失败后控制台输出失败的结果
				.catch(err => console.log(err))


			
		</script>
	</body>

洋芋坨坨！

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax与Promise做一个城市与天气的案例

<body> <div> <span class="city"></span> <span class="weather"></span> </div> <script type="text/javascript"> function getApi(url) { //返回一个promise实例 return new Promise((resolve, reject).
复制链接

扫一扫