A few basic questions for Promise

const promise1 = new Promise((resolve, reject) => { console.log('promise1') }) console.log('1', promise1); Const fn = () => (new Promise((resolve, reject)) => {console.log(1); resolve('success') })) fn().then(res => { console.log(res) }) console.log('start')Copy the code
const promise = new Promise((resolve, reject) => { console.log(1); resolve('success') console.log(2); }); promise.then(() => { console.log(3); }); console.log(4); Resolve ('success'); resolve(' resolved ')Copy the code
const promise = new Promise((resolve, reject) = > {
  console.log(1);
  console.log(2);
});
promise.then(() = > {
  console.log(3);
});
console.log(4);

4/1/2

3.ifPromiseThe code in promise.then() is not executed without resolve or reject, it is only executed after the state has changed!Copy the code
new Promise((resolve, reject) => { return resolve(1); // The following statement does not execute console.log(2); }) // Return a Promise object with the resolved value 4. When resolve or no THEN is present, a promise object is returned and the resolve argument is passedCopy the code
Promise.resolve(1).then(2).then(promise.resolve (3)).then(console.log) // Prints 1 and returns a PromiseResult as undefined  Promise.resolve(1) .then(function(){return 2}) .then(Promise.resolve(3)) .then(console.log) // 2 Promise.resolve(1) .then(function(){return promise.resolve (3)}).then(console.log) // 5 The argument to is expected to be a function. Passing in a non-function will result in value penetration. The chain of Promise methods passes values through returns, without which they are just separate tasksCopy the code
const promise1 = new Promise((resolve, reject) => { console.log('promise1') resolve('resolve1') }) const promise2 = promise1.then(res => { console.log(res) }) console.log('1', promise1); console.log('2', promise2); /* 'promise1' '1' Promise{<resolved>: 'resolve1'} '2' Promise{<pending>} 'resolve1' */ 6Copy the code

Promise in combination with setTimeout

const promise = new Promise((resolve, reject) => { console.log(1); setTimeout(() => { console.log("timerStart"); resolve("success"); console.log("timerEnd"); }, 0); console.log(2); }); promise.then((res) => { console.log(res); }); console.log(4); //1 2 4 timerStart timerEnd success 7. TimerStart timerEnd is the synchronization code inside the timer, resolve("success") saves the value, and then the microtaskCopy the code
Example 1: setTimeout(() => {console.log('timer1'); setTimeout(() => { console.log('timer3') }, 0) }, 0) setTimeout(() => { console.log('timer2') }, 0) console.log('start') // start timer1 timer2 timer3 Example 2: setTimeout(() => {console.log('timer1'); Promise.resolve().then(() => { console.log('promise') }) }, 0) setTimeout(() => { console.log('timer2') }, 0) console.log('start') //start timer1 promise timer2 8. One is a timer, the other is a pomise.then; A timer is a macro task that will be added to the next round of macro tasks, and a Pomise. Then is a micro task that will be added to the round of micro tasksCopy the code

Then, catch, and finally in promises

const promise = new Promise((resolve, reject) => { resolve("success1"); reject("error"); resolve("success2"); }); promise .then(res => { console.log("then: ", res); }).catch(err => { console.log("catch: ", err); }) // then: success1 9. Resolve or reject in the constructor is valid only on the first execution. Once a Promise status changes, it cannot be changedCopy the code
const promise = new Promise((resolve, reject) => { reject("error"); resolve("success2"); }); promise .then(res => { console.log("then1: ", res); }).then(res => { console.log("then2: ", res); }).catch(err => { console.log("catch: ", err); }).then(res => { console.log("then3: ", res); }) //catch:error then3: undefined 10. As mentioned in 9, the current Promise state is changed to Rejected and resolve will not be executed, so catch:error can be obtained. As for then3: undefined is printed because.then and.catch both return a new Promise, and since this Promise returns no value, undefined is printedCopy the code
Promise.resolve(1) .then(res => { console.log(res); return 2; }) .catch(err => { console.log(err); return 3; }) .then(res => { console.log(res); }); Resolve (2); return promise.resolve (2); return promise.resolve (2); Resolve (1) uses the first then, and resolve(2) uses the second then. Reject (1) uses the second then. Resolve (3) promise.resolve ().then(() => {return new Error(' Error!!! ') }).then(res => { console.log("then: ", res) }).catch(err => { console.log("catch: ", err) }) //return new Error('error!!! Resolve (new Error(' Error!!! Reject (new Error(' Error ')) or throw new Error(' Error ') if you want to throw an Error.Copy the code
const promise = Promise.resolve().then(() => { return promise; }) promise.catch(console.err) 12.. The value returned by then or. Catch cannot be the promise itself, otherwise an infinite loop will occurCopy the code
Promise.reject('err!!! ') .then((res) => { console.log('success', res) }, (err) => { console.log('error', err) }).catch(err => { console.log('catch', err) }) // 'error' 'error!!! Resolve () and promise.reject (). Reject () are used as the second argument to the then, and the code will not execute if the second argument is removed.  Promise.resolve() .then(function success (res) { throw new Error('error!!! ') }, function fail1 (err) { console.log('fail1', err) }).catch(function fail2 (err) { console.log('fail2', Err)}) because the call is to resolve () so will enter the success function, not into the fail1, then success function throws an error will be catch catchCopy the code
function promise1 () { let p = new Promise((resolve) => { console.log('promise1'); resolve('1') }) return p; } function promise2 () { return new Promise((resolve, reject) => { reject('error') }) } promise1() .then(res => console.log(res)) .catch(err => console.log(err)) .finally(() => console.log('finally1')) promise2() .then(res => console.log(res)) .catch(err => console.log(err)) .finally(() => Console. Log ('finally2')) // promise1 1 error finally1 finally2 14. Then microtask 1; Finally () is executed only when then is executed; Execute promise2(), no synchronization task, catch microtask 2, finally() is executed until the catch is completeCopy the code

Async /await several questions

async function async1 () { console.log('async1 start'); await new Promise(resolve => { console.log('promise1') }) console.log('async1 success'); return 'async1 end' } console.log('srcipt start') async1().then(res => console.log(res)) console.log('srcipt end') 15. The promise after await does not return a value that has not changed its state and is still pending, so keep await so that subsequent code will not be executed, and also not be executed after thenCopy the code
async function async1 () { console.log('async1 start'); await new Promise(resolve => { console.log('promise1') resolve('promise1 resolve') }).then(res => console.log(res)) console.log('async1 success'); return 'async1 end' } console.log('srcipt start') async1().then(res => console.log(res)) console.log('srcipt end') // srcipt start async1 start promise1 srcipt end promise1 resolve async1 success async1 end 16.console.log('async1 Success ') is placed in the promise. then generated by await syntax sugar, and await must end after await promise. then. The new Promise in async1 has no relation to the value of the resovle in async1().then(). Async functions return a Promise object, and if an immediate quantity (a normal variable) is returned in the function, Async encapsulates this direct quantity into a Promise object via promise.resolve (). If you return a promise then it's the promise you returnCopy the code
Async function async1 () {await async2(); console.log('async1'); return 'async1 success' } async function async2 () { return new Promise((resolve, Reject) => {console.log('async2') reject('error')})} async1(). Then (res => console.log(res)) Example 2 Async function async1 () { console.log('async2'); throw new Error('error!!! ') return 'async1 success'} async1(). Then (res => console.log(res)) // Async2 error message 17. If an error is thrown in an async function, execution terminatesCopy the code

comprehensive

const p1 = new Promise((resolve) => { setTimeout(() => { resolve('resolve3'); console.log('timer1') }, 0) resolve('resovle1'); resolve('resolve2'); }).then(res => { console.log(res) setTimeout(() => { console.log(p1) }, 1000) }).finally(res => { console.log('finally', res) }) // 'resolve1' 'finally' undefined 'timer1' Promise{<resolved>: undefined} 18. Finally (resloved) (rejected); finally (resloved) (rejected); finally (resloved) (rejected); Printing P1 prints the return value of finally. Finally does not receive a promise. It defaults to the return value of the previous promise, then, but then has no return, so undefinedCopy the code

Original source: juejin.cn/post/684490…