Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use Promise in javascript", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Promise in javascript" article.

First of all, you want to know why you use Promise syntax?

Before introducing Promise, let's take a look at the features of JavaScript. Those who engage in front-end developers all know that JS is a traditional single-thread programming, in which all the programs run synchronously and there is only one main thread, but with the development of technology, in order to solve the previous defects, the asynchronous idea is introduced, that is, the execution of an asynchronous process will no longer be sequentially related to the original sequence, which solves the defect of low execution efficiency caused by synchronous execution. To explain in one sentence: asynchronism is to emit a child thread from the main thread to complete the task.

Let's learn that Promise,Promise is a new addition to ES6, it is a class provided by ES6, its main purpose is to handle complex asynchronous tasks, but it is not supported by any browser, for example, some older browsers do not support it, only Apple's Safari10 and Windows's Edge14 version and above browsers begin to support ES6 features.

Promise is executed as an alternative callback function and as a way to handle asynchronous operations; it is the solution to the problem that callback functions are nested in callback functions when JS is executed asynchronously, and Promise controls the function execution flow more succinctly. The Promise object actually represents the final success or failure of an asynchronous operation, and the resulting value, that is, a surrogate value, is an asynchronous callback solution in ES6.

The value of the Promise object proxy is actually unknown, and the state is dynamically variable, so there are three states of the Promise object: in progress, end, and failure. It runs only from progress to failure, or from progress to success. Use Promise objects to run asynchronous code as long as they are expressed synchronously.

① pending: initial state, neither successful nor failed

② fulfilled: the operation ended successfully

③ rejected: the operation failed.

How to construct Promise? Here is a simple example of constructing a Promise:

New Promise (function (resolve, reject) {/ / what to do.})

From the above new construction of a Promise object does not seem to see how well it handles complex asynchronous tasks, then there is the core operation of Promise.

Second, next, let's learn about callback hell (Callback Hell).

Callback hell is also called callback nesting or function chaotic invocation, which means that three network requests need to be sent, the third request depends on the result of the second request, and the second request depends on the result of the first request. Increasing nesting use.

Disadvantages of callback functions:

Developers are laborious and laborious to read, which is not conducive to troubleshooting, let alone return directly, and so on. Such as:

SetTimeout (()) = > {console.log (1) setTimeout () = > {console.log (2) setTimeout (()) > {console.log (3)}, 3000)}, 2000)}, 1000) finally, it is also the highlight of this chapter, the basic use of Promise

The Promise constructor has only one argument, which is a function, which will be run asynchronously after it is constructed, so we call it the starting function. The initiator function, the constructor of Promise, has two parameters: resolve and reject, which represent the result of the asynchronous operation, that is, the state of success or failure of the Promise.

When Promise is constructed, the initiating function is executed asynchronously; resolve and reject are both functions, where calling resolve means everything is normal and reject is called when an exception occurs.

The ① asynchronous operation succeeds. Call the resolve function to change the state of the Promise object to fulfilled.

The ② asynchronous operation failed. Call the rejected function to change the state of the Promise object to rejected.

To take a usage example, a more standard way to write is to encapsulate Promise in a function and return a Promise at the same time, as shown below:

Const delay = (millisecond) = > {return new Promise ((resolve, reject) = > {if (typeof millisecond! = 'number') reject (new Error (' must be number type')); setTimeout (() = > {resolve (`delay ${millisecond} millisecond output `)}, millisecond)})}

In the above example, you can see that Promise has two parameters: resolve and reject. Resolve: changes asynchronous execution from pending (request) to resolve (successful return), which is a function execution return; reject: see name means "reject", from request to "failure", which is a failure result returned by function execution. It is recommended to return an error new Error (), which is clearer and more standardized.

(1) resolve function

If the data passed in is non-Promise and basic data type, the successful Promise; is returned. If Promise is passed in, the result of the object determines the returned result value of resolve.

Let obj = new Promise ((resolve,reject) = > {resolve ('yes');}); / / 1. If the data passed in is a non-Promise, basic data type, a successful Promise is returned. Let p1 = Promise.resolve ('123') / / 2. If Promise is passed in, the result of the object determines the return result value of resolve. Let p2 = Promise.resolve (obj); / / 3. Nesting uses let p3 = Promise.resolve ('abc'); console.log (p3); (II) rejected function

Promise.prototype.reject, which always returns a failed Promise.

Let p = Promise.reject (123123); let p2 = Promise.reject ('abc'); let p3 = Promise.reject (Promise.resolve (' ok')); console.log (p3); (3) API of Promise

Promise API inside several commonly used methods are: then, catch, finally, all, race and so on, the specific use of one by one.

1. Then

Then specifies the callback to the current Promise for success or failure. Get the data from the Promise resolve in then and return a Promise for continued use; the result returned by the then method is determined by the callback function specified by then.

The example is as follows:

Let p=new Promise ((resolve,reject) = > {resolve ('yes')}) p.then (value= > {console.log (value) / / value here is yes}, reason= > {console.error (reason)}) 2. Catch

Catch specifies the failed callback and returns the failed result.

The example is as follows:

Let p = new Promise ((resolve,reject) = > {reject ('failed!') ) p.then (value= > {}, reason= > {console.error (reason);}) p.catch (reason= > {console.error (reason)}) 3. Finally

Finally is used to wrap up the work. No matter whether the status of Promise succeeds or fails, when the callback function is executed, it will go to finally to find the final callback function to execute.

The example is as follows:

Request.finally (code that function () {/ / last, and certainly will execute}) 4. Promise.all

When multiple Promise tasks are executed together, if all are successful, a new Promise is returned, and if one of them fails, the failed Promise object is returned.

The example is as follows:

Let p1 = new Promise ((resolve, reject) = > {setTimeout (() = > {resolve ('yes');}, 1000);}); let p2 = Promise.resolve (' ok'); let p3 = Promise.reject ('Oh no'); / / all let result = Promise.all ([p1, p2, p3]); console.log (result); 5. Promise.race

When multiple Promise tasks are executed synchronously, the result of the Promise task that ends first is returned. Whether it is a success or failure in the end, the popular point will be: first come, first served.

The example is as follows:

Let p1 = new Promise ((resolve, reject) = > {setTimeout (() = > {resolve ('yes');}, 1000);}); let p2 = new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (' ok');}, 500);}); let result = Promise.race ([p1, p2]); console.log (result) / / the above p2 ok is about the content of this article on "how to use Promise in javascript". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.