ES6之promise天气案例

<p>
			<span class="add"></span>
			<span class='weather'></span>
			<span class='temp'></span>
			<img src="" class="img" width="30">
		</p>
		<script>
			$(function(){
				// 获取网络请求 信息 (根据不同的url返回不同的结果)
				function getApi(url){
					//返回一个承诺
					return new Promise((resolve,reject)=>{
						$.ajax({
							url:url,
							dataType:"jsonp",
							success:function(res){
								resolve(res);
							},
							error:function(err){
								reject(err)
							}
						})
					})
				}
				//获取地址
				var urlA = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1593478015329";
				var urlB = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc";
				//添加&province=省份&city=城市
				getApi(urlA)
				.then(add=>{//获取地址
					console.log(add);
					var info=add.result.ad_info;//具体的地址信息
					$('.add').text(info.city);
					
					return getApi(urlB+`&province=${info.province}&city=${info.city}`)
				})
				.then(data=>{//获取天气
					console.log(data);
					$('.weather').text(data.data.observe.weather);
					$('.temp').text(data.data.observe.degree)
					$('.img').attr("src",`https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/weather/${data.data.observe.weather_code}.svg`)
				})
				.catch(err=>{//失败
					console.error(err);
				})
			})
  • 40
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 39
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值