1、Promise 是什么
1、异步的问题
按照用途来解释:
1、主要用于异步计算;
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果;
3、可以在对象之间,传递和操作promise,帮助我们处理队列;
2、异步产生的原因
1、JavaScript为检查表单而生,
2、创造他的首要目标是操作dom;
3、所以JavaScript的操作大多是异步的;
3、异步操作的常见语法:
1、事件侦听与响应
document.getElementById('start').addEventListener('click',start,false);
function start(){
// 响应事件,进行异步的操作
}
// jquery用.on()也是事件侦听
$('#start').on('click',start)
2、回调
// 比较常见的是Ajax
$.ajax('http://www.baidu.com', {
success: function(res){
// 这里就是回调函数
}
})
// 或者在页面加载后回调
$funcion(){
// 这里也是回调函数
}
浏览器中的JavaScript,异步事件以事件为主;回调主要出现在Ajax和fileAPI;nodeJS出现以后,对异步的依赖进一步加剧了,无阻塞高并发是nodeJS的招牌。异步操作是其保障。大量操作依赖回调函数。
稍有不慎就会掉入毁掉地狱;除此之外还有更深层次需求,假设需求:遍历目录,找出其中最大的文件;
1、异步回调的过程中没有办法去正常的使用 try catch{}
异步回调的四个问题:
1、嵌套层次很深,难以维护
2、无法zheng
3、无法正常的检索堆栈信息;(每次回调都是在系统层面的新的堆栈)
4、多个回调之间难以建立联系
2、promise简介
new Promise(
// 执行器 extutor
function(resolve, reject){
// 一段耗时很长的异步操作
resolve(); // 数据处理完成
reject(); // 数据处理出错
}).then(function A(){
// 成功,下一步
}, function B(){
// 失败,做相应处理
})
promise是一个代理对象,他和原来要进行的操作并没有关系,
它通过引入一个回调避免更多的回调;
promise状态
1、pending:(待定)初始状态
2、fulfilled: (实现)操作成功
3、rejected:(被否决)操作失败
当promise的状态发生变化,就会触发.then()里的响应函数处理后续步骤;
promise的状态一经改变,不会在变
简单的实例
new Promise(resolve=>{
setTimeout(()=>{
resolve('hello')
})
}).then(value=>{
console.log(value)
})
两部执行的范例
分两次,顺序执行
new Promise(resolve=>{
setTimeout(()=>{
resolve('hello')
})
}).then(value=>{
console.log(value)
return new Promise( resolve => {
setTimeout(()=>{
resolve('world')
}, 2000);
})
})
.then( value => {
console.log(value + 'value')
})
// 结果
hello
world world
加入一个promise完成了,在.then()会怎么样
//
let promise = new Promise(resolve=>{
setTimeout(()=>{
console.log('the promise fulfilled');
resolve('hello, world');
}, 1000);
});
setTimeout(()=>{
promise.then( value => {
console.log(value);
});
}, 3000);
// 结果
the promise fulfilled
hello, world
假如在.then() 的函数里面不返回新的promise 会怎样?
new Promise(resolve => { // 执行1
setTimeout(() => {
resolve('hello');
}, 1000);
})
.then(value => {
console.log(value); // 执行2
console.log('everyone');
(function() { // 执行5。1、这段代码中没有返回新的值,下面一行返回的promise实际是在这个函数中返回的,不是在then的响应函数中返回的,then返回的promise实例就没有等待里面的这个promise完成。2、一直在等待执行,等最后的then返回之后,再执行这个函数。3、没有进入promise队列中,但是进程仍然是登它执行完成后才算是完成。
return new Promise(resolve => { // 自己用自己的回调
setTimeout(() => {
console.log('mr');
resolve('marry');
}, 2000)
});
}());
return false; // 执行3。1、false会直接传递到下一步,成为下一个then的value
})
.then(value => { // 执行4
console.log(value + 'world'); // value = false;
})
.then()
.then() 接受两个函数作为参数,分别代表fulfilled和rejected
.then() 返回一个新的promise实例,所以可以链式调用
当前的promise状态改变时,.then()根据其最终状态,选择特定的状态响应函数执行
状态响应函数可以返回新的promise,或其他值
如果返回新的promise,那么下一级 .then()会在新promise状态改变之后执行
如果返回其他任何值,则会立刻执行下一级.then()
.then()里有.then()的情况
因为 .then()返回的还是promise实例
会等里面的.then()执行完,在执行外面的
对于我们来说,此时最好将其展开,会更好读。
console.log('start');
new Promise( resolve => {
console.log('Step 1');
setTimeout(() => {
resolve(100);
}, 1000);
})
.then( value => {
return new Promise(resolve => {
console.log('Step 1-1');
setTimeout(() => {
resolve(110);
}, 1000);
})
.then( value => {
console.log('Step 1-2');
return value;
})
.then( value => {
console.log('Step 1-3');
return value;
});
})
.then(value => {
console.log(value);
console.log('Step 2');
});
// 结果
step 1
step 1-1
step 1-2
step 1-3
110
step 2
问题:
原作者回答:
http://fex.baidu.com/blog/2015/07/we-have-a-problem-with-promises/
2