# Front-end network request
[[toc]]
WARNING
This section only applies to Blessing Skin v4
# Migrating from v3 to v4
# code migration
You should read this section if you are migrating your plugin from supporting v3 to supporting v4.
In Blessing Skin v3, all AJAX is done by calling a function called
fetch. But this function does not really come from the
fetch function of the browser itself, that is to say, Blessing Skin v3overwrites
the fetchfunction of the browser itself . The
fetch function inBlessing Skin v3 is actually $.ajaxwrapped by
Promise.
fetchfunction provided by the browser . So, if you are migrating,
there are two solutions.
The first is to replace fetch with ``$.ajax, which is a temporary
solution. Since the jQuery library has not been removed in Blessing Skin
v4, all methods in jQuery can continue to be used. But be aware that
what the $.ajaxmethod returns is not really a Promise,
fortunately, the object it returns is a thenable object, so it can be
resolved by simply using Promise.resolve(). However, with the
$.ajaxfunction, you won't get some of the convenience features that
blessing.fetch has.
The second is to use the functions provided by Blessing Skin v4 for making network requests, which is the recommended way, but takes a little bit of time to change your code. See below for specific usage.
# Please do not override the fetchfunction
In Blessing Skin v3, because the front-end code does not provide enough interfaces for the plugin, some special operations are not easy to perform.
Some of the plug-ins overwrite the original
fetch in order to modify the data sent by the front-end to the back-end.This
practice is absolutely not allowed in Blessing Skin v4. Because Blessing
Skin v4 uses the browser's native Fetch API, if fetchis overwritten,
it will affect the operation of Blessing Skin itself.
But there is still a need to modify the data. For this reason, in
Blessing Skin v4, we will trigger an event called
beforeFetch before the ``fetch operation. You can modify the
requested data when the event is triggered by listening to this event.
See below for usage details.
# Use blessing.fetch
Blessing Skin v4 wraps the Fetch API, so you don't have to pay too much
attention to how to use the Fetch API. These functions are encapsulated
in blessing.fetch( blessingis a global variable).
blessing.fetchhave the following features, no need for any
configuration, out of the box.
# base URL
You don't need to fill in the full URL, just the relative path. Even if the user's Blessing Skin is installed in a subdirectory, it can be easily resolved.
# exception handling
blessing.fetchhave already handled exceptions for you. If an error
occurs while making an HTTP request, Blessing Skin will pop up a modal
error dialog.
# CSRF Token
CSRF Token will be automatically added before HTTP request without intervention.
# parsing JSON
Content-Type ofthe response returned by the backend is
application/json, the JSON content in the response will be
automatically parsed into JavaScript data (usually an object);
otherwise, it will be returned as text.
# APIs
All methods in blessing.fetch return ``Promises. Currently
blessing.fetchprovides the following methods:
# get
Make a GETrequest. This method receives two parameters, urland
params.
# url
Type: string. This parameter must exist and is used to specify the target URL you want to request, but it does not need to fill in the complete URL.
# params
Type: JavaScript object. This parameter is optional. If this parameter exists, the object will be converted into the query string of the URL, and then spliced after the URL you provided earlier.
# post
Make a POSTrequest. This method receives two parameters, urland
data.
# url
Type: String. This parameter must exist and is used to indicate the target URL you want to request, but it does not need to fill in the complete URL.
# data
Type: There can be two types, one is JavaScript object and the other is
FormData. This parameter is optional. If the parameter is a
JavaScript object, the object will be serialized as JSON; if the
parameter is FormData, it will be submitted as FormData .
# event
When you use the methods in blessing.fetch, some events are fired.
You can listen to these events to implement certain operations, such as
modifying data.
# beforeFetch
trigger timing
before calling the Fetch API.
The event passes a parameter to your callback function. The parameter is an object containing the following properties.
# method
type: string
Meaning: Indicates the HTTP verb of the current request, namely
GETand POST, etc. Please do not modify this property.
# url
type: string
Meaning: Indicates the target URL of the current request. Note that this URL is not a complete URL. Do not modify this modification property unless necessary.
# data
Type: JavaScript object. It may also be FormData, but currently only
when the material is uploaded on the "Upload Material" page, this value
will be FormData, and in other cases it is a JavaScript object.
Meaning: The data to be transferred. For example, in a GET request, it will be converted into a query string; in a POST request, it will be serialized into JSON.
send additional data to the backend by modifying the
data attribute.For example, suppose you want to require an invitation
code when a user registers, then you can add additional data by
listening to this event and modifying the data attribute.Such as:
blessing . event . on ( 'beforeFetch' , request => {
request . data . invitationCode = $ ( '#invitation-code' ) . val ()
})
# fetchError
trigger timing
When an error occurs using the Fetch API. This event will be triggered when the current network fails or the returned HTTP status code is not 2xx.
Note that even if you listen for this event, the modal alert dialog will still appear if an error occurs.
The type of the parameter passed to the callback function may be an
Errorinstance or an ordinary string.
Sometimes, you may want to do some processing if the data cannot be obtained normally (for example, prompting the page that "data cannot be obtained temporarily"), then this event is very useful. You can write like this:
blessing . event . on ( 'fetchError' , error => {
$ ( '#somewhere' ) . text ( 'Data temporarily unavailable' )
})