请你扮演一个高级前端,告诉我axios封装了请求拦截和响应拦截,请求拦截中设置了vant中的toast,响应拦截中清除了toast,但是我在页面中使用toast时,想多停留几秒,而不是接口响应后就清除,该怎么设置,所有的接口都走了全局的请求拦截和响应
时间: 2024-03-17 22:40:48 浏览: 78
好的,如果axios封装了请求拦截和响应拦截,并且请求拦截中设置了vant中的toast,响应拦截中清除了toast,但是你在页面中使用toast时,想让它多停留几秒钟,可以通过在axios的请求拦截中添加一个自定义配置,然后在页面中使用局部toast组件,并根据自定义配置来设置停留时间。
具体做法是在axios的请求拦截中添加一个自定义配置,如下所示:
```javascript
import axios from 'axios';
import { Toast } from 'vant';
axios.interceptors.request.use(config => {
// 在请求拦截中设置toast
Toast.loading({
message: '加载中...',
duration: 0 // 不自动关闭
});
// 添加一个自定义配置项
config.custom = { showToast: true };
return config;
}, error => {
return Promise.reject(error);
});
```
然后在页面中使用局部toast组件,并根据自定义配置来设置停留时间,如下所示:
```javascript
import { Toast } from 'vant';
import axios from 'axios';
axios.get('/api/data', {
params: {
id: 1
}
}).then(res => {
// 在响应拦截中清除toast
if (res.config.custom.showToast) {
Toast.clear();
}
// 在页面中使用toast,并根据自定义配置来设置停留时间
Toast.success({
message: '请求成功',
duration: 5000 // 设置停留时间为5秒
});
}).catch(error => {
// 在响应拦截中清除toast
if (error.config.custom.showToast) {
Toast.clear();
}
// 在页面中使用toast,并根据自定义配置来设置停留时间
Toast.fail({
message: '请求失败',
duration: 5000 // 设置停留时间为5秒
});
});
```
这样就能够让toast组件在页面中停留更长的时间了,而不受全局请求拦截和响应拦截的影响。
阅读全文