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

How to understand Promise in JavaScript, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Promise is a syntax of ES6

Promise means commitment, which grammatically solves the traditional problem of multi-layer callback nesting.

Callback function

What is a callback function?

Is to pass function An as an argument to function B.

Call as a row parameter in function B

Function a (cb) {

Cb ()} function b () {

Console.log ('I am a function b')} a (b)

Why do you need a callback function

When we perform an asynchronous behavior, we need to do something after the execution of an asynchronous behavior

So, there is no way to predict in advance when this asynchronous behavior will be completed.

We can only do it in the form of a callback function.

A typical timer

SetTimeout (function () {

Console.log ("callback function executed")}, 2000)

Callback to hell

When a callback function is nested within a callback function

A nested structure will appear.

When there is more nesting, there will be a callback to hell.

For example, we send three ajax requests.

The first one sent normally

The second request requires a value in the result of the first request as a parameter

The third request requires a value in the result of the second request as a parameter

Ajax ({

Url: "I'm the first to ask."

Success (res) {

/ / now send the second request ajax ({

Url: "I am the second request"

Data: {a: res.a, b: res.b}

Success (res2) {

/ / make the third request ajax ({

Url: "I'm the third request."

Data: {a: res2.a, b: res2.b}

Success (res3) {

Console.log (res3)

}

})

}

})

})

Callback hell is actually caused by too much nesting of callback functions

When the code becomes this structure, it is no longer possible to maintain

So we need to make the code more artistic.

PROMISE

In order to solve the callback hell

We're going to use promise syntax.

Syntax:

New Promise (function (resolve, reject) {

/ / resolve indicates successful callback / / reject indicates failed callback}) .then (function (res) {

/ / successful function}) .catch (function (err) {

/ / failed function})

Promise is a grammar.

Each of our asynchronous events, at the time of execution,

There will be three states, execution / success / failure

Because it contains a successful callback function

So we can use promise to solve the problem of sending multiple ajax.

New Promise (function (resolve, reject) {

Ajax ({

Url: 'first request'

Success (res) {

Resolve (res)

}

)) .then (function (res) {

/ / prepare to send the second request return new Promise (function (resolve, reject) {

Ajax ({

Url: 'second request'

Data: {a: res.a, b: res.b}

Success (res) {

Resolve (res)

}

})

)) .then (function (res) {

Ajax ({

Url: 'third request'

Data: {a: res.a, b: res.b}

Success (res) {

Console.log (res)

}

})})

By this time, our code has changed a lot.

It's basically ready for maintenance.

But for a programmer, this is not enough.

We also need to simplify the code more.

So we need to use an es7 syntax.

It's called async/await.

ASYNC/AWAIT

Async/await is a syntax of es7

This syntax is the ultimate solution to callback hell.

Syntax:

Async function fn () {

Const res = await promise object}

This is a special function.

You can await a promise object

You can write asynchronous code that looks like synchronous code.

As long as it is a promiser object, we can use async/await to write

Async function fn () {

Const res = new Promise (function (resolve, reject) {

Ajax ({

Url: 'first address'

Success (res) {

Resolve (res)

}

})

})

/ / res can get the result of the request const res2 = new Promise (function (resolve, reject) {

Ajax ({

Url: 'second address'

Data: {a: res.a, b: res.b}

Success (res) {

Resolve (res)

}

})

})

Const res3 = new Promise (function (resolve, reject) {

Ajax ({

Url: 'third address'

Data: {a: res2.a, b: res2.b}

Success (res) {

Resolve (res)

}

})

})

/ / res3 is the result we want console.log (res3)}

This kind of asynchronous code is written like synchronous code.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.