When does a novice 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?

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!

Html html5 javascript
Mar.15,2021

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.

There is a global 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:

  • the data returned by the backend is not suitable for the direct use of front-end UI components
  • the structure used by the UI component is different from the data received by the back end (such as the tree component)
  • suppression before uploading pictures

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.

Previous: Pyspider crawler page contains lazy load lazy-load, to get no data

Next: The problem of full discount on shopping carts

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu