理解JS中的Promise_今日关注

通常JS代码是单线程的、按顺序执行的。当遇到网络数据传递、文件读写等耗时操作时，JS可以不必要等待生成结果，而是启用一个异步操作，继续执行后续的代码。 当耗时操作结束后，再回调其结果。例如：

console.log("coding beginning !!")  setTimeout(() => {      console.log(" a delay operation");  }, 1000);  console.log("coding ending")

代码的执行结果

coding beginning !!  coding ending  a delay operation                

上述运行结果，首先执行第一条语句，第条语句是一个异步操作，耗时1秒钟。JS解释器执行到这儿时不会等到这条语句执行完后再执行第三条 语句，而是并行的执行第三条语句。等到第二条耗时操作结束后，再回调结果，在本例中就是执行箭头函数()=>console.log(" a delay operation")。

(资料图片)

Promise

实际上Promse的规范是异步执行的，Promise是一个异步操作。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和 reject。

// 创建未完成的Promise对象  const promise = new Promise(function(resolve,reject){      // ...耗时的操作      if (/*成功条件*/){          resolve( "200 OK")      }else{          reject("fail");      }  }).then(function resolve(sucess){          }).catch(function reject(fail){          });  // ... 接下来的操作

Promise执行一个耗时操作，这个操作有两个函数分别是resolve和reject。因为这个操作耗时比较长，JS解释器不会阻塞在此处，而是执行接下来的 操作，异步地执行。当解释器等到Promise操作完成时，根据结果判断，成功就调用then的resolve函数，失败就调用catch的reject函数。

下面对Promse操作举例：

function test(resolve, reject) {      var timeOut = Math.random() * 2;      console.log("set timeout to: " + timeOut + " seconds.");      setTimeout(function () {          if (timeOut < 1) {              console.log("call resolve()...");              resolve("200 OK");  //成功时的回调函数          }else {              console.log("call reject()...");              reject("timeout in " + timeOut + " seconds."); //失败时的回调函数          }      }, timeOut * 1000);  }  var promise = new Promise(test).then(function resolve(success){      //成功时的回调函数体      console.log(success);  }).catch(function reject(fail){      //失败时的回调函数体      console.log(fail);  })

上述代码利用Promise模拟一个异步操作，如果延迟时间在1秒内回调then里的resolve函数，如果延迟时间大于1秒，回调catch里的reject函数。上述 的test、resolve、reject函数都可以用匿名函数或箭头函数取代。

var promise = new Promise((resovle,reject)=>{      console.log("set timeout to: " + timeOut + " seconds.");      setTimeout(function () {          if (timeOut < 1) {              console.log("call resolve()...");              resolve("200 OK");  //成功时的回调函数          }else {              console.log("call reject()...");              reject("timeout in " + timeOut + " seconds."); //失败时的回调函数          }      }, timeOut * 1000);  }).then((success)=>{      //成功时的回调函数体      console.log(success);  }).catch((fail)=>{      //失败时的回调函数体      console.log(fail);  })

Promise的几种状态

一个promise有三种状态，未开始执行前它的promise状态是pending状态，在异步执行过程中，如果结果是调用了函数参数中的第一个函数，那么它 的promise状态就是fulfilled状态，如果处理结果是调用了函数参数中的第二个函数，那么它的promise状态就是rejected状态。

var p = new Promise((resolve,reject)=>{      if (...){          resolve("success")  //假如最终结果如果调用了resolve函数，p的promise状态是fulfilled，而promise的结果是"success"      }else{          reject("fail") //假如最终结果如果调用了resolve函数，p的promise状态是rejected，而promise的结果是"fail"      }  })  p.then(rs=>console.log(rs));  //success  p的promise状体是fulfilled的，就执行本句。rs就是promise的结果  .catch(err=>console.log(err)); //fail p的promise状体是rejected的，就执行本句。rs就是promise的结果

Promise的静态方法all

多个promise如果其结果状态同为fulfilled，由其组成的promise的状体就是fulfilled,否则是rejected

var p1 = new Promise((resolve,reject)=>{      resolve("ok");  })  var p2 = new Promise((resolve,reject)=>{      reject("fail");  })  var p = Promise.all([p1,p2]).then(rs=>console.log(rs)).catch(rs=>console.log(rs));   //fail

Promise的静态方法any

多个promise如果其中一个最先结果状态为fulfilled，则返回fulfilled状态,否则返回rejected状态

const pErr = new Promise((resolve, reject) => {      reject("总是失败");    });        const pSlow = new Promise((resolve, reject) => {      setTimeout(resolve, 500, "最终完成");    });        const pFast = new Promise((resolve, reject) => {      setTimeout(resolve, 100, "很快完成");    });        Promise.any([pErr, pSlow, pFast]).then((value) => {      console.log(value);    })    //"很快完成"

Promise的静态方法race

多个promise最先生成的结果状态就是返回的状态。

const pSlow = new Promise((resolve, reject) => {      setTimeout(resolve, 500, "最终完成");  });    const pFastError = new Promise((resolve, reject) => {      setTimeout(reject, 100, "很快玩完");  });  Promise.race([pSlow, pFastError]).then((value) => {      console.log(value);  })  //"很快玩完"

文章同时发表在：码农编程网欢迎访问

本节重点

• 理解JS中的异步操作；
• Promise是一个异步操作，Promise对象在成功时回调then中的函数，而失败时调用catch中的函数。
• 了解Promise的all方法，any方法和race方法

关键词：