首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux-Saga: UI阻塞,直到api调用返回api请求块。我们如何在不阻塞ui的情况下实现这一点?

在不阻塞UI的情况下实现Redux-Saga中的API调用返回阻塞的效果,可以通过以下方式实现:

  1. 使用非阻塞的异步调用:Redux-Saga提供了callfork两个Effect来处理异步调用。call会阻塞Saga直到调用完成,而fork则会立即返回并继续执行后续代码,不会阻塞Saga。因此,可以使用fork来实现非阻塞的API调用。
  2. 使用takeput进行消息传递:Redux-Saga中的take用于监听指定的action,而put用于发送action。可以在UI需要等待API调用返回的地方,使用take监听一个特定的action,然后在API调用返回后,使用put发送该action,从而实现UI的阻塞效果。

下面是一个示例代码,演示了如何在Redux-Saga中实现非阻塞的API调用:

代码语言:txt
复制
import { take, put, call } from 'redux-saga/effects';

// 定义一个异步调用的函数
function* fetchData() {
  // 发起API调用
  const data = yield call(api.fetchData);
  
  // API调用返回后,发送一个action
  yield put({ type: 'FETCH_SUCCESS', payload: data });
}

// 监听一个特定的action
function* watchFetchData() {
  while (true) {
    yield take('FETCH_DATA');
    yield fork(fetchData);
  }
}

// 启动Saga
function* rootSaga() {
  yield fork(watchFetchData);
}

// 在Redux中启动Saga
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

在上述示例中,watchFetchData函数使用take监听FETCH_DATA action,一旦该action被dispatch,就会调用fetchData函数进行API调用。而fetchData函数中的call会阻塞Saga直到API调用返回,然后使用put发送FETCH_SUCCESS action。这样,UI可以在需要等待API调用返回的地方监听FETCH_SUCCESS action,从而实现非阻塞的效果。

对于Redux-Saga的更多详细信息和用法,可以参考腾讯云的Redux-Saga产品介绍页面:Redux-Saga产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React saga_react获取子组件ref

call 有阻塞调用 saga 或者返回 promise 函数,只在触发某个动作。 takeEvery 循环监听某个触发动作,我们通常会使用while循环替代。...products = yield call(Api.fetch, '/products') // ... } 上述代码中,比如我们需要测试Api.fetch返回结果是否符合预期,通过调用call...4.redux-saga实现一个登陆和列表样例 接着我们实现一个redux-saga样例,存在一个登陆页,登陆成功后,显示列表页,并且,在列表页,可 以点击登出,返回到登陆页。...用框图可以更清楚分析: call方法调用阻塞主线程具体效果如下动图所示: 白屏时为请求列表等待时间,在此时,我们点击登出按钮,无法响应登出功能,直到请求列表成功,展示列表信息后,点击登出按钮才有相应登出功能...也就是说call方法阻塞了主线程。 (4) 无阻塞调用 我们在第二章中,介绍了fork方法可以类似与web work,fork方法不会阻塞主线程。

4.5K30

redux-saga学习

