Проблема з React JS: Відправка запитів у циклі після виникнення виключення на бекенді
6 Березня 2024 в 01:22 107
У розробці веб-додатків на React JS, особливо з використанням Axios або інших бібліотек для виконання запитів, часто виникають ситуації, коли відправка запитів може відбуватися в безкінечному циклі після виникнення виключення на бекенді. Ця стаття розгляне таку проблему та запропонує рішення для її вирішення.
Однією з особливостей розробки веб-додатків на React JS є те, що вони зазвичай взаємодіють з сервером через HTTP-запити. Для виконання цих запитів часто використовуються бібліотеки, такі як Axios, які надають можливість взаємодіяти з сервером шляхом відправки запитів та обробки відповідей.
Проте, при виконанні запитів можуть виникати різноманітні ситуації, такі як помилки на бекенді або проблеми з мережею, які можуть призводити до виникнення виключень. У деяких випадках, коли виникає виключення внаслідок помилки на бекенді, реакція на цю помилку може призвести до непередбачуваних наслідків, зокрема, до відправки запитів у безкінечному циклі.
Одним з типових сценаріїв, коли ця проблема може виникнути, є випадок, коли на бекенді виникає виключення в обробнику запитів або під час обробки даних. Наприклад, у випадку виникнення виключення в блоку catch під час обробки відповіді на запит, де використовується Axios, сторінка може продовжувати відправляти запити у циклі, не зупиняючись, що призводить до перевантаження сервера та інших негативних наслідків.
Для розв’язання цієї проблеми необхідно належно обробляти виключення під час виконання запитів та вживати заходів для запобігання відправці запитів у безкінечному циклі. Один із шляхів вирішення цієї проблеми – правильне управління помилками та відповідні перевірки під час обробки виключень у коді.
Давайте розглянемо приклад коду, який може призвести до виникнення цієї проблеми та розглянемо можливі шляхи вирішення.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
// Код, який викликає проблему надсилання запитів у циклі customAxios.interceptors.response.use( undefined, error => { const errorConfig = error.config; const user = JSON.parse(localStorage.getItem('authUser')); console.log("url is" + errorConfig.url) if (user) { if (errorConfig.url !== Constants.LOGIN_URL) { if (error.response?.status === 401 && !errorConfig.retry) { errorConfig.retry = true; //отримати оновлений токен, якщо токен став неактивним, або перенаправити на сторінку помилки if (!refreshPromise) { const user = JSON.parse(localStorage.getItem('authUser')); UserService.refreshToken(user) .then(response => { localStorage.setItem('authUser', JSON.stringify(response.data)); refreshPromise = response.data.refreshToken return customAxios(errorConfig); }).catch(e => { customAxios(errorConfig); //виникає виключення, і цикл продовжується localStorage.setItem('errorMsg', e.response.data.message); window.location.href = Constants.ERROR_PAGE; return Promise.reject(error); }).finally( clearPromise(errorConfig) ); } else { return customAxios(errorConfig); } } else if (errorConfig.retry) { return customAxios(errorConfig); } else { return Promise.reject(error); } } else { return Promise.reject(error); } } else { if (errorConfig.url !== Constants.LOGIN_URL) { localStorage.setItem('errorMsg', 'Unauthorized access'); window.location.href = Constants.ERROR_PAGE; return Promise.reject(error); } else { return Promise.reject(error); } } } ); |
У цьому прикладі код
Останні новини
Читайте також
