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

This article mainly introduces "how to realize the Observer Mode with promsie". In the daily operation, I believe that many people have doubts about how to use promsie to achieve the Observer Mode. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize the Observer Mode with promsie". Next, please follow the editor to study!

Let's use an example to demonstrate what observer mode is. There is a scene in which there is a thief and several dogs in a courtyard. The dog will bark as soon as the thief moves. If the scene is shown in the picture:

We can see that the barking action of the dog depends on the thief. If the thief does not act, the dog will not bark, that is to say, the barking state of the dog depends on the action of the thief. The thief's state of action changes, and the dog that depends on the thief will be affected. To make a bark.

This scene is shown in code as follows: / / the first version of class Thief {constructor () {

} / / thief method, call dog method; action () {dog1.call () dog2.call () dog3.call ()}}

Class Dog {call () {console.log ("barking")}}

Let dog1 = new Dog () let dog2 = new Dog () let dog3 = new Dog () let thief = new Thief (); in the code above, when the thief calls the action method, the call method of each dog is called internally. This code has an obvious disadvantage, object coupling, not easy to maintain, if a dog is added to the requirement, how to change the code at this time? The code is as follows: / / first edition-add dog4class Thief {constructor () {

} / / thief method, call dog method; action () {dog1.call () dog2.call () dog3.call () / new code dog4.call ()}}

Class Dog {call () {console.log ("barking")}}

Let dog1 = new Dog () let dog2 = new Dog () let dog3 = new Dog () / / New Code: let dog4 = new Dog ()

Let thief = new Thief (); thief.action () look at the code, we add dog4, and then add the call to don4.call in the thief's action method, and there is a coupling between objects calling each other, which is very difficult to maintain later, because every time you add dog, you need to change the code of thief.

Is there another way to write the code, adding dog, but not modifying the thief code, to achieve the same effect?

Let's rewrite this code with the observer pattern. Before rewriting, let's take a look at the characteristics of the observer pattern. Let's review the introduction to the observer pattern again: "the observer pattern defines a dependency. When the state of an object changes, other objects that depend on that object will be affected."

After reading carefully, we find that there are generally both the observer and the observed in the observer pattern, and the observed is usually a minority (not fixed, to facilitate this understanding).

In the above example, the thief is a minority, only one. The thief is obviously the observed, the dog is the observer, and the observed usually has two methods and one property, one is called subscribe, which is used to collect the behavior of the observer or observer, the other is called publish, which is used to publish messages, and there is also an attribute list, which is usually an array used to store the behavior of the observer or observer.

Let's rewrite the above code with observer mode. The code is as follows: / / second edition / / 1. Thief adds the list attribute, which is an array / / 2, subscrible method. Append method / 3, publish publish message class Thief {constructor () {this.list = []} / / subscrible (call) {this.list.push (call)} / / publish traverse the array, calling all methods. Publish () {for (let I = 0; I < this.list.length; iTunes +) {this.list [I] ()}} / / thief does not directly call the dog method inside the method, / / but calls publish action () {this.publish ()}} class Dog {call () {console.log ("dog barking")}}.

Let thief = new Thief (); let dog1 = new Dog () thief.subscrible (dog1.call) / / append the dog's call method to list for each additional dog

Let dog2 = new Dog () thief.subscrible (dog2.call) let dog3 = new Dog () thief.subscrible (dog3.call) thief.action () read the code carefully, we first redefine the Thief class and add the subscribe method, publish method, list property to it, and redefine dog. Then we use thief's subscribe method to collect the dog's call method and add it to the thief's list property. When the thief calls action, the publish method is called internally, and the publish iterates through the methods in the list array.

