JavaScript动态加载script方式引用百度地图API …
2019-05-13 07:14:36来源:博客园 阅读 ()
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined
这篇文章中我接触到一个新的单词:Promise,借此来记录一下它,引用来源:JS - Promise使用详解--摘抄笔记
因为现在还不会jquery,就只看了原生js部分的内容。
一、promises相关概念
1,then()方法介绍
- 成功回调
- 失败回调
- 前进回调(规范没有要求包括前进回调的实现,但是很多都实现了)。
2,Promise对象状态
- Pending(进行中、未完成的)
- Resolved(已完成,又称 Fulfilled)
- Rejected(已失败)。
3,Promise/A规范图解
4,目前支持Promises/A规范的库
- Q:可以在NodeJS 以及浏览器上工作,与jQuery兼容,可以通过消息传递远程对象。
- RSVP.js:一个轻量级的库,它提供了组织异步代码的工具。
- when.js:体积小巧,使用方便。
- NodeJS的Promise
- jQuery 1.5:据说是基于“CommonJS Promises/A”规范
- WinJS / Windows 8 / Metro
二、使用promises的优势
1,解决回调地狱(Callback Hell)问题
firstAsync(function(data){ //处理得到的 data 数据 //.... secondAsync(function(data2){ //处理得到的 data2 数据 //.... thirdAsync(function(data3){ //处理得到的 data3 数据 //.... }); }); });
(2)如果使用 promises 的话,代码就会变得扁平且更可读了。前面提到 then 返回了一个 promise,因此我们可以将 then 的调用不停地串连起来。其中 then 返回的 promise 装载了由调用返回的值。
firstAsync() .then(function(data){ //处理得到的 data 数据 //.... return secondAsync(); }) .then(function(data2){ //处理得到的 data2 数据 //.... return thirdAsync(); }) .then(function(data3){ //处理得到的 data3 数据 //.... });
2,更好地进行错误捕获
(1)比如下面代码我们使用 setTimeout 模拟异步操作,在其中抛出了个异常。但由于异步回调中,回调函数的执行栈与原函数分离开,导致外部无法抓住异常。
function fetch(callback) { setTimeout(() => { throw Error('请求失败') }, 2000) } try { fetch(() => { console.log('请求处理') // 永远不会执行 }) } catch (error) { console.log('触发异常', error) // 永远不会执行 } // 程序崩溃 // Uncaught Error: 请求失败
function fetch(callback) { return new Promise((resolve, reject) => { setTimeout(() => { reject('请求失败'); }, 2000) }) } fetch() .then( function(data){ console.log('请求处理'); console.log(data); }, function(reason, data){ console.log('触发异常'); console.log(reason); } );
function fetch(callback) { return new Promise((resolve, reject) => { setTimeout(() => { reject('请求失败'); }, 2000) }) } fetch() .then( function(data){ console.log('请求处理'); console.log(data); } ) .catch(function(reason){ console.log('触发异常'); console.log(reason); });
第二部分:
JS - Promise使用详解2(ES6中的Promise)
2015年6月, ES2015(即 ECMAScript 6、ES6) 正式发布。其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一。
1,then()方法
//做饭 function cook(){ console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('做饭完毕!'); resolve('鸡蛋炒饭'); }, 1000); }); return p; } //吃饭 function eat(data){ console.log('开始吃饭:' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('吃饭完毕!'); resolve('一块碗和一双筷子'); }, 2000); }); return p; } function wash(data){ console.log('开始洗碗:' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('洗碗完毕!'); resolve('干净的碗筷'); }, 2000); }); return p; }
(2)使用 then 链式调用这三个方法:
cook() .then(function(data){ return eat(data); }) .then(function(data){ return wash(data); }) .then(function(data){ console.log(data); });
cook() .then(eat) .then(wash) .then(function(data){ console.log(data); });
(3)运行结果如下:
2,reject()方法
//做饭 function cook(){ console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('做饭失败!'); reject('烧焦的米饭'); }, 1000); }); return p; } //吃饭 function eat(data){ console.log('开始吃饭:' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('吃饭完毕!'); resolve('一块碗和一双筷子'); }, 2000); }); return p; } cook() .then(eat, function(data){ console.log(data + '没法吃!'); })
运行结果如下:
cook() .then(null, function(data){ console.log(data + '没法吃!'); })
3,catch()方法
(1)它可以和 then 的第二个参数一样,用来指定 reject 的回调
cook() .then(eat) .catch(function(data){ console.log(data + '没法吃!'); });
//做饭 function cook(){ console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('做饭完毕!'); resolve('鸡蛋炒饭'); }, 1000); }); return p; } //吃饭 function eat(data){ console.log('开始吃饭:' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('吃饭完毕!'); resolve('一块碗和一双筷子'); }, 2000); }); return p; } cook() .then(function(data){ throw new Error('米饭被打翻了!'); eat(data); }) .catch(function(data){ console.log(data); });
运行结果如下:
somePromise.then(function() { return a(); }).catch(TypeError, function(e) { //If a is defined, will end up here because //it is a type error to reference property of undefined }).catch(ReferenceError, function(e) { //Will end up here if a wasn't defined at all }).catch(function(e) { //Generic catch-the rest, error wasn't TypeError nor //ReferenceError });
4,all()方法
//切菜 function cutUp(){ console.log('开始切菜。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('切菜完毕!'); resolve('切好的菜'); }, 1000); }); return p; } //烧水 function boil(){ console.log('开始烧水。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('烧水完毕!'); resolve('烧好的水'); }, 1000); }); return p; } Promise .all([cutUp(), boil()]) .then(function(results){ console.log("准备工作完毕:"); console.log(results); });
5,race()方法
Promise .race([cutUp(), boil()]) .then(function(results){ console.log("准备工作完毕:"); console.log(results); });
//请求某个图片资源 function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p; } //延时函数,用于给请求计时 function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject('图片请求超时'); }, 5000); }); return p; } Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });
上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
- 如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。
- 如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。
原文链接:https://www.cnblogs.com/yangzhengier/p/10849162.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash