ES6 Promise用法详解

Posted 2021-01-09 mengbing

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方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：

 

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return ‘直接返回数据‘;  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

 

那么输出就变成了这样：

 

 

 

 

 

then 方法带有如下三个参数：

 

• 成功回调
• 失败回调
• 前进回调（规范没有要求包括前进回调的实现，但是很多都实现了）。

 

一个全新的 promise 对象从每个 then 的调用中返回。