浏览器事件循环-Promise面试题目

 承接前面的“浏览器事件循环”文章，收集和整理了一些题目，难度依次提升，有兴趣的朋友可以看一下。

避免干扰思考，不提供答案。

如果想知道正确答案，请自行运行代码。

1.下面代码的输出结果是什么？

const promise = new Promise((resolve) => {
    console.log('初始化');
    resolve(42);
});
promise.then((value) => {
    console.log(`结果: ${value}`);
});
console.log('结束');

2.下面代码的输出结果是什么？

const p1 = new Promise((resolve) => {
    setTimeout(() => {
        resolve('p1完成');
    }, 100);
});
const p2 = new Promise((resolve) => {
    setTimeout(() => {
        resolve('p2完成');
    }, 200);
});
Promise.all([p1, p2]).then((results) => {
    console.log(results);
});
console.log('主线程');

3.下面代码的输出结果是什么？

function delay(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}
async function main() {
    console.log('开始');
    await delay(1000);
    console.log('等待1秒后');
    await delay(500);
    console.log('又等待0.5秒后');
}
main();
console.log('程序继续');

4.下面代码的输出结果是什么？

const p1 = new Promise((resolve) => {
    setTimeout(() => {
        resolve(1);
    }, 100);
});
const p2 = new Promise((resolve) => {
    setTimeout(() => {
        resolve(2);
    }, 200);
});
const p3 = new Promise((resolve) => {
    setTimeout(() => {
        resolve(3);
    }, 300);
});
Promise.race([p1, p2, p3]).then((value) => {
    console.log(value);
});

5.下面代码的输出结果是什么？

async function asyncFunc() {
    try {
        const result = await Promise.reject('出错了');
        console.log(result);
    } catch (error) {
        console.log(`捕获错误: ${error}`);
    }
    console.log('后续操作');
}
asyncFunc();

6.下面代码的输出结果是什么？

function asyncTask() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('任务完成');
        }, 500);
    });
}
async function main() {
    let result = '初始值';
    result = await asyncTask();
    console.log(result);
    result = await asyncTask();
    console.log(result);
    return result;
}
main().then((finalResult) => {
    console.log(`最终结果: ${finalResult}`);
});

7.下面代码的输出结果是什么？

const p1 = new Promise((resolve) => {
    setTimeout(() => {
        resolve(1);
    }, 100);
});
const p2 = p1.then((value) => {
    return value * 2;
});
const p3 = p2.then((value) => {
    return value + 3;
});
p3.then((finalValue) => {
    console.log(finalValue);
});

8.下面代码的输出结果是什么？

async function outer() {
    console.log('outer开始');
    try {
        await (async () => {
            throw new Error('内部错误');
        })();
    } catch (error) {
        console.log(`outer捕获错误: ${error.message}`);
    }
    console.log('outer结束');
}
outer();

9.下面代码的输出结果是什么？

function asyncOp1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('操作1完成');
        }, 200);
    });
}
function asyncOp2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('操作2完成');
        }, 300);
    });
}
async function main() {
    const [result1, result2] = await Promise.allSettled([asyncOp1(), asyncOp2()]);
    console.log(result1.status);
    console.log(result2.status);
    if (result1.status === 'fulfilled') {
        console.log(result1.value);
    }
    if (result2.status === 'fulfilled') {
        console.log(result2.value);
    }
}
main();

10.下面代码的输出结果是什么？

async function recursiveAsync(n) {
    if (n <= 0) {
        return '结束';
    }
    console.log(`递归层级: ${n}`);
    await recursiveAsync(n - 1);
    console.log(`返回层级: ${n}`);
    return `层级${n}完成`;
}
recursiveAsync(3).then((finalResult) => {
    console.log(finalResult);
});