ES6之Promise

2019-02-01 本文已影响0人小碗吃不了

Promise用法讲解

避免回调地狱，解决异步多次回调问题
Promise构造函数接受两个个函数作为参数，该函数的两个参数分别是resolve和reject
resolve：将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用，并将异步操作的结果，作为参数传递出去,在then()的第一个函数中使用
reject：将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去，在catch()中使用
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
```
   runAsync.then(function(value) {
     // success
   }, function(error) {
     // failure
   });
```

有一层回调的实例

 function runAsync(){
     var p = new Promise(function(resolve, reject){
         //做一些异步操作
         setTimeout(function(){
             console.log('执行完成');
             resolve('随便什么数据');
         }, 2000);
     });
     return p;            
 }
  runAsync().then(function(data) {
     console.log(data);
     //后面可以用传过来的数据做些其他操作
 });

 ES6写法一:
 let runAsync = () => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
             console.log('执行完成');
             resolve('随便什么数据');
         }, 2000);
   });
 }
 
 runAsync().then((value) => {
   console.log(value);
 });
 ES6写法二:
 let runAsync = new Promise((resolve, reject) => {
     setTimeout(() => {
         console.log('执行完成');
         resolve('随便什么数据');
     }, 2000);
 });

 runAsync.then((value) => {
     console.log(value);
 });

有多个回调函数，链式操作的用法

  var runAsync1 = new Promise(function(resolve, reject){
      //做一些异步操作
      setTimeout(function(){
          console.log('异步任务1执行完成');
          resolve('随便什么数据1');
      }, 1000);
  });
     
  var runAsync2 = new Promise(function(resolve, reject){
      //做一些异步操作
      setTimeout(function(){
          console.log('异步任务2执行完成');
          resolve('随便什么数据2');
      }, 2000);
  });
     
  var runAsync3 = new Promise(function(resolve, reject){
      //做一些异步操作
      setTimeout(function(){
          console.log('异步任务3执行完成');
          resolve('随便什么数据3');
      }, 2000);
  });
  
  runAsync1
  .then(function(data){
      console.log(data);
      return runAsync2;
  })
  .then(function(data){
      console.log(data);
      return runAsync3;
  })
  .then(function(data){
      console.log(data);
  });

基础完整的promise实例，包含成功失败回调

  function getNumber(){
      var p = new Promise(function(resolve, reject){
          //做一些异步操作
          setTimeout(function(){
              var num = Math.ceil(Math.random()*10); //生成1-10的随机数
              if(num<=5){
                  resolve(num);
              }
              else{
                  reject('数字太大了');
              }
          }, 2000);
      });
      return p;            
  }

  //使用一
  getNumber()
  .then(
      function(data){
          console.log('resolved');
          console.log(data);
      }, 
      function(reason, data){
          console.log('rejected');
          console.log(reason);
      }
  );
  //使用二
  getNumber()
  .then(function(data){
      console.log('resolved');
      console.log(data);
      //即使在then使用是内部报错也会进入catch，不会在控制台报错
  })
  .catch(function(reason){
      console.log('rejected');
      console.log(reason);
  });

all的用法

  //适用预加载网页，初始化数据
  var runAsync1 = new Promise(function(resolve, reject) {
          //做一些异步操作
      setTimeout(function() {
          console.log('异步任务1执行完成');
          resolve('随便什么数据1');
      }, 1000);
  });

  var runAsync2 = new Promise(function(resolve, reject) {
      //做一些异步操作
      setTimeout(function() {
          console.log('异步任务2执行完成');
          resolve('随便什么数据2');
      }, 2000);
  });

  var runAsync3 = new Promise(function(resolve, reject) {
      //做一些异步操作
      setTimeout(function() {
          console.log('异步任务3执行完成');
          resolve('随便什么数据3');
      }, 2000);
  });
  
  Promise
      .all([runAsync1, runAsync2, runAsync3])
      .then(function(results) {
          console.log(results);
  });

race的用法

  //适用于请求设置超时时间，未加载成功时
  var runAsync1 = new Promise(function(resolve, reject) {
          //做一些异步操作
      setTimeout(function() {
          console.log('异步任务1执行完成');
          resolve('随便什么数据1');
      }, 1000);
  });

  var runAsync2 = new Promise(function(resolve, reject) {
      //做一些异步操作
      setTimeout(function() {
          console.log('异步任务2执行完成');
          resolve('随便什么数据2');
      }, 2000);
  });

  var runAsync3 = new Promise(function(resolve, reject) {
      //做一些异步操作
      setTimeout(function() {
          console.log('异步任务3执行完成');
          resolve('随便什么数据3');
      }, 2000);
  });
  Promise
  .race([runAsync1, runAsync2, runAsync3])
  .then(function(results){
      console.log(results);
  });

race和all的区别
不同点:all顺序执行，race谁快谁先执行
相同点:并行执行多个异步操作，并且在一个回调中处理所有的返回数据

前端小学生，仅个人总结，欢迎大佬指点，谢谢！

ES6之Promise

Promise用法讲解

猜你喜欢

热点阅读