promise 入门学习笔记

  • Post author:
  • Post category:其他


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



版权声明:本文为M612a34原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。