There are many great ways to improve your coding skills, experiment with new technologies. The truth of the matter is to understand JavaScript and Promise.
Part 1:
const prom = new Promise((res, rej) => {
console.log('first');
res();
console.log('second');
});
prom.then(() => {
console.log('third');
});
console.log('fourth');
// first
// second
// fourth
// third
Promise executes synchronously, promise.then executes asynchronously
Part 2:
const prom = new Promise((res, rej) => {
setTimeout(() => {
res('success');
}, 1000);
});
const prom2 = prom.then(() => {
throw new Error('error');
});
console.log('prom', prom);
console.log('prom2', prom2);
setTimeout(() => {
console.log('prom', prom);
console.log('prom2', prom2);
}, 2000);
// prom
// Promise {<pending>}
// __proto__: Promise
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: "success"
// prom2
// Promise {<pending>}__proto__:
// Promise[[PromiseStatus]]: "rejected"[[PromiseValue]]:
// Error: error
// at <anonymous>:7:9
promise has three different states:
- pending
- fulfilled
- rejected
Once the status updated, pending->fulfilled or pending->rejected, it can be changed again. The prom1 is different from prom2 and both of them return new Promise status.
Part 3:
const prom = new Promise((res, rej) => {
res('1');
rej('error');
res('2');
});
prom
.then(res => {
console.log('then: ', res);
})
.catch(err => {
console.log('catch: ', err);
});
// then: 1
The resolve or reject only execute once even there is a resolve call after the reject. It won't execute.
Part 4:
Promise.resolve(1)
.then(res => {
console.log(res);
return 2;
})
.catch(err => {
return 3;
})
.then(res => {
console.log(res);
});
// 1
// 2
Promises can be chained. When referring to chained calls, we usually think of returning this, but Promises do not. Each time a promise calls .then or .catch, a new promise will be returned, thus implementing chained calls.
Part 5:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('first')
resolve('second')
}, 1000)
})
const start = Date.now()
promise.then((res) => {
console.log(res, Date.now() - start, "third")
})
promise.then((res) => {
console.log(res, Date.now() - start, "fourth")
})
// first
// second 1054 third
// second 1054 fourth
A promise .then or .catch can be called multiple times, but here the Promise constructor is executed only once. In other words, once the internal state of a promise changes and a value is obtained, each subsequent call to .then or .catch will directly get the value.
Part 6:
const promise = Promise.resolve()
.then(() => {
return promise
})
promise.catch(console.error)
// [TypeError: Chaining cycle detected for promise #<Promise>]
// Uncaught SyntaxError: Identifier 'promise' has already been declared
// at <anonymous>:1:1
// (anonymous) @ VM218:1
The value returned by .then or .catch cannot be the promise itself, otherwise, it will cause an infinite loop.
Part 7:
Promise.resolve()
.then(() => {
return new Error('error');
})
.then(res => {
console.log('then: ', res);
})
.catch(err => {
console.log('catch: ', err);
});
// then: Error: error!
// at Promise.resolve.then (...)
// at ...
Returning an error object in .then or .catch does not throw an error, so it will not be caught by subsequent .catch, you need to change to one of them:
return Promise.reject(new Error('error'))
throw new Error('error')
Because returning any non-promise value will be wrapped into a promise object, that is, return new Error ('error') is equivalent to return Promise.resolve (new Error ('error')).
Part 8:
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
// 1
The argument of .then or .catch is expected to be a function, and passing in a non-function will results the result of value to be ignored such as .then(2) or .then(Promise.resolve(3).
Part 9:
Promise.resolve()
.then(
function success(res) {
throw new Error('Error after success');
},
function fail1(e) {
console.error('fail1: ', e);
}
)
.catch(function fail2(e) {
console.error('fail2: ', e);
});
// fail2: Error: Error after success
// at success (<anonymous>:4:13)
.then can accept two parameters, the first is a function that handles success, and the second is a function that handles errors. .catch is a convenient way to write the second parameter of .then, but there is one thing to pay attention to in usage: .then the second error-handling function cannot catch the error thrown by the first successful function and subsequent ones. catch catches previous errors. Of course, the following code works if you want to rewrite:
Promise.resolve()
.then(function success1 (res) {
throw new Error('success1 error')
}, function fail1 (e) {
console.error('fail1: ', e)
})
.then(function success2 (res) {
}, function fail2 (e) {
console.error('fail2: ', e)
})
Part 10:
process.nextTick(() => {
console.log('1')
})
Promise.resolve()
.then(() => {
console.log('2')
})
setImmediate(() => {
console.log('3')
})
console.log('4');
// Print 4
// Print 1
// Print 2
// Print 3
Both process.nextTick and promise.then belong to microtask, while setImmediate belongs to macrotask, which is executed during the check phase of the event loop. A microtask is executed between each phase of the event loop (macrotask), and the beginning of the event loop is executed once.
Top comments (0)