添加请求loading效果(响应拦截器)

因为很多地方需要用到请求,所以我们还是在拦截器中统一设置

可能因为网络原因导致请求延时,如果用户点击多次就会发送多次登录请求,导致以下错误

导航跳转重复,禁止重复导航到...↓

在请求拦截器中添加toast的loading效果

注意参数

forbidClick: true 表示背景无法点击,起到节流的效果

duration: 0 表示toast不会消失

最后在响应拦截中,当res.status === 200时清除掉toast即可(也就是请求成功)

不用担心Toast会重复,toast只会存在一个,下一个会把上一个覆盖

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 项目中,可以通过以下步骤封装 axios 的请求拦截响应拦截: 1. 安装 axios ``` npm install axios --save ``` 2. 创建一个 axios 实例 在项目中,一般会有多个接口请求,为了方便管理和配置,可以创建一个 axios 实例来处理所有的请求。在 `src` 目录下新建一个 `api` 文件夹,然后在该文件夹下新建一个 `http.js` 文件,输入以下代码: ```JavaScript import axios from 'axios' const http = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 5000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) export default http ``` 上述代码中,我们创建了一个名为 `http` 的 axios 实例,并设置了一些默认配置,如请求的基础 URL、请求超时时间、请求头等。 3. 设置请求拦截 请求拦截可以在请求发送前做一些处理,如添加请求头、添加 loading 等。在 `http.js` 文件中添加以下代码: ```JavaScript http.interceptors.request.use(config => { // 添加 loading // ... // 添加请求头 // ... return config }, error => { return Promise.reject(error) }) ``` 4. 设置响应拦截 响应拦截可以在接收到响应后做一些处理,如判断响应状态码、关闭 loading 等。在 `http.js` 文件中添加以下代码: ```JavaScript http.interceptors.response.use(response => { // 判断响应状态码 if (response.status === 200) { return Promise.resolve(response.data) } else { return Promise.reject(new Error(response.statusText)) } // 关闭 loading // ... }, error => { return Promise.reject(error) }) ``` 5. 通过 `http` 实例发送请求 在需要发送请求的组件中,可以通过 `http` 实例发送请求。例如,获取用户列表的代码如下所示: ```JavaScript import http from '@/api/http' export default { data() { return { userList: [] } }, mounted() { http.get('/user/list').then(res => { this.userList = res.data }) } } ``` 上述代码中,我们通过 `http` 实例发送了一个 GET 请求请求的 URL 为 `/user/list`。请求成功后,将响应数据赋值给 `userList`。 通过以上步骤,我们就成功地封装了 axios 的请求拦截响应拦截。在实际开发中,我们还可以根据项目需求进行更加复杂的封装。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值