ES6中的promise

315 阅读4分钟

在es6中,promise是一个构造函数,这个构造函数有all,reject,resolve方法,这个构造函数的原型上有then,catch方法,通过promise new出来的对象都会有then,catch方法;new 出来的promise对象会立即执行,所以我们可以将它封装在一个函数中,需要使用的时候就调用,接下来我们就模拟一下异步操作来使用一下:

function promiseTest(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise测试');
      resolve('resolve数据')
    },2000)
  });
  return test;
}
// promiseTest();
promiseTest().then(function(data){
  console.log(data)
})

使用时我们可以看出,promise构造函数中会有一个函数作为参数,这个函数又会有resolve,reject两个参数;resolve是异步执行成功的时候调用的回调函数,而reject是失败是调用的函数;then()方法可以接收两个函数作为参数,一个函数可以接收resolve()传过来的参数,可以是数据,也可以是函数。一个函数接收reject函数执行时传过来的参数

function promiseTest(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise测试');
      let num = Math.floor(Math.random()*10);
      if(num > 5){
        //模拟成功
        resolve(num);
      } else {
        //模拟失败
        reject('数字小于5,获取失败')
      }
    },2000)
  });
  return test;
}
// promiseTest();
promiseTest().then(
  function(data){
    console.log(data) //num的值  (num大于5时)
  },
  function(reson,data){
    console.log(reson); //数字小于5,获取失败 (num小于5时)
    console.log(data) //undefined
  }
)
function promiseTest(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise测试');
      let num = Math.floor(Math.random()*10);
      if(num > 5){
        resolve(
          function getNum(){
            let a = num;
            return a;
          }
        );
      } else {
        reject('数字小于5,获取失败')
      }
    },2000)
  });
  return test;
}
// promiseTest();
promiseTest().then(
  function(data){
    // console.log(data)
    let getNum = data;
    console.log(getNum())
  },
  function(reson,data){
    console.log(reson);
    console.log(data)
  }
)

then()方法的链式操作,每一次调用then方法时接收的是上一个then方法的返回值,返回的如果是一个promise对象,则和直接调用then方法没有区别,如果上一个then方法没有返回值,调用的then方法返回的是undefince,上一个then方法的返回的是一个数值或者函数,那么then方法就收的就是这个值或者函数

function promiseTest1(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise1测试');
      resolve('resolve1数据')
    },2000)
  });
  return test;
}
function promiseTest2(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise2测试');
      resolve('resolve2数据')
    },2000)
  });
  return test;
}
function promiseTest3(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise3测试');
      resolve('resolve3数据')
    },2000)
  });
  return test;
}
// promiseTest();
promiseTest1().then(function(data){
  console.log(data);
  return promiseTest2();
}).then(function(data){
    console.log(data);
    return 'aaa';
}).then(function(data){
  console.log(data);
}).then(function(data){
  console.log(data);
})

catch()方法的使用,catch()方法和then()方法的第二个参数相差不大,都是用来处理reject()方法的,如果then()的第二个参数给定了一个函数,那么就不会进入catch()方法,then()没有设置第二个参数时,失败的话就会调用catch()方法

function promiseTest(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise测试');
      let num = Math.floor(Math.random()*10);
      if(num > 5){
        resolve(
          function getNum(){
            let a = num;
            return a;
          }
        );
      } else {
        reject('数字小于5,获取失败')
      }
    },2000)
  });
  return test;
}
// promiseTest();
promiseTest().then(
  function(data){
    // console.log(data)
    let getNum = data;
    console.log(getNum())
  }
  // ,
  // function(reson,data){
  //   console.log(reson);
  //   console.log(data)
  // }
).catch(
  function(reson){
    console.log(reson);
  }
)

all()方法的使用,Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调,获取的结果会存入一个数组最为参数传给then方法,并且只有在all()方法中的异步请求都执行完成后才会进入then方法中

function promiseTest1(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise1测试');
      resolve('resolve1数据')
    },2000)
  });
  return test;
}
function promiseTest2(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise2测试');
      resolve('resolve2数据')
    },2000)
  });
  return test;
}
function promiseTest3(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise3测试');
      resolve('resolve3数据')
    },2000)
  });
  return test;
}
function aaa(){
  console.log(111)
}
// promiseTest();
Promise.all(
  [promiseTest1(),promiseTest2(),promiseTest3()]
).then(function(result){
  console.log(result)
})

race()方法的使用,race方法会将执行最快的那个异步请求的结果返回,且不会终止其他请求的执行,但是其他请求执行不会改变then方法的结果,可以运用在判断图片加载时间是否超时上

function promiseTest1(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise1测试');
      resolve('resolve1数据')
    },2000)
  });
  return test;
}
function promiseTest2(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise2测试');
      resolve('resolve2数据')
    },1000)
  });
  return test;
}
function promiseTest3(){
  let test =  new Promise(function(resolve,reject){
    //异步操作
    setTimeout(function(){
      console.log('promise3测试');
      resolve('resolve3数据')
    },3000)
  });
  return test;
}
function aaa(){
  console.log(111)
}
// promiseTest();
Promise.race(
  [promiseTest1(),promiseTest2(),promiseTest3()]
).then(function(result){
  console.log(result)
})

//输出结果为
// promise2测试
// resolve2数据
// promise1测试
// promise3测试