欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 Promise用法详解

程序员文章站 2022-06-19 23:35:01
What is Promise? Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数、执行失败后的回调函数) 运行代码,2秒后输出“执行完成”。注意,这里只是new了一个对象,并没有调用它,所以我们 ......

what is promise?

promise是一个构造函数,接受一个参数(function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数、执行失败后的回调函数)

var p = new promise(function(resolve, reject){
    settimeout(function(){
        console.log('执行完成');
        resolve('成功了!');
    }, 2000);
});

运行代码,2秒后输出“执行完成”。注意,这里只是new了一个对象,并没有调用它,所以我们用promise时是包在一个函数中的,如下:

function runasync(){
  var p = new promise(function(resolve, reject){
   settimeout(function(){
          console.log('执行完成');
          resolve('成功了!');
      }, 2000);
  });
  return p;
}
runasync();

 

pormise的优势:

1. 解决回调函数层层嵌套的问题:

(1) 有时我们需要进行一些有依赖关系的异步操作,比如有多个请求,后一个请求需要上一次请求的返回结果,过去常规的做法是使用callback层层嵌套,这样的代码可读性和维护性都很差,比如:

 

firstasync(function(data){
    //处理得到的 data 数据
    //....
    secondasync(function(data2){
        //处理得到的 data2 数据
        //....
        thirdasync(function(data3){
              //处理得到的 data3 数据
              //....
        });
    });
});

 

(2) 使用promise的话,代码就会变得扁平化,可读性更高了。比如:

firstasync()
.then(function(data){
    //处理得到的 data 数据
    //....
    return secondasync();
})
.then(function(data2){
    //处理得到的 data2 数据
    //....
    return thirdasync();
})
.then(function(data3){
    //处理得到的 data3 数据
    //....
});

 

2.  更好的进行错误捕捉:

(1) 使用callback嵌套,可能会造成无法捕捉异常、异常捕捉不可控等问题。比如:

 

function fetch(callback) {
    settimeout(() => {
        throw error('请求失败')
    }, 2000)
}
 
try {
    fetch(() => {
        console.log('请求处理') // 永远不会执行
    })
} catch (error) {
    console.log('触发异常', error) // 永远不会执行
}
 
// 程序崩溃
// uncaught error: 请求失败

 

(2) 使用promise的话,通过reject方法吧promise的状态置为rejected,这样我们就可以在then方法中捕捉到,并且执行“失败”情况的回调。比如:

function fetch(callback) {
    return new promise((resolve, reject) => {
        settimeout(() => {
             reject('请求失败');
        }, 2000)
    })
}
 
fetch()
.then(
    function(data){
        console.log('请求处理成功!');
        console.log(data);
    },
    function(reason, data){
        console.log('触发异常!');
        console.log(reason);
    }
);

同时,也可以在catch方法中处理reject回调。比如:

 

function fetch(callback) {
    return new promise((resolve, reject) => {
        settimeout(() => {
             reject('请求失败');
        }, 2000)
    })
}
 
fetch()
.then(
    function(data){
        console.log('请求处理成功!');
        console.log(data);
    }
)
.catch(function(reason){
    console.log('触发异常!');
    console.log(reason);
});

 

 

在上面的代码中我们用到了promise的then、catch方法,下面我们再来介绍一下promise中常用的一些方法。

then方法:

then方法就是将原来使用callback回调的写法分离出来,在异步操作完成之后,使用链式调用的方法执行回调函数。

then方法包含三个参数:

  • 成功回调
  • 失败回调
  • 前进回调(规范没有要求实现前进回调)

返回一个promise对象,也可以直接返回一个数据。比如:

ES6 Promise用法详解
function runasync1(){
    var p = new promise(function(resolve, reject){
        //做一些异步操作
        settimeout(function(){
            console.log('异步任务1执行完成');
            resolve('成功了1');
        }, 1000);
    });
    return p;            
}

function runasync2(){
    var p = new promise(function(resolve, reject){
        //做一些异步操作
        settimeout(function(){
            console.log('异步任务2执行完成');
            resolve('成功了2');
        }, 2000);
    });
    return p;            
}

