Shulou(Shulou.com)05/31 Report--

Most people don't quite understand the knowledge points of this article "how to solve the failure of manual refresh page blocker after encapsulating Axios in Vue", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has certain reference value. I hope you can get something after reading this article. Let's take a look at this article "how to solve the problem that Vue manually refreshes the page blocker after encapsulating Axios".

Project type: vue+vux+axios

At first, the Axios was encapsulated in the http.js file, and then the interceptor was written directly in the main.js in order to use the prompt box message of VUX. Call the interface directly and everything is fine.

However, because the return value has a uniform code error code prompt, the code judgment is added to the interceptor to unify the return value. At first everything went according to the expected results. On a dark night, I was dizzy and pressed F5 to manually refresh the page. I was surprised to find that the interceptor had failed and did not intercept the Coode Json code layer outside, but directly smashed all the json data of the server in my face. I thought it was the interface problem, but the data printed directly with console.log in the component is correct.

Then I suddenly thought of a problem, if you click on the page to return, it is indeed OK, but if you press F5 to manually refresh, Axios will not directly go to the interceptor code in main.js.

Later, I put the interceptor in the encapsulated http.js, and everything was fine, but the sad thing is that after putting it on the outside, the vux prompt plug-in has no way to use it.

Printed the this pointer, sure enough undefind, and then came up with a more flexible method. I added a var app in index.html to store the initialized vue object in main, and assigned the initialized vue object to windows.app in main.js, so that the whole world can be used.

Add the vux prompt code to window.app.$vux.toast.show to solve the problem perfectly!

The above is about "Vue manual refresh page blocker after encapsulating Axios is invalid how to solve" this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge, please pay attention to the industry information channel.

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.