ES6之Promise

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谁快谁先执行

• 相同点:并行执行多个异步操作，并且在一个回调中处理所有的返回数据

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