上一篇博客javascript动态加载script方式引用百度地图api,uncaught referenceerror: bmap is not defined
这篇文章中我接触到一个新的单词:promise,借此来记录一下它,引用来源:js - promise使用详解--摘抄笔记
因为现在还不会jquery,就只看了原生js部分的内容。
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 数据 //.... });
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); });
第二部分:
2015年6月, es2015(即 ecmascript 6、es6) 正式发布。其中 promise 被列为正式规范,成为 es6 中最重要的特性之一。
//做饭 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)运行结果如下:
//做饭 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 + '没法吃!'); })
(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 });
//切菜 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); });
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 中赛跑。
如对本文有疑问, 点击进行留言回复!!
JavaScript 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论