We have a vue project that has over 1000 pages, and all the pages are using a centralized axios-based request module to send requests to BE, in order to know which page uses what APIs, we use axios interceptor to collect the APIs a particular pages uses, that get the current route path the the API about to goes out.

However, we soon find problems, that the mappings we collect is not correct when the API is being handled async, for a simple example, if you have a request in setTimeout, it will mess it up that the routes has changed before the API was actually sent. And it would collect a wrong mapping.

We were trying very hard to find a solution that can actually solve this problem without making massive changes.

I understand the best way of solving this was to leverage the JS closure that fixing the route info for each page component and pass it to the request as a param. Or a request factory method for all pages. But this almost need us to do changes everywhere.

So with these I do need suggestions on an elegant way to solve this with minimum changes !!!

Let me know if there is anywhere that is not clear. Or if you have no idea on the solution probably can share with me the thoughts on this, how your orgnization did the similar things ???