What is the way to write then in es6?

In es6, the writing method of then is "then (add a callback function for successful state changes to the promise instance, a callback function for failure)"; this method is used to add a callback function for the promise instance when the state changes. The returned result is a new promise instance, and the method can use chained operations.

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the writing method of then in es6

Writing method:

then(参数1,参数2)

Function: Add a callback function when the state changes to the promise instance

Parameter 1 is the callback function for success,

Parameter 2 is the callback function for failure

Return value: The then() method returns a new promise instance , the then() method can use chain operations.

Expand knowledge:

Promise

1. Concept: Promise is a type of asynchronous programming Solution.

2. Asynchronous: The previous way to implement asynchronous operation: ①Callback function ②Event trigger

3. Function: Solve the problem of asynchronous operation, which is different from the above two methods.

4. Features: ①: The state of the object is not affected by the outside world. The promise object represents an asynchronous operation and has three states: Pending (in progress).fulfilled (successful).rejected (failed). Only the result of the asynchronous operation can determine the current state, and no other operation can change this state.

②: Once the state of the object changes, it will not change again and can be obtained at any time This result. (There are only two possibilities for the state of the Promise object to change: from pending to fulfilled and from pending to rejected).

5: Basic usage

(1) Through new promise object You can create a promise instance

const promise=new Promise(function(resolve,reject){})

(2) Parameter description: the promise object receives a function as a parameter. The parameters of this function are resolve and reject. They are two functions provided by the Javascript engine

(3) The role of the resolve function: It is called when the asynchronous operation succeeds, and the result of the asynchronous operation is passed as a parameter.

(4) The role of the reject function: It is called when the asynchronous operation fails, and the result of the asynchronous operation is passed out as a parameter. Errors reported by asynchronous operations are passed as parameters.

Note: After the promise instance is generated, you can use the then method to specify the success and failure callback functions respectively

.then() is the promise instance A method indicating the next operation to be performed.

For example:

function ajax(){
            console.log("hello");
            return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        resolve();
                    },1000)
                })
                ajax.then(function(){
                    console.log("world");
                })
            }

6. Method of Promise instance

(1)then(parameter 1, parameter 2)

Function: Add a callback function when the state changes to the promise instance

Parameter 1 is the successful callback function, parameter 2 is the failed callback function

Return value: then() The method returns a new promise instance, and the then() method can use chain operations.

(2)catch()

Function: Specify the callback function when an error occurs, the function is the same For the second parameter of the then method

For example:

let ajax=function(num){
                return new Promise((resolve,reject){
                    if(num>5){
                        resolve(num);
                    }else{
                           throw new Error("出错了");
                        }
                })
            }
               ajax(2).then(function(num){
                console.log(num);
            }).catch(function(error){
                console.log(error);
            })

7. Advanced method of Promise

(1)promise.all()

Function : Pack multiple promise instances into a new promise instance. Simply put, a successful callback will be executed only if multiple asynchronous operations are successful, otherwise a failed callback will be executed.

Parameter description: Receive a Array as parameter, each item of the array is a promise instance

(2)promise.race()

Function: Pack multiple promise instances into a new promise instance, as long as There is an instance that changes the state first, and the state of the promise changes accordingly.

Parameter description: Receive an array as a parameter, each item of the array is a promise instance

8. Promise style AjAx

                function promiseAjax(json){
                    let url=json.url;
                    let type=json.type||"get";
                    let data=json.data||{};
                    let str="";
                    for(let k in data){
                        str+=k+"="+data[k]+"&";
                    }
                    return new Promise((resolve,reject)=>{
                    let ajax=new XMLHttpRequest();
                    if(type.toLowerCase()==="get"){
                        ajax.open("get",`${url}?${str}time=${Date.now()}`,true);
                        ajax.send();
                    }else if(type.toLowerCase()==="post"){
                        ajax.open("post",url,true);
                        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
                        ajax.send(str.substring(0,str.laseIndexOf("&")));
                    }
                        ajax.onreadystatechange=function(){
                            if(ajax.readyState===4){
                                if(ajax.status>=200&&ajax.status<300){
                                    resolve(JSON.parse(ajax.responseText));
                                }else{
                                    let error=new Error();
                                    error.status=ajax.status;
                                    reject(error);
                                }
                            }
                        }
                    })
            }

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the way to write then in es6?. For more information, please follow other related articles on the PHP Chinese website!