# Event monitoring (front end)
[[toc]]
WARNING
This section only applies to Blessing Skin v4 or later
# Introduction
Starting from Blessing Skin v4, the front end of Blessing Skin provides a lightweight event system. It provides simple event monitoring and event triggering functions, which is convenient for plug-ins to implement some operations in a less intrusive way. Of course, you can also use this event system to trigger some events by yourself, which is very helpful for the mutual work and even communication between different plug-ins.
All available methods of the event system are under blessing.event(
blessingis a global variable).
# listen event
The most common action is to listen to events from Blessing Skin, but you can also listen to events triggered by yourself, or events from other plugins. Either way, the usage is the same, and it's simple.
The on method on ``blessing.eventlets you listen to events. The
onmethod receives two parameters, the first parameter is a string or
Symbol, indicating the name of the event; the second parameter is a
callback function, which will be called when the event is triggered, and
this callback function can Receive a parameter (or no parameter, for
example, no parameter is passed when the event is triggered, or there is
a parameter but you don’t need it), and then when the event is
triggered, some data of the event will be passed as a parameter to the
callback parameter.
The following is an example of listening to the mountedevent.
blessing . event . on ( 'mounted' , () => {
// ...
})
When the mountedevent is triggered, the following callback function
will be executed.
The same event can be listened to multiple times. When an event is triggered, all callback functions in the same event will be executed.
# trigger event
You can also use this event system to trigger events.
trigger an event, use the emitmethod in
blessing.event . The ``emitmethod receives two parameters, the first
parameter is a string as the event name; the second parameter is the
data you want to pass to the callback function (you can omit this
parameter directly if you don’t need to pass data), it is recommended
that you pass JavaScript objects , this has two advantages: one is to
allow the callback function to modify the data you pass, so that the
plug-in can add, delete, and modify the data as needed; the other is to
facilitate the future if you need to pass more data, you can directly
add properties without changing the data type, thus maintaining backward
compatibility.
For example, we intend to trigger an event named eventA, and pass a
datavariable in the past. Then you can write:
blessing . event . emit ( 'eventA' , data) // assuming `data` variable is defined
As mentioned above, all callback functions in the same event will be executed.
It is worth noting that if there are multiple callback functions that
are listening, be careful whether there will be conflicts in the
modification of data between them. If you wish to pass a read-only
JavaScript object, you can pass Object.freeze(data)as a parameter,
which will make all properties of the object read-only. (Note that
Object.freezeonly does one-level processing, and multi-level nested
properties can still be modified. At this time, you may need to call
Object.freeze recursively)
# all available events
Here is a list of all defined events in the Blessing Skin frontend. When the event is triggered, the parameters passed to the callback function are all JavaScript objects. Therefore, we agree that we use the third-level title to indicate the name of the event, and use the fourth-level title to list the attributes on the parameter. The "type" of each property is expressed using the type syntax in TypeScript/Flow.
# beforeFetch
trigger timing
Before calling the Fetch API. For specific usage, see the front-end network request section.
# method
Type: string
Meaning: The HTTP verb representing the current request, such as
GETor POST.
# url
Type: string
Meaning: A non-full, relative URL in the current request.
# data
Type: object | FormData
Meaning: The data to send to the backend.
# fetchError
trigger timing
When an error occurs when calling the Fetch API. If the network fails, or the HTTP status code returned by the backend is not 2xx, this event will be triggered. For specific usage, see the front-end network request section.
Note that the parameter passed to the callback function by this event is
always an Errorinstance.
# message
Type: string
Meaning: error message
# response
Type: Response | undefined
Meaning: This property does not exist if an error is thrown by the Fetch
API itself due to network failure etc. If the status code of the backend
response is not 2xx, this attribute exists and is the object returned by
this request. Read about
Responsehere (opens new window)
.
# mounted
trigger timing
When the content rendered by Vue.js on the page has been mounted on the page. This event will not be fired if there is no content rendered by Vue.js on the page.
This event does not have any parameters.