Compared with the previous code, this code is more convenient to maintain. If we add a dog on this basis, the code is as follows: / / second edition, add dog4// 1, thief added list attribute, is an array / / 2, subscrible method Append method / 3, publish publish message class Thief {constructor () {this.list = []} / / subscrible (call) {this.list.push (call)} / / publish traverse the array, calling all methods. Publish () {for (let I = 0; I {console.log (e)}); / / 4. Call source.cancel ("reason") to terminate the request source.cancel for which source.token is injected ('do not want to request') Read the code. In the first and second steps, we get a source object by calling the axios.CancelToken.source method. In the third step, we pass the cancelToken parameter when the axios invokes the asynchronous request, and in the fourth step, we call the source.cancle method at the right time to cancel the callback.

Let's first take a look at the code of the static method CancelToken: 'use strict';var Cancel = require ('. / Cancel'); / * * A `CancelToken` is an object that can be used to request cancellation of an operation. * * @ class * @ param {Function} executor The executor function. * / function CancelToken (executor) {if (typeof executor! = = 'function') {throw new TypeError (' executor must be a function.');} var resolvePromise; this.promise = new Promise (function promiseExecutor (resolve) {resolvePromise = resolve;}); var token = this; executor (function cancel (message) {if (token.reason) {/ / Cancellation has already been requested return } token.reason = new Cancel (message); resolvePromise (token.reason);});} / * * Throws a `Cancel` if cancellation has been requested. * / CancelToken.prototype.throwIfRequested = function throwIfRequested () {if (this.reason) {throw this.reason;}}; / * Returns an object that contains a new `CancelToken` and a function that, when called, * cancels the `CancelToken`. * / CancelToken.source = function source () {var cancel; var token = new CancelToken (function executor (c) {cancel = c;}); return {token: token, cancel: cancel};}; module.exports = CancelToken; after we remove the comments and some basic conditions in order to be intuitive, the code is as follows: function CancelToken (executor) {

Var resolvePromise; this.promise = new Promise (function promiseExecutor (resolve) {resolvePromise = resolve;}); var token = this; executor (function cancel (message) {if (token.reason) {return;} token.reason = message resolvePromise (token.reason);});}

CancelToken.source = function source () {var cancel; var token = new CancelToken (function executor (c) {cancel = c;}); return {token: token, cancel: cancel};}; read the source code, we find that CancelToken is a class, and its constructor needs to pass a parameter, which must be a function, and CancelToken instantiates an object by calling the source method.

In the constructor of CancelToken, a Promise object is instantiated, and the ResolvePromise variable is defined outside the Promise, and the value instantiates promise to obtain the control of the Promise instance resolve, then encapsulates the control into the cancel function, and gives the cancel function to the parameter executor function of the CancelToken constructor.

When CancelToken calls the cancel method, it first instantiates CancelToken. In the process of instantiation, we hand over cancel to the variable cancel, and finally return the instance token and cancel method of CancelToken.

Token is essentially a promise object, and the resolve method of the promise is stored inside the cancel method. So we can control the execution of promise objects through cancel.

Then let's take a look at the core code for configuring cancelToken parameters in axios: if (config.cancelToken) {/ / Handle cancellation config.cancelToken.promise.then (function onCanceled (cancel) {if (! request) {return;} request.abort (); reject (cancel); / / Clean up request request = null;}) } after reading the source code, we find that when axios sends an asynchronous request with the acncelToken parameter configured, a piece of code is executed inside the axios: config.cancelToken.promise.then (function onCanceled (cancel) {if (! request) {return;} request.abort (); reject (cancel); / / Clean up request request = null;}) This code calls the promise.then execution of the cancelToken of the incoming axios, but the control of the execution of this promise.then is in the cancel function. If we call the cancle function before the return of this asynchronous request, we will execute promise.then and execute request.abort to cancel the callback.

The principle of canceling asynchronous callback by axios involves two knowledge points: first, it uses xmlhttprequest's abort method to modify the value of readystate, and secondly, it uses the observation pattern, but this observer pattern is implemented by promise. At this point, the study on "how to implement the Observer Mode with promsie" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.