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

最新推荐文章于 2024-07-18 15:48:23 发布
最新推荐文章于 2024-07-18 15:48:23 发布
阅读量103 收藏
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4867/article/details/139456866
版权

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

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

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

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

注意参数

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

duration: 0 表示toast不会消失

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

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

a4867
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angularjs注入拦截器实现Loading效果
10-23
在描述中提到的场景中，我们关注的是如何使用拦截器来实现一个加载指示器（Loading effect），以提供更好的用户体验，尤其是在全AJAX应用中，当用户发起请求但结果尚未返回时，页面保持静默，没有反馈。 首先，我们...
axios的拦截请求与响应方法
10-18
请求拦截器在请求被发送到服务器之前调用，而响应拦截器则在服务器响应返回到客户端之后调用。 ### 请求拦截器 请求拦截器可以用来在请求发送前做一些预处理工作。例如，在以下代码中，我们展示了如何设置一个请求...
【Vue】优化：添加请求 loading 效果
qq_39921135的博客
06-12 322
背景：有时候因为网络原因，一次请求的结果可能需要一段时间后才能回来， 此时，需要给用户 添加 loading 提示。目标：统一在每次请求后台时，添加 loading 效果。如果需要多个Toast，则需要配置，但一般不用。请求拦截器中，每次请求，打开 loading。响应拦截器中，每次响应，关闭 loading。请求时，打开 loading。
vue 请求拦截器响应拦截器添加Loading... 工具函数
weixin_44040867的博客
08-14 1873
import axios from 'axios'; import { Message, Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入 import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function startLoading() { //使用Element loading
请求拦截器和响应拦截器
m0_59006402的博客
06-15 1万+
什么是响应拦截器? 就是我们在登陆之后,服务器会生成一个token,返给客户端 token具有时效性,refresh_token 是刷新token,等token过期之后,用它去换新的token ，
uniapp 请求封装，拦截器：请求拦截、响应拦截
热门推荐
全易
10-27 5万+
uniapp 封装请求拦截、响应拦截。预先处理请求参数和详情数据等
vue请求响应拦截使用封装的Loading
Weivvv_的博客
10-11 374
【代码】vue请求响应拦截使用封装的Loading。
封装axios请求方法、请求拦截器、响应拦截器
m0_46258282的博客
01-20 2188
封装axios请求方法、请求拦截器、响应拦截器
Vue3使用axios请求拦截器和vuex设置全局loading
m0_74213811的博客
05-24 952
通过axios拦截器和vuex设置全局loading。
uniapp封装请求拦截和响应拦截的方法
luoxiaonuan_hi的博客
03-24 9566
在封装接口的api文件下的modules下的auth.js文件中，引入request文件并传入接口所需参数。把api下的module文件下的所有js文件在index.js文件中 引入并统一用变量Api接收进行导出。这里贴上完整的request.js请求响应拦截的代码。最后在main.js的入口文件中导入Api并全局挂载。建立resquest请求文件。
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
10-17
接下来，我们需要在axios的请求和响应拦截器中改变`isShow`的状态。在`main.js`中添加以下代码： ```javascript Axios.interceptors.request.use(function (config) { store.state.isShow = true; // 请求开始时...
AngularJS使用拦截器实现的loading功能完整实例
11-29
在AngularJS中，拦截器（Interceptor）是一种强大的机制，它允许我们在HTTP请求的生命周期的不同阶段进行干预，例如在请求发送前、响应返回后或者在处理错误时。在本实例中，我们将探讨如何利用拦截器来实现一个加载...
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
最新发布
yrldjsbk的博客
07-18 357
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1303
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 570
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
【Vue】 style中的scoped
DX390609的博客
07-15 168
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 303
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
vue项目中如何封装axios的请求拦截和响应拦截步骤
05-14
在 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、付费专栏及课程。

余额充值