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

This article introduces the relevant knowledge of "analyzing Promise chain calls". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. Preface

In the previous section, you implemented the basic version of Promise:

/ / minimalist implementation + chained call + delay mechanism + state class Promise {callbacks = []; state = 'pending';// added state value = null;// save result constructor (fn) {fn (this._resolve.bind (this) } then (onFulfilled) {if (this.state = = 'pending') {/ / before resolve, add this.callbacks.push (onFulfilled) to callbacks as before logic;} else {/ / after resolve, directly execute callback and return the result onFulfilled (this.value);} return this } _ resolve (value) {this.state = 'fulfilled';// change state this.value = value;// save result this.callbacks.forEach (fn = > fn (value));}}

However, the chained call only return this in the then method, so that the Promise instance can call the then method multiple times, but because it is the same instance, multiple calls to then can only return the same result. Usually, the chained call we want is like this:

/ use Promisefunction getUserId (url) {return new Promise (function (resolve) {/ / Asynchronous request http.get (url, function (id) {resolve (id)})} getUserId ('some_url') .then (function (id) {/ do something return getNameById (id);}) .then (function (name) {/ / do something return getCourseByName (name)) }) .then (function (course) {/ / do something return getCourseDetailByCourse (course);}) .then (function (courseDetail) {/ / do something})

Each then registered onFulfilled returns a different result, layer by layer, and it is obvious that return this cannot achieve this effect in the then method. With the introduction of a real chained call, then must return a new Promise instance.

The real chained Promise means that after the current Promise reaches the fulfilled state, the next Promise (the next neighbor Promise) begins. So how do we connect the current Promise with the next neighbor Promise? This is the difficulty of understanding Promise, and we will demonstrate this process through animation.

Second, the realization of chain call

First, take a look at the source code of the implementation:

/ / complete implementation class Promise {callbacks = []; state = 'pending';// added state value = null;// save result constructor (fn) {fn (this._resolve.bind (this) } then (onFulfilled) {return new Promise (resolve = > {this._handle ({onFulfilled: onFulfilled | | null, resolve: resolve});} _ handle (callback) {if (this.state = 'pending') {this.callbacks.push (callback); return } / / if nothing is passed in then if (! callback.onFulfilled) {callback.resolve (this.value); return;} var ret = callback.onFulfilled (this.value); callback.resolve (ret);} _ resolve (value) {this.state = 'fulfilled';// change state this.value = value / / Save the result this.callbacks.forEach (callback = > this._handle (callback));}}

From the above implementation, we can see:

In the then method, a new Promise instance is created and returned, which is the foundation of serial Promise and the foundation of true chained calls.

The formal parameter onFulfilled passed in the then method and the resolve passed in when creating a new Promise instance are put together and are push to the callbacks queue of the current Promise, which is the key to connecting the current Promise with the next neighbor Promise.

According to the specification, onFulfilled can be empty, and onFulfilled is not called when it is empty.

Take a look at the animation demonstration:

(Promise chain call demo animation)

When the first Promise succeeds, the resolve method sets its state to fulfilled and saves the value brought by resolve. The object in the callbacks is then fetched, the onFulfilled of the current Promise is executed, and the return value is passed to the second Promise by calling the resolve method of the second Promise. The animation is shown as follows:

(Promise chain call fulfilled)

To really see the process of chained calls, I wrote a mockAjax function that simulates asynchronous requests:

/ * simulate an asynchronous request * @ param {*} url request URL * @ param {*} s specifies the time spent for the request, that is, how long it will take before the request is returned. Callback function returned by * @ param {*} callback request * / const mockAjax = (url, s, callback) = > {setTimeout () = > {callback (url + 'asynchronous request takes' + s + 'seconds');}, 1000 * s)}

In addition, I added log output and construction sequence identification to the source code of Promise, so that you can clearly see the construction and execution process:

/ / Demo1new Promise (resolve = > {mockAjax ('getUserId', 1, function (result) {resolve (result);})}) .then (result = > {console.log (result);})

[source code of Demo1]

The implementation results are as follows:

[Promse-1]: constructor [Promse-1]: Ten [Promse-2]: constructor [promse-1]: _ handle state= signing [promse-1]: _ handle callbacks= [{onFulfilled: [Function], resolve: [Function]}] = > Promise {callbacks: [], name: 'Promse-2', state:' pending' Value: null} [Promse-1]: _ initiate [promse-1]: _ resolve value= getUserId Asynchronous request takes 1 second [Promse-1]: _ handle state= fulfilledgetUserId Asynchronous request takes 1 second [Promse-2]: _ initiate [Promse-2]: _ resolve value= undefined

From the printed log, you can see:

Construct a Promise-1 instance and execute mackAjax ('getUserId',callback) immediately

Call the then method of Promise-1 to register the onFulfilled function of Promise-1.

A new Promise instance, Promise-2, is constructed inside the then function. Execute the _ handle method of Promise-1 immediately.

At this time, Promise-1 is still the state of pending.

In Promise-1._handle, the onFulfilled registered in Promise-1 and the resolve registered in Promise-2 are stored in the callbacks inside Promise-1.

At this point, the current thread execution ends. The Promise instance of Promise-2 is returned.

1s later, the asynchronous request returns. To change the status and result of the Promise-1, execute resolve (result).

The value of Promise-1 is changed to the result returned by the asynchronous request: "getUserId asynchronous request takes 1s".

The state of Promise-1 becomes fulfilled.

The onFulfilled of Promise-1 is executed, printing out "getUserId asynchronous request takes 1 second".

Then call Promise-2.resolve.

Change the value and state of Promise-2, because the onFulfilled of Promise-1 does not return a value, so the value of Promise-2 is undefined.

In the above example, what would be the effect of changing an asynchronous request to synchronous?

New Promise (resolve = > {resolve ('getUserId synchronization request');}) .then (result = > {console.log (result);}) / / print log [Promse-1]: constructor [Promse-1]: _ resolve value= getUserId [Promse-1]: _ resolve value= getUserId synchronous request [Promse-1]: Ten [promse-2]: constructor [promse-1]: _ handle state= fulfilledgetUserId synchronous request [Promse-2]: _ handle state= fulfilledgetUserId [promse-2]: _ resolve value= undefined= > Promise {promse: [], name: 'Promse-2', state:' fulfilled', value: undefined}

If you are interested, you can analyze it yourself.

Third, the real meaning of chain call

When the onFulfilled of the current Promise is executed, the return value is passed to the second Promise by calling the resolve method of the second Promise as the value of the second Promise. So we consider the following Demo:

/ / Demo2new Promise (resolve = > {mockAjax ('getUserId', 1, function (result) {resolve (result);})}) .then (result = > {console.log (result); / / A pair of result for first-layer processing let exResult =' prefix:'+ result; return exResult;}). Then (exResult = > {console.log (exResult);})

[source code of Demo2]

We added a layer of then to see the result of the execution:

[Promse-1]: constructor [promse-1]: Ten [promse-2]: constructor [promse-1]: _ handle state= signing [promse-1]: _ handle callbacks= [{onFulfilled: [Function], resolve: [Function]}] [Promse-2]: Ten [promse-3]: constructor [promse-2]: _ handle state= signing [promse-2]: _ handle callbacks= [{onFulfilled: [Function], resolve: [Function]}] = > Promise {callbacks: [], name: 'Promse-3' State: 'pending', value: null} [Promse-1]: _ asynchronous [promse-1]: _ resolve value= getUserId asynchronous request takes 1 second [Promse-1]: _ handle state= fulfilledgetUserId asynchronous request takes 1 second [Promse-2]: _ asynchronous [promse-2]: _ resolve value= prefix: getUserId asynchronous request takes 1 second [Promse-2]: _ handle state= fulfilled prefix: getUserId asynchronous request takes 1 second [Promse-3]: _ asynchronous [promse-3]: _ resolve value= undefined:

Chained calls can be written indefinitely, and the value of the onFulfilled return at the next level becomes the result of the onFulfilled at the next level. You can refer to Demo3:

[source code of Demo3]

It is easy to find that only the first of the above Demo3 is asynchronous and the rest is synchronous, so there is no need for such a chained implementation. We can get the three results we want as follows: the printed values respectively.

/ equivalent to Demo3new Promise (resolve = > {mockAjax ('getUserId', 1, function (result) {resolve (result);})}). Then (result = > {console.log (result); / / A pair of result for first-layer processing let exResult =' prefix:'+ result; console.log (exResult); let finalResult = exResult +': suffix'; console.log (finalResult);})

So what is the real meaning of chained calls?

What I just demonstrated is that the return value of onFulfilled is value. What if it is a Promise? It is up to the developers using Promise to decide the status of the subsequent Promise through onFulfilled.

So add the judgment to the return value of the previous Promise onFulfilled in _ resolve:

_ resolve (value) {if (value & & (typeof value = 'object' | | typeof value = =' function')) {var then = value.then; if (typeof then = 'function') {then.call (value, this._resolve.bind (this)); return;}} this.state =' fulfilled' / / change state this.value = value;// save result this.callbacks.forEach (callback = > this._handle (callback));}

From the point of view of the code, it makes a special judgment on the value in resolve to determine whether the value of resolve is a Promise instance. If it is a Promise instance, then the state change API of the current Promise instance is re-registered with the onFulfilled of Promise corresponding to the value of resolve, that is, the state of the current Promise instance depends on the state of the Promise instance of the value of resolve.

[source code of Demo 4]

The results of the execution are as follows:

[Promse-1]: constructor [Promse-2]: constructor [Promse-3]: constructor [promse-1]: _ handle state= signing [promse-1]: _ handle callbacks= [{onFulfilled: [Function], resolve: [Function]}] [Promse-3]: then[ Promse-4]: constructor [promse-3]: _ handle state= signing [promse-3]: _ handle callbacks= [{onFulfilled: [Function], resolve: [Function]}] = > Promise {callbacks: [] Name: 'Promse-4', state:' pending', value: null} [Promse-1]: _ asynchronous [promse-1]: _ resolve value= getUserId asynchronous request takes 1 second [Promse-1]: _ handle state= fulfilledgetUserId asynchronous request takes 1 second [Promse-3]: _ asynchronous [promse-3]: _ resolve value= Promise {callbacks: [], name: 'Promse-2', state:' pending' Value: null} [Promse-2]: Ten [Promse-5]: constructor [promse-2]: _ handle state= signing [promse-2]: _ handle callbacks= [{onFulfilled: [Function] Resolve: [Function]}] [Promse-2]: _ resolve value= getUserName [promse-2]: _ resolve value= getUserName asynchronous request takes 2 seconds [Promse-2]: _ handle state= fulfilled [promse-3]: _ resolve value= getUserName asynchronous request takes 2 seconds [Promse-3]: _ handle state= fulfilledgetUserName asynchronous request takes 2 seconds [Promse-4]: _ resolve value= [promse-4]: _ resolve value= undefined [promse-5]: _ asynchronous [promse-5]: _ resolve value= undefined

Similarly, I did a demo animation to restore the process:

(true chained calls to Promise)

This is the end of "analyzing Promise chain calls". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.