ES6 promise的用法

Posted 2022-09-30 dyy-dida

function runAsync()
    var p = new Promise(function(resolve, reject)
        //做一些异步操作
        setTimeout(function()
            console.log(‘执行完成‘);
            resolve(‘随便什么数据‘);
        , 2000);
    );
    return p;            

runAsync()

　　接下来调用runAsync()方法

runAsync().then((res)=>
    console.log(res); // res:随便什么数据
)

2.链式操作法

runAsync1()
.then(function(data)
    console.log(data);
    return runAsync2();
)
.then(function(data)
    console.log(data);
    return runAsync3();
)
.then(function(data)
    console.log(data);
);

　　函数写法

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;            

function runAsync3()
    var p = new Promise(function(resolve, reject)
        //做一些异步操作
        setTimeout(function()
            console.log(‘异步任务3执行完成‘);
            resolve(‘随便什么数据3‘);
        , 2000);
    );
    return p;            

3.all的用法 ：提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results)
    console.log(results);
);

　　用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。

 

 

4.race的用法 ：all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是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函数会异步请求一张图片，我把地址写为”xxxxxx”，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。