SoFunction
Updated on 2025-04-07

Compilation of Promise, async and await interview questions in ES6

Some basic Promise, async, and await interview questions encountered during the learning process.

Topic:

  • Examine the basics of Promise, async, await
  • Understanding of the Event Loop, macro tasks, and micro tasks of the inspection team

Knowledge points:

  • JS execution order: single thread, top-down, synchronous first, then asynchronous, micro-task first, then macro-task
  • new promise() -> (), trigger then
  • new promise((reject)=>{reject()}) -> (), trigger catch
  • Then and catch no throw new Error is equivalent to resolve
  • async function is equivalent to returning ()
  • The code behind await is asynchronous, micro-tasks; setTimeout is a macro-task
  • When initializing Promise, the internal code of the function will be executed immediately.

Code:

Test point 1:, execution order

().then(() => {  //Preferring to finding then		(1);
	}).catch(() => {
		(2);
	})
	// 1

().then(() => {  //Preferring to finding catch		(1);
	}).catch(() => {
		(2);
	})
	// 2

Test point 2: Then and catch do not throw new Error() is equivalent to resolve

().then(() => {
		(1);
	}).catch(() => {
		(2);
	}).then(() => {
		(3);
	})
	// 1 3

().then(() => {
		(1);
	}).catch(() => {
		(2);
	}).then(() => {
		(3);
	})
	// 2 3

().then(() => {
		(1);
	}).catch(() => {
		(2);
		throw new Error();
	}).then(() => {
		(3);
	})
	// 2 Report an error
().then(() => {
		(1);
	}).catch(() => {
		(2);
		throw new Error();
	}).then(() => {
		(3);
	}).catch(() => {
		(4);
	})
	// 2 4

Test point 3: async function -> equivalent to returning one

const res = async function fn() {
	return 100;
}
(res());  // Return a Promise object with resolved state Promise {<fulfilled>: 100}res().then(()=&gt;{
	(0);
}).catch(()=&gt;{
	(1);
})
// 0

(async function () {
	const a = fn();
	const b = await fn();
	(a);  // Promise {&lt;fulfilled&gt;: 100}
	(b);  // 100
})()

Test point 4: await code execution order

async function fn1() {
	("fn1 start");
	await fn2();
	("fn1 end");
}
async function fn2() {
	("fn2 start");
}
("start");
fn1();
("end");
/**
  * Print order:
  * start
  * fn1 start
  * fn2 start
  * end
  * fn1 end
  */

async function fn1() {
	("fn1 start");
	await fn2();
	("fn1 end");
	await fn3();
	("fn3 end");
}
async function fn2() {
	("fn2");
}
async function fn3() {
	("fn3");
}
("start");
fn1();
("end");
/**
  * Print order:
  * start
  * fn1 start
  * fn2
  * end
  * fn1 end
  * fn3
  * fn3 end
  */

Test point 5: Promise and setTimeout execution order

("start");
setTimeout(()=&gt;{
	("setTimeout")
});
().then(()=&gt;{
	("Promise")
})
("end")
/**
  * Print order:
  * start
  * end
  * Promise
  * setTimeout
  */

async function fn1() {
	("fn1 start");
	await fn2();
	("fn1 end");  // The code behind await is "micro task code"}
async function fn2() {
	("fn2");
}
("start");
setTimeout(()=&gt;{
	("setTimeout");  // Macro Task});
fn1();
("end");
/**
  * Print order:
  * start
  * fn1 start
  * fn2
  * end
  * fn1 end
  * setTimeout
  */

Appendix: Promise is used in combination with async await

Yesterday I saw a byte outsourcing interview question

 const list = [1, 2, 3];
    const square = num =&gt; {
        return new Promise((resolve, reject) =&gt; {
            setTimeout(() =&gt; {
                resolve(num * num);
            }, 1000);
        });
    }
    function test() {
        // Modify the code here        (async x =&gt; {
            const res = await square(x);
            (res);
        });
    }
    test()

What needs to be modified is to replace the array executed synchronously with asynchronous printing.

After testing, we can verify that the difference between forEach and for loops is that the for loop can modify the value of the array, and forEach cannot get the value of a specific item. The asynchronous here means that every time the array loop is executed, a test() method is executed.

const list = [1, 2, 3];
const square = num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num * num);
        }, 1000);
    });
}
 function test() {
  for(let x of list) {
    var res = await square(x)
    (res)
  }
}
test()

Summarize

This is the article about the Promise, async and await interview questions in ES6. For more relevant ES6 Promise, async and await interview questions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!