什么是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*/