Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use Promise in vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use Promise in vue.

Brief introduction:

What promise is, it can be said to be a solution to asynchronous programming. Take the traditional ajax request, for example, a single request is fine. If it is a request, the data will be called by other requests, constantly nesting, it is conceivable that the code looks very messy, and promise mainly appears to solve this situation.

Using 1.promise is an asynchronous solution

Because we cannot know the event when the data is requested asynchronously by ajax, we can only pass a callback function to the method encapsulated by ajax, and execute the callback function when the ajax asynchronous request is completed.

The promise object accepts two parameters, resolve and reject. When an asynchronous action occurs, the promise object will parse the action successfully through resolve, and reject will catch the exception of the action. A promise object that performs the next step through new Promise (). Then ().

Axios is a promise based HTTP client for the browser and node.js . In other words, using axios to make a request inevitably involves promise.

The argument to the Promise constructor is a function, and the code inside the function is asynchronous, that is, the operation inside Promise is asynchronously "simultaneous" with the operation outside Promise (). The first parameter of the function in Promise is the callback function, the resolve is used to trigger the code in then, the second parameter is the callback function, and reject is used to trigger the code in catch, throw new Error (); you can also trigger catch

Resolve and reject are two callback functions. Calling resolve triggers then,reject and triggers catch:

New Promise ((resolve, reject) = > {setTimeout (()) > {/ / call resolve resolve on success ('success data') / / call reject reject (' error message')}, 1000)}) .then ((data) = > {/ / logical console.log (data) after successful processing) / / this data is the received resolve parameter--}) .catch ((err) = > {console.log (err);})

In a promise chain, as long as any promise is destroyed by the reject,promise chain, the promise after the reject is no longer executed, but calls the .catch method directly.

P1 () .then (p2) .then (p3) .then (function (data) {console.log ('data:' + data);}) .catch (function (error) {console.log ('error:' + error);}); function p1 () {return new Promise (function (resolve, reject) {console.log ('p1 resolved'); resolve (123);}) } function p2 () {return new Promise (function (resolve, reject) {console.log ('p2 rejected'); reject (456);});} function p3 () {return new Promise (function (resolve, reject) {console.log ('p3 resolved'); resolve (789);});} / / execution result p1 resolvedp2 rejectederror: 4562.async await

The argument to the Promise constructor is a function, and the code inside the function is asynchronous, that is, the operation inside Promise is asynchronously "simultaneous" with the operation outside Promise (). In addition, as long as the function is preceded by the async keyword, you can also indicate that the function is asynchronous.

The async keyword is actually implemented through Promise. If a value is returned in the async function, when the function is called, the Promise.solve () method is called internally to convert it into a promise object as a return, but if an error is thrown inside the timeout function, a promise object is returned by calling Promise.reject (). If a function calls an asynchronous function (such as an internal primise), the function is decorated with async.

Await stands for "wait" and modifies the expression that returns the promise object. Note that the await keyword can only be placed in the async function.

Function doubleAfter2seconds (num) {return new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (2 * num)}, 2000);})} / / write an async function so that you can use the await keyword. Await is followed by an expression that returns the promise object, so it can be followed by a call to the doubleAfter2seconds function async function testResult () {let result = await doubleAfter2seconds (30). Console.log (result);}

Await waits for the subsequent promise object to finish execution, then takes the value of promise resolve and returns it. Obviously, await can modify the axios request and wait for the result to proceed, such as:

Async getUserList () {const {data: res} = await this.$http.get ('users', {params: this.queryInfo}) / / console.log (res) if (res.meta.status! = = 200) return this.$message.error (' failed to get user list!') This.userlist = res.data.users this.total = res.data.total} at this point, I believe you have a deeper understanding of "how to use Promise in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.