最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这样能够按顺序,每隔两秒输出每个异步回调中的内容,在runAsync2
中传给resolve
的数据,能在接下来的then
方法中拿到。运行结果如下:
猜猜runAsync1
、runAsync2
、runAsync3
这三个函数都是如何定义的?没错,就是下面这样:
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}
在then
方法中,也可以直接return
数据而不是Promise
对象,在后面的then
中就可以接收到数据,比如我们把上面的代码修改成这样:
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回数据'; //这里直接返回数据
})
.then(function(data){
console.log(data);
});
那么输出就变成了这样:
三、reject 用法
到这里,你应该对Promise
有了最基本了解。那么我们接着来看看ES6
的Promise
还有哪些功能。上面只是使用了resolve
,还没用reject
,它是做什么的呢?
事实上,我们前面的例子都是只有“执行成功”的回调,还没有“失败”的情况,reject
的作用就是把Promise
的状态置为rejected
,这样我们在then
中就能捕捉到,然后执行“失败”情况的回调。看下面的代码:
function getNumber(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()\*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
}
getNumber()
.then(
function(data){
console.log('resolved');
console.log(data);
},
function(reason, data){
console.log('rejected');
console.log(reason);
}
);
getNumber
函数用来异步获取一个数字,2秒后执行完成,如果数字小于等于5,我们认为是“成功”了,调用resolve
修改Promise
的状态。否则我们认为是“失败”了,调用reject
并传递一个参数,作为失败的原因。
运行getNumber
并且在then
中传了两个参数,第一个对应resolve
的回调,第二个对应reject
的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码,你会随机得到下面两种结果:
四、catch 用法
我们知道Promise
对象除了then
方法,还有一个catch
方法,它是做什么用的呢?其实它和then
的第二个参数一样,用来指定reject
的回调,用法是这样:
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
效果和写在then
的第二个参数里面一样。不过它还有另外一个作用:在执行resolve
回调(也就是上面then
中第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js
,而是会进到这个catch
方法中。请看下面的代码:
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
在resolve
回调中,我们console.log(somedata);
而somedata这个变量是没有被定义的。如果我们不用Promise
,代码运行到这里就直接在控制台报错了,不往下运行了。但是在这里,会得到这样的结果:
也就是说进到catch
方法里面去了,而且把错误原因传到了reason
参数中。即便是有错误的代码也不会报错了,这与我们的try/catch
语句有相同的功能。
五、all 用法
Promise
的all
方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数,看下面的例子:
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
用Promise.all
来执行,all
接收一个数组参数,里面的值最终都算返回Promise
对象。这样,三个异步操作并行执行,等到它们都执行完后才会进到then
里面。
那么,三个异步操作返回的数据哪里去了呢?都在then
里面,all
会把所有异步操作结果放进一个数组中传给then
,就是上面的results。所以上面代码的输出结果就是:
有了all
,就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据,是不是很酷?有一个场景是很适合用这个的,对于游戏类素材比较多的应用,打开网页时,预加载需要用到的各种资源如:图片、flash以及各种静态文件。待所有资源都加载完后,我们再进行页面初始化。
六、race 用法
all
方法的执行效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是race
方法,这个词本来就有赛跑的含义。race
用法与all
一样,把上面runAsync1的延时改为1秒来看一下:
Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
这三个异步操作同样是并行执行的。结果你应该可以猜到,1秒后runAsync1已经执行完了,此时then
里面的就执行了。结果如下:
你猜对了吗?不完全,是吧。在then
里面的回调开始执行时,runAsync2()和runAsync3()并没有停止,仍旧再执行。于是再过1秒后,输出了他们结束的标志。 这个race
有什么用呢?使用场景还是很多的,比如我们可以用race
给某个异步请求设置超时时间,并且在超时后执行相应操作,代码如下:
//请求某个图片资源
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函数会异步请求一张图片,把地址写为"xxxxxx",所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。把这两个返回Promise
对象的函数放进race
,于是他俩就会赛跑,如果5秒之内图片请求成功了,那么便进入then
方法,执行正常流程。如果5秒钟图片还未成功返回,那么timeout
就跑赢了,则进入catch
,报出“图片请求超时”的信息。运行结果如下:
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。