promise 入门学习笔记

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