runasync1()
.then(function(data){
    console.log(data);
    return runasync2();
})
.then(function(data){
    console.log(data);
    return '直接返回数据';  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

/*
输出:
    异步任务1执行完成
    成功了1
    异步任务2执行完成
    成功了2
    直接返回数据
*/
view code

 

resolve方法:

该方法把promise的状态置为完成态(resolved),这是then方法就能捕捉到变化,并执行“成功”回调的方法。比如:

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('做饭完毕!');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭:' + data);
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('吃饭完毕!');
            resolve('完成!');
        }, 2000);
    });
    return p;
}

使用then链式调用:

cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    console.log(data);
});

//可以简写
cook()
.then(eat)
.then(function(data){
    console.log(data);
});

/*
输出:
    开始做饭。
    做饭完毕!
    开始吃饭:鸡蛋炒饭
    吃饭完毕
    完成!
*/

 

reject方法:

该方法把promise的状态置为已失败(rejected),then方法捕捉到变化,并执行“失败”回调的方法。比如:

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('做饭失败!');
            reject('烧焦的米饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭:' + data);
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('吃饭完毕!');
            resolve('完成!');
        }, 2000);
    });
    return p;
}
 
cook()
.then(eat, function(data){
  console.log(data + '没法吃!');
})

/*
输出:
    开始做饭。
    做饭失败!
    烧焦的米饭没法吃!
*/

 

catch方法:

1. 和then方法的第二个参数reject方法用法一致,执行“失败”回调方法

 

cook()
.then(eat)
.catch(function(data){
    console.log(data + '没法吃!');
});

 

2. 当执行第一个参数resolve方法时,如果抛出了异常(代码错误),js不会卡死,而进入到catch方法中

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('做饭完毕!');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭:' + data);
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('吃饭完毕!');
            resolve('完成!');
        }, 2000);
    });
    return p;
}
 
cook()
.then(function(data){
    throw new error('米饭被打翻了!');
    eat(data);
})
.catch(function(data){
    console.log(data);
});

/*
输出:
    开始做饭。
    做饭完毕!
    error:米饭被打翻了!
        at:xxx.html
*/
还可以添加多个 catch,实现更加精准的异常捕获。比如:
somepromise.then(function() {
    return a();
}).catch(typeerror, function(e) {
    //if a is defined, will end up here because
    //it is a type error to reference property of undefined
}).catch(referenceerror, function(e) {
    //will end up here if a wasn't defined at all
}).catch(function(e) {
    //generic catch-the rest, error wasn't typeerror nor
    //referenceerror
});

 

all方法:

该方法提供了并行执行异步操作的能力,在所有异步操作执行完毕之后才会进入到then方法中执行回调方法。

all方法接受一个数组,里面的值最终都返回一个promise对象。all会把所有的异步操作的结果放到一个数组中传递给then方法。比如//切菜

function cutup(){
    console.log('开始切菜。');
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('切菜完毕!');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}
 
//烧水
function boil(){
    console.log('开始烧水。');
    var p = new promise(function(resolve, reject){        //做一些异步操作
        settimeout(function(){
            console.log('烧水完毕!');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}
 
promise
.all([cutup(), boil()])
.then(function(results){
    console.log("准备工作完毕:");
    console.log(results);
});

/*
输出:
    开始切菜。
开始烧水。 切菜完毕! 烧水完毕! 准备工作完毕: ["切好的菜","烧好的水"] */

 

race方法:

race按字面意思是,竞赛/赛跑。与all不同的是,所有的异步操作中只要有一个异步操作完成,就立即执行then回调方法。比如:

promise
.race([cutup(), boil()])
.then(function(results){
    console.log("准备工作完毕:");
    console.log(results);
});

/*
输出:
    开始切菜。
    开始烧水。
    切菜完毕!
    准备工作完毕:
    切好的菜
    烧水完毕!
*/

race 使用场景很多。比如我们可以用 race 给某个异步请求设置超时时间,并且在超时后执行相应的操作。比如:

//请求某个图片资源
function requestimg(){
    var p = new promise(function(resolve, reject){
      var img = new image();
      img.onload = function(){
         resolve(img);
      }
      img.src = 'xxxxxx';
    });
    return p;
}
 
//延时函数,用于给请求计时
function timeout(){
    var p = new promise(function(resolve, reject){
        settimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}
 
promise
.race([requestimg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

上面代码 requestimg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑,结果如下:

  • 如果 5 秒内图片请求成功,那么便进入 then 方法,执行正常的流程。
  • 如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。