sagas监听发起action,然后决定基于这个action来做什么 (比如:是发起一个异步请求,还是发起其他action到store,还是调用其他sagas 等 ) 在redux-saga世界里...为什么直接传递incrementAsync?直接传一开始调用就被执行,根本不会实现监听效果。...在 yield delay(1000) 情况下,yield 后表达式 delay(1000) 在被传递给 next 调用者之前就被执行了(当运行我们代码时,调用者可能是 middleware。.../非阻塞调用 阻塞调用意思是,Saga 在 yield Effect 之后会等待其执行结果返回,结果返回后才会恢复执行 Generator 中下一个指令。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.7K10
  • JavaScript怎么模拟 delay、sleep、pause、wait 方法

    在这篇文章中,我们将探讨在JavaScript代码中实现延迟各种技巧,同时考虑到该语言异步性质。...理解JavaScript执行模型 现在我们已经有了一个快速解决方案,让我们深入了解JavaScript执行模型机制。理解这一点对于有效地管理代码中时间和异步操作至关重要。...然而,它不会等待请求完成。相反,它会继续执行,将“Hello!”输出到控制台,然后当请求在几百毫秒后返回时,它会输出仓库数量。...幸运是,这门语言在过去几年里有了很大发展,现在为我们提供了新构造来避免这一点。...; 优点:模仿传统sleep行为。 缺点:阻塞整个线程,可能会冻结UI或导致程序崩溃。 ⚠️ 强烈推荐:只有在你绝对需要暂停执行并且意识到其中风险时才使用。

    3.4K40

    C#异步方法

    异步编程基本概念异步编程允许程序在执行长时间运行任务( I/O 操作、网络请求等)时,不会被阻塞,从而可以继续执行其他任务。这种非阻塞特性对于提高应用程序响应性和性能至关重要。...它允许方法在等待时将控制权返回调用方,避免了调用线程阻塞。...这些返回类型表示正在进行异步操作。Task:表示返回正在进行中操作。Task:表示返回结果正在进行中操作。...异步方法最佳实践避免死锁在使用 async 和 await 时,一个常见问题是死锁。例如,在 UI 线程上同步等待一个异步方法可能会阻塞 UI 线程,导致应用程序无响应。...在其他情况下使用可能会导致异常处理和资源清理问题。

    84110

    Taro 小程序开发大型实战(六):尝鲜微信小程序云(上篇)

    UI 组件库[2]:我们用 Taro 自带路由功能实现了多页面跳转,并用 Taro UI 组件库升级了应用界面 实现微信和支付宝多端登录[3]:实现了微信、支付宝以及普通登录和退出登录 使用 Hooks...handlerSaga,即调用之后,不会阻塞后续执行逻辑。...实现请求 login API 在之前 user saga 文件里面,我们使用到了 userApi,它里面封装了用于向后端(这里我们是小程序云)发起请求逻辑,让我们马上来实现它吧。...登录逻辑是一个 try/catch 语句,用于捕捉可能存在请求错误,在 try 代码中,我们使用了 Taro 为我们提供微信小程序云云函数 API Taro.cloud.callFunction...配置云函数开发环境 我们在上一小节中使用 Taro 为我们提供云函数 API 调用了一个 login 云函数,现在我们马上来实现这个云函数。

    2.3K20

    Web Worker 内部构造以及 5 种你应当使用它场景

    ) { // 正确响应后需要执行代码 } }); 当然这里有个问题,上例能够进行异步请求是依靠了浏览器提供 API,其他代码又该如何实现异步执行呢?...Web Worker 是运行在浏览器内部一条独立线程,因此需要使用 Web Worker 运行代码也必须存放在一个 独立文件 中。这一点需要牢记在心。...为模拟光线轨迹,光线追踪需要 CPU 进行大量数学计算。光线追踪包括模拟光反射、折射及物质效果等。以上所有的计算逻辑都可以交给 Web Worker 完成,从而阻塞 UI 线程执行。...在此背景下,一些与 IndexDB 类似的 API 便应运而生了。从根本上来说,客户端一侧需要有数据存储能力。为保证存取时阻塞 UI 线程,这部分工作理应交给 Web Worker 完成。...好吧,在 IndexDB 中你可以不使用 Web Worker,因为它提供异步 API 同样不会阻塞 UI

    3.6K10

    JavaScript内部原理:浏览器内幕

    但,我们需要渲染UI,需要处理用户与UI交互。此外,我们还需要在发出网络请求时处理用户交互,对此却无能为力。当所有代码都是同步时候,我们如何实现并发呢? 这还得感谢浏览器引擎。...Blink 是用 c++ 中实现,它提供了DOM元素和事件、XMLHttpRequest、fetch、setTimeout、setInterval等 Web api,这些api可以通过 JS 访问。...当 V8 忙于处理堆栈帧时,浏览器被卡住了,应用程序 UI阻塞。用户将无法单击、导航或滚动。直到 V8 完成它工作,才会处理来自网络请求响应。...它无法处理事件/作业队列中回调,因为调用堆栈包含这一帧。 Web API我们提供了通过异步回调来编写非阻塞代码可能性。...使用这种并发模型,我们可以处理网络请求、用户与UI交互等等,而不会阻塞 JS 执行线程。 总结 对于希望能够解决复杂任务每个开发人员来说,理解 JS 环境由什么组成是至关重要

    1.2K30

    Taro 小程序开发大型实战(七):尝鲜微信小程序云(下篇)

    UI 组件库[2]:我们用 Taro 自带路由功能实现了多页面跳转,并用 Taro UI 组件库升级了应用界面 实现微信和支付宝多端登录[3]:实现了微信、支付宝以及普通登录和退出登录 使用 Hooks...sagas 监听到对应异步请求,开始处理流程 在 sagas 调用对应前端 API 文件向微信小程序云发起请求 微信小程序云函数处理对应 API 请求返回数据 sagas 中获取到对应数据,...如果调用成功,我们可以接收返回值,用于从后端返回数据,这里我们返回了 result.post 数据。 如果调用失败,则打印错误。...如果调用成功,我们可以接收返回值,用于从后端返回数据,这里我们返回了 result.posts 数据,即从小程序云返回帖子列表。 如果调用失败,则打印错误。...如果调用成功,我们可以接收返回值,用于从后端返回数据,这里我们返回了 result.post 数据,即从小程序云返回单个帖子。 如果调用失败,则打印错误。

    2.6K10

    一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

    具尤大说法,Redux 强制 immutability,在保证了每一次状态变化都能追踪情况下强制 immutability 带来收益很有限,为了同构而设计 API 很繁琐,必须依赖第三方库才能相对高效率地获得状态树局部状态...但不代表是唯一方式,还有很多方式,比如就不用 Action,而是在应用内部调用异步请求请求完毕直接 commit mutation,当然也可以。...USER_INTERACTED_WITH_UI_ACTION 这个 action 执行 yield take(USER_INTERACTED_WITH_UI_ACTION); // 阻塞...yield 都发起了阻塞,saga 会等待执行结果返回,再执行下一指令。...也就是相当于take、put、call、put 这几个方法调用变成了同步,上面的全部完成返回了,才会执行下面的,类似于 await。

    5.5K10

    状态管理概念,都是纸老虎

    具尤大说法,Redux 强制 immutability,在保证了每一次状态变化都能追踪情况下强制 immutability 带来收益很有限,为了同构而设计 API 很繁琐,必须依赖第三方库才能相对高效率地获得状态树局部状态...但不代表是唯一方式,还有很多方式,比如就不用 Action,而是在应用内部调用异步请求请求完毕直接 commit mutation,当然也可以。...USER_INTERACTED_WITH_UI_ACTION 这个 action 执行 yield take(USER_INTERACTED_WITH_UI_ACTION); // 阻塞...yield 都发起了阻塞,saga 会等待执行结果返回,再执行下一指令。...具体 MobX 使用,可以看这里。 对比 Redux 我们直观地上两坨实现计数器代码: ?

    5.3K20

    高频React面试题及详解

    卸载阶段: componentWillUnmount: 当我们组件被卸载或者销毁了就会调用我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效DOM元素等垃圾清理工作 一个查看react生命周期网站...由于JavaScript中异步事件性质,当您启动API调用时,浏览器会在此期间返回执行其他工作。...这么做坏处就是,至少不会阻塞用户输入了,但是依然有非常严重的卡顿。 切换到异步模式: 异步渲染模式就是阻塞当前线程,继续跑。在视频里可以看到所有的输入,表上都会是原谅色。...function saga 实现,代码异常/请求失败 都可以直接通过 try/catch 语法直接捕获处理 功能强大: redux-saga提供了大量Saga 辅助函数和Effect 创建器供开发者使用...分支覆盖等等 redux-saga缺陷: 额外学习成本: redux-saga不仅在使用难以理解 generator function,而且有数十个API,学习成本远超redux-thunk,最重要是你额外学习成本是只服务于这个库

    2.4K40

    redux-saga

    ,例如把[Effect1, Effect2]转换为并行调用 类似于装箱(把业务操作用Effect包起来)拆箱(执行Effect里业务操作),此外,完整redux-saga还要实现: 作为middleware...常用Effect creator如下: 阻塞型方法调用:call/apply 详见Declarative Effects 非阻塞型方法调用:fork/spawn 详见redux-saga’s fork...task返回结果 其中fork与spawn都是非阻塞型方法调用,二者区别是: 通过spawn执行task完全独立,与当前saga无关 当前saga不管它执行完了没,发生cancel/error也不会影响当前...:yield cancel(task)也是非阻塞(与fork类似),而被cancel掉任务在完成善后逻辑后会立即返回 P.S.通过join建立依赖关系(取task结果),例如: function*...,是个运行时抽象概念 redux-sagaSaga形式上是generator,用来描述一组操作,而generator是个具体静态概念 P.S.redux-saga里所说Saga大多数情况下都是

    1.9K41

    C# 高级:TAP 异步编程

    以下文章来源于精致码农 ,作者liamwang .NET大牛之路 • 王亮@精致码农 • 2021.10.12 我们应用程序广泛使用文件和网络 I/O 操作,I/O 相关 API 传统上默认是阻塞...前面我们讲了基于 System.Threading 命名空间多线程编程,该命名空间提供类型是直接和线程相关 API,虽然可以用来实现异步操作,但有些繁琐。...而 .NET Task 是为了简化使用“Promise”而设计 API。 Task 表示返回操作,Task 表示返回 T 类型操作。...本地库随后可能会调用到一个系统 API( Linux 上 Socket write()API)。Task 对象将通过层层传递,最终返回给初始调用者。...当任务在 Canceled 状态下完成时,任何在该任务注册延续任务仍都会被调用和执行,除非指定了诸如 NotOnCanceled 这样选项来选择延续。

    1K20

    一天梳理完react面试高频题

    这种机制可以让我们改变数据流,实现异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...(4)函数式编程React 把过去不断重复构建 UI 过程抽象成了组件,且在给定参数情况下约定渲染对应 UI 界面。React 能充分利用很多函数式方法去减少冗余代码。...但是在⼀定规模项⽬中,上述⽅法很难进⾏异步流管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏,min版25KB左右功能过剩: 实际上并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga...这个阶段可能会被 React 暂停,这一点和 React16 引入 Fiber 架构(我们后面会重点讲解)是有关;Pre-commit阶段:所谓“commit”,这里指的是“更新真正 DOM 节点

    4.1K20

    深入理解Kotlin中异步网络请求处理

    本文将深入探讨Kotlin中异步网络请求处理,包括其原理、优势以及如何在实际项目中实现。异步网络请求重要性在用户界面(UI)开发中,异步操作是至关重要。...它允许应用在阻塞主线程情况下,执行网络请求和其他耗时操作。这不仅提高了应用性能,还改善了用户体验。Kotlin通过协程(coroutines)提供了一种简洁和高效方式来处理异步任务。...异步网络请求实现在Kotlin中,可以使用多种库来执行异步网络请求Fuel、Retrofit等。下面我们将使用Fuel库来展示如何实现异步网络请求。...runBlocking是一个阻塞当前线程直到协程完成函数,它通常用于主函数中。错误处理在进行网络请求时,错误处理是必不可少。在上面的示例中,我们通过捕获异常来处理可能发生错误。...通过使用Fuel等库,开发者可以轻松实现异步请求,同时保持代码简洁性和可读性。

    15410

    揭开 JavaScript 事件循环神秘面纱

    它通过使用一些复杂数据结构给人一种多线程错觉。为实现这一点,Javascript 引擎有一个称为事件循环重要组件。我们将了解什么是事件循环以及它如何在阻塞主线程情况下处理异步任务。...事件循环是 Javascript 中一种机制,可以执行非阻塞异步操作。它允许 Javascript 在阻塞主线程情况下处理诸如从服务器获取数据、发出 HTTP 请求和处理用户事件等任务。...为了更好地理解事件循环,让我们列出用于执行异步代码组件 - 调用堆栈:JavaScript 使用调用堆栈来跟踪当前正在执行函数(执行上下文)。...当一个函数被调用时,它被添加到堆栈中,当它返回时,它被从堆栈中删除。...在这种情况下,注册 setTimeout 只能在 2000 毫秒后执行,而不是在 1000 毫秒后立即执行! 让我们深入研究下一个例子。

    28840

    【Web技术】639- Web前端单元测试到底要怎么写?

    下面来讲下稍微有点复杂地方,sagas 部分。 sagas 这里我用了 redux-saga 处理业务流,这里具体也就是异步调用 api 请求数据,处理成功结果和错误结果等。...组合好参数并调用对应 api 层。 如果正常返回结果,则发送成功 action 通知 reducer 更新状态。 如果错误返回,则发送错误 action 通知 reducer。...我们都知道这种业务代码涉及到了 api 或其他层调用,如果要写单元测试必须做一些 mock 之类来防止真正调用 api 层,下面我们来看一下 怎么针对这个 saga 来写测试用例: import {...我们可以用在业务代码同样方式来产生这些字面量对象,对于字面量对象断言就非常简单了,并且没有直接调用 api 层,就用不着做 mock 咯!...前面讲过调用后台请求是用 fetch ,我封装了两个方法来简化调用和结果处理:getJSON() 、 postJSON() ,分别对应 GET 、POST 请求

    3.1K30

    (转载非原创)React 并发功能体验-前端并发模式已经到来。

    因此,当一个代码运行时,其余必须等待执行。无法并发执行多线程工作。界面渲染也是一样。 一旦 React 开始渲染某些东西,无法中断直到运行完成。...开发人员可以使用一些技术,节流和防抖,这些技术会有一定帮助,但不是完美的解决方案。 节流限制特定函数被调用次数。使用节流,我们可以避免重复调用昂贵和耗时API或函数。...防抖会在预定时间内忽略对函数调用。函数调用仅在经过预定时间后进行。 下图描述了卡顿现象: 在等待非紧急 API 调用完成时,UI 卡顿,从而阻止呈现用户界面。...使用并发模式,我们可以: 控制首次渲染过程 优先处理渲染过程 暂停和恢复组件渲染 缓存和优化组件运行时渲染 隐藏显示内容直到需要展示时 随着 UI 渲染,并发模式改进了对传入数据响应,懒加载控件,...调用来替换createRoot 调用,在并发模式开发情况下阻塞模式为开发者提供了机会来修复bug或解决问题。

    5.8K00
    领券