promise学习总结

Posted 2020-12-29 lchenglong

什么是Promise

Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败

当Promise的状态又pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，就无法再次改变状态，这也是它名字promise-承诺的由来

 

直接上案例了，在案例中理解：

最简单的promise

new Promise(resolve =>{
  setTimeout(()=>{
    resolve(‘hello‘)
  },2000);
}).then(value=>{
  console.log(value + ‘world‘);
})

 

分两次，顺序执行

console.log(‘start‘);
new Promise(resolve => {
  setTimeout(() => {
    resolve(‘hello‘);
  }, 2000);
})
  .then(value => {
    console.log(value);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(‘world‘);
      }, 2000)
    });
  })
  .then(value => {
    console.log(value + ‘ world‘);
  });

  // 结果
    // start
    // hello (2s)
   // worldworld (4s)

 

假如一个promise已经完成，再.then()会怎样

console.log(‘start‘);

let promise = new Promise(resolve=>{
  setTimeout(()=>{
    console.log(‘this promise fullfilled‘);
    resolve(‘hello,world‘)
  },2000);
});

setTimeout(()=>{
  promise.then(value=>{
    console.log(value);
  })
},4000)

// 结果
  // start
  // this promise fullfilled  （2s）
  // hello,world    (4s)

  //在任何地方生成一个promise后，可以存为一个变量，不管该promise有完成，都会依次根据队列执行

 

假如在 .then() 的函数里面不返回新的 Promise， 会怎样？

console.log(‘start‘);
new Promise(resolve => {
  setTimeout(() => {
    resolve(‘hello‘)
  }, 2000);
})
  .then(value => {
    console.log(value);
    (function () {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log(‘第二个promise‘);
          resolve(‘Merry‘)
        }, 2000);
      })
    }());
    return false;
  })
  .then(value => {
    console.log(value + ‘world‘);
  })


  // 结果
    // start 
    // hello  （2s）
    // falseworld (2s)
    // 第二个promise (4s)

      //.then() 的函数里面不返回新的 Promise,会默认执行下一个环节，即使你直接返回了false，也会执行

  // 备注
    // 匿名函数，(function(){})();立即执行,主要利用函数内的变量作用域，避免产生全局变量，影响整体页面环境，增加代码的兼容性。

 

.then()接受两个函数作为参数，分别代表fulfilled和rejected

.then()返回一个新的promise实例，所以它可以链式调用

状态相应函数可以返回新的promise或其他值，如果返回新的Promise，那么下一级.then()会在新的Promise状态改变后执行

！！如果返回其他任何值，则会立即执行下一级.then()

.then()里面有.then()的情况

会等里面的.then()执行完，再执行外面的。最好不要这样写，依次展开效果一样

new Promise(resolve => {
  console.log(‘start‘);
  setTimeout(() => {
    console.log(‘1‘);
    resolve(‘1‘);
  }, 1000)
})
  .then(value => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(‘1-1‘);
        resolve(‘1-1‘);
      }, 1000)
    })
      .then(value => {
        console.log(‘1-2‘);
        return value;
      })
      .then(value => {
        console.log(‘1-3‘);
        return value;
      })
  })
  .then(value => {
    console.log(‘2‘);
  })

/*
  结果：
    start
    1
    1-1
    1-2
    1-3
    2
*/

 

错误处理两种做法：

Promise会自动捕获内部异常，并交给rejected响应函数处理

1.reject(‘错误信息‘).then(null,message=>{})

2.throw new Error(‘错误信息‘).catch(message=>{})

推荐时候用第二种，更加清晰，并且可以捕获前面的错误

console.log(‘go‘);
new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(‘bye‘)
    // throw new Error(‘bye‘);
  },1000)
})
  .then(value=>{
    console.log(value+‘world‘);
  })
  .catch(error=>{
    console.log(‘error:‘,error);
  })

  // go
  // error: bye

 

.catch() + .then()连用

 .catch()也会返回一个promise实例

 建议在所有队列后面都加上.catch()

console.log(‘go‘);
new Promise(resolve=>{
  setTimeout(() => {
    resolve(‘‘);
  }, 1000);
})
  .then(()=>{
    console.log(‘start‘)
    throw new Error(‘test error‘);   
  })
  .catch((err)=>{
    console.log(‘I catch:‘+ err);
    
    // 下面一行代码的注释讲引发不同的走向
    throw new Error(‘another error‘);  
  })
  .then(()=>{
    console.log(‘arrive here‘);
  })
  .then(()=>{
    console.log(‘and here‘);
  })
  .catch((err)=>{
    console.log(‘I catch:‘+ err);
  })

/*
  结果一：
    go
    start
    I catch:Error: test error
    arrive here
    and here
  结果二：
    go
    start
    I catch:Error: test error
    I catch:Error: another error

*/ 

 

Promise.all([p1,p2,p3,...]); 批量同时执行多个promise实例，包装成一个新的promise实例，返回的是所有promise结果组成的数组

console.log(‘go‘);
Promise.all([1,2,3])
.then(all=>{
  console.log(‘1:‘,all);
  return Promise.all([function(){
    console.log(‘ooxx‘);
  },‘xxoo‘,false])
})
.then(all =>{
  console.log(‘2:‘,all);
  let p1 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P1‘);
    }, 1000);
  });
  let p2 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P2‘);
    }, 3000);
  });
  return Promise.all([p1,p2]);
})
.then(all =>{
  console.log(‘3:‘,all);
  let p1 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P1‘);
    }, 1000);
  });
  let p2 = new Promise((resolve,reject)=>{
    setTimeout(() => {
      reject(‘I`m P2‘);
    }, 1000);
  });
  let p3 = new Promise((resolve,reject)=>{
    setTimeout(() => {
      reject(‘I`m P3‘);
    }, 1500);
  });
  return Promise.all([p1,p2,p3]);
})
.then(all=>{
  console.log(‘all:‘,all);
})
.catch(err=>{
  console.log(‘catch‘,err);
  
})

/*
  结果：
  go 
  1: [ 1, 2, 3 ] 
  2: [ [Function], ‘xxoo‘, false ]
  3: [ ‘I`m P1‘, ‘I`m P2‘ ]   
  catch I`m P2
*/