refactor(router): 将异步路由守卫改为Promise链式调用
避免使用async/await语法,改用Promise.then/catch处理异步逻辑 添加错误处理流程,在周期选择检查失败时继续正常路由流程
Showing
1 changed file
with
32 additions
and
3 deletions
| ... | @@ -79,7 +79,7 @@ const checkCycleSelection = async (to) => { | ... | @@ -79,7 +79,7 @@ const checkCycleSelection = async (to) => { |
| 79 | } | 79 | } |
| 80 | }; | 80 | }; |
| 81 | 81 | ||
| 82 | -router.beforeEach(async (to, from, next) => { | 82 | +router.beforeEach((to, from, next) => { |
| 83 | // 使用404为中转页面,避免动态路由没有渲染出来,控制台报警告问题 | 83 | // 使用404为中转页面,避免动态路由没有渲染出来,控制台报警告问题 |
| 84 | if (to.path == '/404' && to.redirectedFrom != undefined) { | 84 | if (to.path == '/404' && to.redirectedFrom != undefined) { |
| 85 | // 模拟异步操作 | 85 | // 模拟异步操作 |
| ... | @@ -93,8 +93,8 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -93,8 +93,8 @@ router.beforeEach(async (to, from, next) => { |
| 93 | next({ ...to.redirectedFrom, replace: true }); | 93 | next({ ...to.redirectedFrom, replace: true }); |
| 94 | }, 1000); | 94 | }, 1000); |
| 95 | } else { | 95 | } else { |
| 96 | - // 检查是否需要周期选择 | 96 | + // 检查是否需要周期选择 - 使用Promise.then避免async/await |
| 97 | - const needsCycleSelection = await checkCycleSelection(to); | 97 | + checkCycleSelection(to).then(needsCycleSelection => { |
| 98 | if (needsCycleSelection) { | 98 | if (needsCycleSelection) { |
| 99 | // 保存目标路由到sessionStorage | 99 | // 保存目标路由到sessionStorage |
| 100 | sessionStorage.setItem('cycle_target_route', JSON.stringify({ | 100 | sessionStorage.setItem('cycle_target_route', JSON.stringify({ |
| ... | @@ -110,6 +110,7 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -110,6 +110,7 @@ router.beforeEach(async (to, from, next) => { |
| 110 | return; | 110 | return; |
| 111 | } | 111 | } |
| 112 | 112 | ||
| 113 | + // 继续原有的表单检查逻辑 | ||
| 113 | if (to.query.page_type === 'add' || to.query.page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息 | 114 | if (to.query.page_type === 'add' || to.query.page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息 |
| 114 | const existingCookie = Cookies.get(to.query.code); | 115 | const existingCookie = Cookies.get(to.query.code); |
| 115 | if (existingCookie && to.query.force_back !== '1') { | 116 | if (existingCookie && to.query.force_back !== '1') { |
| ... | @@ -134,6 +135,34 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -134,6 +135,34 @@ router.beforeEach(async (to, from, next) => { |
| 134 | } else { | 135 | } else { |
| 135 | next() | 136 | next() |
| 136 | } | 137 | } |
| 138 | + }).catch(error => { | ||
| 139 | + console.error('周期选择检查失败:', error); | ||
| 140 | + // 出错时继续正常流程 | ||
| 141 | + if (to.query.page_type === 'add' || to.query.page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息 | ||
| 142 | + const existingCookie = Cookies.get(to.query.code); | ||
| 143 | + if (existingCookie && to.query.force_back !== '1') { | ||
| 144 | + // TAG: 只能在进入路由之前判断,不然很多组件数据不渲染 | ||
| 145 | + showConfirmDialog({ | ||
| 146 | + title: '温馨提示', | ||
| 147 | + message: '您还未完成的表单,是否继续?', | ||
| 148 | + confirmButtonColor: styleColor.baseColor, | ||
| 149 | + cancelButtonText: '删除', | ||
| 150 | + closeOnPopstate: false, | ||
| 151 | + }) | ||
| 152 | + .then(() => { // 通过后把数据绑定上去 | ||
| 153 | + next(); | ||
| 154 | + }) | ||
| 155 | + .catch(() => { // 删除cookie | ||
| 156 | + Cookies.remove(to.query.code); | ||
| 157 | + next(); | ||
| 158 | + }); | ||
| 159 | + } else { | ||
| 160 | + next(); | ||
| 161 | + } | ||
| 162 | + } else { | ||
| 163 | + next() | ||
| 164 | + } | ||
| 165 | + }); | ||
| 137 | } | 166 | } |
| 138 | }) | 167 | }) |
| 139 | 168 | ... | ... |
-
Please register or login to post a comment