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);})})

ES6之promise天气案例相关推荐

视频教程-Javascript - Es6之Promise精讲系列-JavaScript
Javascript - Es6之Promise精讲系列全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node. ...
ES6新增Promise构造函数
文章目录有关ES6中Promise的理解 1.Promise的含义? 2.如何创建一个Promise对像? 3.Promise对像的三种状态? 4.thenable 对象是什么? 5.有关Promi ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
es6的Promise(承诺)
es6的Promise(承诺) Promise中的所有回调函数,都是异步执行的 //用来解决异步的一些问题 let p = new Promise(function(resolve,refused){ ...
利用ES6进行Promise封装总结
原生Promise解析简介 promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和强大. promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一 ...
浅谈ES6原生Promise
ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界. 正所谓: 世界本没有回调,写的人多了,也就有了})})})})}). Promise的兴起,是因为异步方法调用中,往往会出现 ...
谈谈 ES6 的 Promise 对象
2019独角兽企业重金招聘Python工程师标准>>> 谈谈 ES6 的 Promise 对象异步编程 promise es6 javascript 前言开篇首先设想一个日常开发 ...
ES6版Promise实现，给你不一样的体验
ES6版Promise实现,给你不一样的体验摘要: 在很久很久以前,Promise还没有来到这个世上.那时森林里的有这样一群攻城狮,他们饱受回调地狱(回调金字塔)的摧残,苦不堪言.直到有一天,一位不 ...
深度解析利用ES6进行Promise封装总结
这篇文章主要介绍了如何利用ES6进行Promise封装总结,文中通过示例代码介绍的非常详细,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 原生P ...

ES6之promise天气案例

ES6之promise天气案例相关推荐

最新文章

热门文章