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) => {
					//发起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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值