zhousg
commented
1 year ago https://github.com/sunniejs/vue-h5-template/blob/vue-h5-template/src/utils/request/index.ts https://github.com/PanJiaChen/vue-admin-template/blob/master/src/utils/request.js
这个算是比较常见通用处理错误消息的方式，再说封装也仅适用当前项目，如果要在往上提升一层到多项目的通用工具需要和UI解绑
然后置于登录没有catch，是因为失败后台给的响应状态码错误，会触发响应拦截器，在响应拦截已经处理的错误信息，如果需要额外的错误需求，可以在添加catch
新手上路，从项目中学到了很多。感谢。不过有些地方，我总感觉不太对劲?
比如响应拦截器里面有行代码: showToast(res.data.message || '业务失败')， 我觉得 utils 工具类不应该直接依赖UI组件？应该继续把响应往上层传，在.vue那边弹窗？不然，以后想换个UI组件库，还得去全局搜各个地方的 vant 调用?
还有个挺纠结的地方, login/index.vue 里: const res = isPass.value ? await loginByPassword(mobile.value, password.value) : await loginByMobile(...) ... showSuccessToast('登录成功')
这里感觉挺怪的，调用 login 之后，直接就提示'登录成功'了，就好像不会失败一样，结果虽然没错，但总感觉失去了业务代码流转的可读性，不利于代码阅读和维护。
感觉我学的那种古老的js请求代码更有易于阅读? let res = await login(mobile.value, password.value) if(res.success){ //显示成功或者跳转 }else{ //错误弹窗 } 哪怕是用 catch 做失败分支，然后显示失败信息，我都觉得整体代码条理清晰一些。
想问下，我想将 request.ts 里的 vant 调用调整到.vue层次，然后保持清晰的代码判断逻辑，整体应该怎么改？