Examples of return values ​​of then and catch in ES6 Promise

This article mainly introduces examples of the return values ​​​​of then and catch in ES6 Promise. It has certain reference value. Now I share it with you. Friends in need can refer to it.

一.catch is The syntactic sugar of then

Sothen method and catch method will both return a Promise object(Yes, even if return is a certain value, or throw error, or no value is returned)
Let's take a look at the definition of MDN. It may be a bit messy for the sake of rigor. undefined, also the return value)
, throw error

,

return Promise 2. Let’s talk about the return value and throw error. 1. Return value situation:

The returned Promise will become

Fulfilled

status.

The return value will

be used as the parameter value of the next then callback function of the new Promise object

. See the example of the code <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var example = new Promise((fulfill, reject)=&gt;{     let i = 1;     fulfill(i); }) example .then((value)=&gt;{ console.log(value); value++; return value;  }) .then((value) =&gt; {console.log(value);                        });</pre><div class="contentsignin">Copy after login</div></div>The output result is as follows:

Calling the fufill function return value will be passed to the next callback function

Back to the above question, if
does not return, then undefined

(that is, the function returns without return The situation is undefined, the foundation must be solid ah ah)

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; })
.then((value) => {console.log(value);});

The output result is as follows:
2. Throw error situation:

Return The Promise will become Rejected

status,

Next execute the callback function

in the catch or then’s second callback function parameter
Something that has been confused before appears here. Repeat this sentence again: catch is syntactic sugar for then, which is an alias of then(null, rejection).

In other words, catch is also then, it is used to capture errors, and its parameter is the second parameter of then.

So, assuming that the
return value in the catch is , the new Promise object will also be in the accepting state. Look at the example:

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
.then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
.catch(()=>{console.log('我是第二个catch的回调函数')})
.then(() => {console.log('我是第二个then的回调函数')})

The result is as shown below:
After calling the reject function, the promise changes to the rejected state, so

executes the first catch The callback function
The callback function of the first catch

return 1

, soExecute the callback function of the first then
The callback function of the first then throw Error, so Execute the callback function of the second catch
The callback function of the second catch ruturn undefined (as mentioned above) , so Execute the callback function of the second then
3. Return Promise caseAs for the case of return Promise, the same is true. I have just started to contact Promise. I feel uncomfortable with the syntax: Promise objects are automatically generated for you? ! Later, after reading part of the source code analysis, I roughly understood why it was like this. I will also put the link below.

Use the newly learned knowledge to practice and block a function that reads the pictures in Plug-in:

https://github.com/Joeoeoe/-i...

Please point out where the writing is not good haha

The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Introduction to ES6 Class inheritance and super

##jQuery-Ajax requests Json data and loads it on the front-end page

The above is the detailed content of Examples of return values ​​of then and catch in ES6 Promise. For more information, please follow other related articles on the PHP Chinese website!