when does vue+axios need to intercept data, for example, what is the purpose of intercepting data before sending a request? What is the purpose of intercepting the data after it is returned?
there are good examples, for example, it is best to talk about the business scenario. Thank you!
when a large number of requests need to use the same field
Let me give you a more common scene. ajax whether the global loading component of the request is displayed or not.
loading component on the website (a small circle is placed in the upper-right corner, relative to the screen).
this thing is displayed when ajax is issued, but not when there is no ajax request.
you can't write show / hide code in every place where there is a ajax request. This is going to be a global intercept.
there is another situation-error handling.
you have agreed on a set of error codes with the backend. The backend returns the corresponding error code, and the frontend displays the error.
you may also add the same error handling function to each ajax , which is not necessary. It is also necessary to intercept returns and handle errors uniformly.
in fact, the problem of intercepting data before and after sending is a common occurrence in daily development. Let me list the following common scenarios:
of course, the handling of daily patches (missing fields at the back end, etc.) all need to intercept data and then complete (or modify).
Let's talk about the interception of requests first:
in a single-page application, if you need to save user information, you basically need to maintain a token (or something like that). The token needs to follow the request to the backend, which will intercept the request and dynamically inject token. Some fixed request header information will be used in this case. Another way is that your company has a fixed way to receive request parameters (weird receiving method), but if you want to write it normally in json form, then request interception will also be useful to transform the parameter transfer method.
Let's move on to response interception:
restful api does not have the problem of request error redirection, that is, even if the request goes wrong, the backend will respond normally, but it will provide you with an error code. In this case, the intercept response can process the error code returned by the backend response, and then perform corresponding operations, such as error messages. Of course, you can also deal with data, such as your company returns a strange data format (not json), can be processed into the front-end friendly format (json).
when sending, clear the useless fields. When accepting, globally identify the interface error, and perform pop-up window processing, such as code 0 success, code-1 failure, indicating the cause of failure, code-2 does not have login or permission, jump login
function of the interceptor: encapsulates the common part of each request data of the user, such as some cached data, such as token,headers settings, receiving type, etc.
figure 1 is the request interceptor, figure 2 is the response interceptor, according to the status, returned by the background, it is encapsulated in advance to determine whether it is a success or an error, and remind the user with a prompt box as to what the error is.
ios embedded h5 page input box will not lose focus if you click on the blank space. The soft keyboard will not fold. what should I do? try to bind the click event to document. If the input box loses focus when you click, it is still invalid. ...
as shown in the figure, how to determine that the user clicked on this X, and execute the corresponding method. ...
Mobile input focus cannot directly evoke the mobile phone keyboard, what is the related auxiliary operation? Simple H5 page, do not use any framework, how to automatically evoke the soft keyboard? ...
div1 {display: none} div2 {display: none} div3 {display: none} div4 {display: none} div5 {display: none} setTimeout (function) { var obj=document.getElementById ( "div1 "); obj.style.display= "inline "; }, 2000) how to display with settimeout...
when I was creating the exam. The start time can be earlier or later than the current time, but if the start time is later than the end time, I should prompt "the start time cannot be later than the end time ". If the start time is earlier than the curr...
requirements are as follows: click the addFisrt button to add the content of the first component, click addSecond to dynamically add the content of the second component and can add without limit ~ ask the great gods to provide ideas and methods ~ thank ...
in the official document, navigationbartitletext can only set the properties of the top bar in the json settings file. Under real machine debugging, the top bar text automatically runs to the far left side of the phone. How to set the top bar to center l...
1. For the following object, how to clear its property value editForm: { showDialog: false, id: , name: , url: , param: , nameSpace: , }, is there any other way (traversal...
there are three ul, on my page. I switch the contents of the ul when I click, but when I switch, I will see the content of the last ul flash. How to solve the problem of flashing? my code is like this <ul> <li v-for=&quo...
The problem occurs on the pop-up window of ElementUI. Click add, there will be a terminal type, function module, specific method. such a drop-down box, the value is using an excuse request. By default, you will be given 2 values in the terminal type, mo...
what is written on the current page is the input box that resets the password with only the password. After submitting the form, the browser jumps to log in, and then the browser gives a hint whether to remember the password and turns out to be like this...
Android can tell me what to do with this ...
when you click share, jump to this page and what to do ...
requirement: requirement is to replace an img tag in a string with an attribute of the img tag (name) example: aaaaaaaaaaaa <img name="U+1F608" src=".. .. static images emoji 1f608.png" style="width: 18px;height: 18px;m...
I have registered the same losing focus event function for each Input, and passed some unique parameters. If I just execute the event function, I can t get these parameters, and I want to trigger all of them. Is there any good way to do this? ...
as shown in figure 1, fileters.toFix (item.realPrice) can be used, while others cannot be used ...
how big should the company make an app,ui map of Android s built-in H5 page? Android Baidu says it wants to do 1080,1920, and H5 says it wants to do 640s or 750s ....
Today, when I saw someone else s promotion page, at first I thought it was an H5, but after opening it, I did not show the status bar and navigation bar, and checked the Wechat development documents, but there were no related documents, so I came here ...
how do I get the jquery object of the first right_box class name if I want to get the jquery object with the same class name with jquery? ...
which mobile adaptation method is better for a company to make an app,h5 page with an Android built-in H5 page? ...