如何将 vuetify 里的 progresslinear 进度条组件跟 axios 的请求请求拦截器，响应拦截器结合起来呢

[dafuyang]

本人前端业余菜鸟，最近在学习 vuetify ，发现没有类似 Element-UI 提供已经注册好的 this.$message ，this.$notify 之类的方法可以直接调用组件，目前 axios 已经做了二次封装，想再结合里面的 v-progress-linear 组件实现接口请求自动显示进度条，回调结束后自动结束进度条，目前没有想到好的方法，求各位大佬提供思路，不胜感激

[wunonglin]

把组件业务做到全局 http 拦截器里是普遍的错误用法，在拦截器里做消息提示也是。

正确的应该是在请求所处的组件内做。

以路由加载进度举例：假如你的进度条写在 app.vue ，那么你应该就在 app.vue 监听路由变化，从而调整进度。

换到你的案例：
首先放弃在全局拦截器里做这种事。
先设定一个概念：“流程”，一个流程里是要做一些事的，比如有 N 个请求或其他同 /异步的 function 。

假设打开一个用户列表页面为一个流程，流程里分别请求：用户列表、组织树、分类树，如果你在全局拦截器做进度条的话，那么你在打开页面的时候，每个请求都会设置不同的数值，因为每个请求的时间不一样，导致进度条抖动。

所以，你应该一个流程中，只设置一个线性的值，0-100 递增，不应该第一个到了 70 了，第二个请求又给你设置一个 40 。


在初始化流程里，正确的例子应该是这样
```
async function init(){
setProgress(0)
await getOrganization()
setProgress(30)
await getType()
setProgress(70)
await getList()
setProgress(100)
}
```

在刷新用户列表的流程里，应该是这样
```
async function refresh(){
setProgress(0)
await getList()
setProgress(100)
}
```

[wunonglin]

消息提醒也是同样的逻辑。

写到拦截器的话，一个流程如果有多次请求，那么错误提示就会一连贯出现好几个。

错误的：
```
async function init(){
await getOrganization() // openErrorMessage('getOrganization XXX')
await getType() // openErrorMessage('getType XXX')
await getList() // openErrorMessage('getList XXX')
}
```

正确的
```
async function init(){
try{
await getOrganization()
await getType()
await getList()
}catch(e){
openErrorMessage('init error: XXXX')
}
}
```

[wunonglin]

更佳建议：当在一个流程里，如果其中一个出现错误，应该取消其他请求，然后弹出错误提示。
可以看我写的这个例子： https://stackblitz.com/edit/lvabgg?file=index.ts

[dafuyang]

@wunonglin 感谢大佬深夜详细回复，收益匪浅！不过我这边的网站进度条是在页面的导航栏下面而且开启了恒定动画循环来回滚动的属性，截图是这样的： https://thumbsnap.com/qrFQHsak ，所以没有人为去手动设置进度，我一开始的想法是结合 axios 前后拦截器通过:active 属性简单控制进度条的展示与消失，因为这个是个人学习项目想着能简单就简单不想重复处理所以才提出了本帖子的问题，求大佬指点、

[wunonglin]

@dafuyang #4

indeterminate 的话，道理是相同的，无非就是设置 setProgressStart 和 setProgressEnd 罢了。组件要控制这个 progress 的状态可以用 vuex 等来控制就行了

[wunonglin]

这是我项目的一个例子

https://imgur.com/undefined

[wunonglin]

https://imgur.com/Hrlhuox

[dafuyang]

@wunonglin 感谢大佬，之前还没有学习到 vuex ，学习后才知道可以结合起来，目前是很能满足我的需求了， 非常感谢大佬又贴图又提供思路 ！