混淆| Redux saga在API请求失败时不会抛出任何错误 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

redux-saga入门

文章目录资料 redux-saga简介常用API takeLatest takeEvery take delay put call fork cancel all 案例1：错误处理了案例2：错误未处理...saga中yield 后面的内容我们称呼它为Effect(redux-saga的任务单元)，在Effects中我们可以进行启动其它saga，也可以处理一些副作用操作。...如果参数中某个任务失败且该任务未对错误进行处理，那么错误将冒泡到all所在的Generator中，且取消其他任务。如果错误被catch处理，那么依然视为完成。不会取消其它任务。...一个失败的Promise，这相当于抛出一个内容为1000的错误 yield Promise.reject('1000') // 1.2，控制台不会输出'task1'，因为1.1已经抛出一个错误，所以这段代码不会被执行...一个失败的Promise，这相当于抛出一个内容为1000的错误 yield Promise.reject('1000') // 1.2，控制台输出'task1'，因为1.1已经抛出一个错误，所以这段代码不会被执行

1.8K2 0

redux-sage笔记

也一直听说redux-saga是个和redux-thunk能够实现类似功能的库，而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...以下是一些saga的常用方法 redux/saga takeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts) 每当有PRODUCTS_REQUESTED...取消fork事务的时候，会在authorize内抛出一个错误 yield call(Api.clearItem('token'))//清空本地的token } } race 用法：race...SagaCancellationException（在redux-sage下）错误。...未被捕获的话，这个错误是不会向上冒泡的使用redux-saga来处理一些复杂的流程的时候似乎比较不错

8993 0

您找到你想要的搜索结果了吗？

是的

没有找到

redux-saga学习

sagas监听发起的action，然后决定基于这个action来做什么 (比如：是发起一个异步请求，还是发起其他的action到store，还是调用其他的sagas 等 ) 在redux-saga的世界里...（即高级 API） Effect 创建器以下每个函数都会返回一个普通 Javascript 对象（plain JavaScript object），并且不会执行任何其它操作。...这个过程会一直重复，直到 Generator 正常终止或抛出错误。...这个 effect 是非阻塞型的，并且所有向下游抛出的错误（例如在 reducer 中），都不会冒泡回到 saga 当中。...在所有 Effect 完成之前，有一个 Effect 被 reject：在 Generator 中抛出 reject 错误。

3.4K1 0

前端高频react面试题

在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。当然，实质上 React 的源码里不是数组，是链表。...于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。...Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...” thunk function异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强⼤: redux-saga...当 setState 传入 null 时，并不会触发 render。

4.6K2 0

Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）

现在我们要去向小程序云发起请求，这个请求是一个异步的请求，它不会立刻得到响应，所以我们需要一个中间状态（这里我们使用 Saga）来回处理这个异步请求并得到数据，然后再执行和之前同步请求类似的路径，即为我们上图中绿色的部分...login 也是一个生成器函数，在它内部是一个 try/catch 语句，用于处理登录请求可能存在的错误情况。...实现请求 login API 在之前的 user saga 文件里面，我们使用到了 userApi，它里面封装了用于向后端（这里我们是小程序云）发起请求的逻辑，让我们马上来实现它吧。...登录逻辑是一个 try/catch 语句，用于捕捉可能存在的请求错误，在 try 代码块中，我们使用了 Taro 为我们提供的微信小程序云的云函数 API Taro.cloud.callFunction...如果调用失败，则打印错误。

2.8K2 0

2022社招React面试题附答案

React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们，一气呵成。...树的任何位置。...Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...“⿊魔法” thunk function 异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强⼤...(res.data) // 将action发送到reducer yield put(action) }catch(e){ console.log('网络请求失败

2.8K5 0

2021高频前端面试题汇总之React篇

React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们，一气呵成。...树的任何位置。...Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...)，⽽不是充满 “⿊魔法” thunk function 异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理...res.data) // 将action发送到reducer yield put(action) }catch(e){ console.log('网络请求失败

2.8K0 0

每日两题 T35

redux-saga redux-saga 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单...，在处理故障时更容易。...你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk，你不会再遇到回调地狱了，你可以很容易地测试异步流程并保持你的 action 是干净的。...redux-saga与其他redux中间件比较 •redux-thunk 的缺点在于api层与store耦合，优点是可以获取到各个异步操作时期状态的值，比较灵活，易于控制 •redux-promise的优点是...api层与store解耦，缺点是对请求失败，请求中的情形没有很好的处理 •redux-saga 的优点是api层与store解耦，对请求中，请求失败都有完善的处理，缺点是代码量较大 References

1.1K3 0

高级前端react面试题总结

如果认为在componentWillMount里发起请求能提早获得结果，这种想法其实是错误的，通常componentWillMount比componentDidMount早不了多少微秒，网络上任何一点延迟...在React中，组件返回的元素只能有一个根元素。为了不添加多余的DOM节点，我们可以使用Fragment标签来包裹所有的元素，Fragment标签不会渲染出任何元素。...Redux 请求中间件如何处理并发使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。...” thunk function异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强⼤: redux-saga...componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。

5.5K4 0

Taro 小程序开发大型实战（七）：尝鲜微信小程序云（下篇）

创建帖子逻辑是一个 try/catch 语句，用于捕捉可能存在的请求错误，在 try 代码块中，我们使用了 Taro 为我们提供的微信小程序云的云函数 API Taro.cloud.callFunction...如果调用失败，则打印错误。...这样我们在帖子详情时可以直接拿 postId 向小程序云发起异步请求。...如果调用失败，则打印错误。...如果调用失败，则打印错误。

3.1K1 0

React之redux学习日志（reduxreact-reduxredux-saga）

Redux 搭配 React 使用安装： npm install --save react-redux 3.1. react-redux在React中的使用方式　　· 在react入口文件中注入...当我们需要执行一些异步操作时，由于action中只能返回一个对象，从而需要借助一些中间件来达到目的，redux-thunk 和 redux-saga是常见的两种中间件。　　.../api' // 可以在create-action.js中新增一个 action： updateUserInfoAction import { updateUserInfoAction } from...(action) { // 声明 effects 函数 call：发起一次请求 call([api, [args]]),args是请求的参数 const res = yield call...、react-redux的基本用法和redux-saga中间件的使用，若有错误请各路大佬指出加以改正和学习智者说话，是因为他们有话要说；愚者说话，则是因为他们想说。

9683 0

2022社招react面试题附答案

由于JavaScript中异步事件的性质，当您启动API调⽤时，浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时，它不会等待componentWillMount它完成任何事情。...⾸先，在服务器渲染时，如果在componentWillMount⾥获取数据，fetch data会执⾏两次，⼀次在服务端⼀次在客户端，这造成了多余的请求。...； componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染 shouldComponentUpdate...的参数依然是⼀个纯粹的 action (FSA)，⽽不是充满 “⿊魔法” thunk function；异常处理：受益于 generator function 的saga实现，代码异常/请求失败都可以直接通过...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的

2.9K1 0

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

一般是这样一个过程：请求开始时，dispatch 一个请求开始 Action，触发 State 更新为“正在请求”状态，View 重新渲染，比如展现个Loading啥的。...请求结束后，如果成功，dispatch 一个请求成功 Action，隐藏掉 Loading，把新的数据更新到 State；如果失败，dispatch 一个请求失败 Action，隐藏掉 Loading，...redux-saga 把异步获取数据这类的操作都叫做副作用（Side Effect），它的目标就是把这些副作用管理好，让他们执行更高效，测试更简单，在处理故障时更容易。...saga 代码采用类似同步的方式书写，代码变得更易读。代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理。...比如传统的 TODO 应用，用 redux + redux-saga 来表示结构，就是这样： saga 拦截 add 这个 action, 发起 http 请求, 如果请求成功, 则继续向 reducer

6.1K1 0

状态管理的概念，都是纸老虎

一般是这样一个过程：请求开始时，dispatch 一个请求开始 Action，触发 State 更新为“正在请求”状态，View 重新渲染，比如展现个Loading啥的。...请求结束后，如果成功，dispatch 一个请求成功 Action，隐藏掉 Loading，把新的数据更新到 State；如果失败，dispatch 一个请求失败 Action，隐藏掉 Loading，...redux-saga 把异步获取数据这类的操作都叫做副作用（Side Effect），它的目标就是把这些副作用管理好，让他们执行更高效，测试更简单，在处理故障时更容易。...在聊 redux-saga 之前，需要熟悉一些预备知识，那就是 ES6 的 Generator。...saga 代码采用类似同步的方式书写，代码变得更易读。代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理。

5.8K2 0

一天梳理完react面试题

当 setState 传入 null 时，并不会触发 render。...4）错误处理阶段componentDidCatch(error, info)，此生命周期在后代组件抛出错误后被调用。它接收两个参数∶error：抛出的错误。...Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...” thunk function异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强⼤: redux-saga...个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是rxjs

6.4K3 0

React saga_react获取子组件ref

首先，在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。...call方法应用很广泛，在redux-saga中使用异步请求等常用call方法来实现。...，这里先提一笔，fork方法相当于web work，fork方法不会阻塞主线程，在非阻塞调用中十分有用。...，我们在本地mock，通过redux-saga的工具函数delay，delay的功能相当于延迟xx秒，因为真实的请求存在延迟，因此可以用delay在本地模拟真实场景下的请求延迟。...用框图可以更清楚的分析： call方法调用阻塞主线程的具体效果如下动图所示：白屏时为请求列表的等待时间，在此时，我们点击登出按钮，无法响应登出功能，直到请求列表成功，展示列表信息后，点击登出按钮才有相应的登出功能

5.4K3 0

redux-saga

我们知道React等单页应用在开发时，页面变化依赖于state 随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state（状态）。...一些库如 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是，React 依旧把处理 state 中数据的问题留给了你。Redux 就是为了帮你解决这个问题。...因此我们首先得学习Redux，中文官网地址：http://cn.redux.js.org/ 此时我们可以很好的在大型项目中管理我们的state了，但如果我们要异步获取数据、访问浏览器缓存等操作，就需要用到...Redux-Saga 官网地址(英文)：https://redux-saga.js.org/ 中文文档地址：https://redux-saga-in-chinese.js.org/ 我简单进行入门了一下...，编写了一个redux-saga的getting start demo https://gitee.com/VampireAchao/simple-redux-saga.git 注释都写得比较完善运行方式

7961 0

百度前端高频react面试题（持续更新中）_2023-02-27

Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...“⿊魔法” thunk function 异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强⼤...React-intl提供了两种使用方法，一种是引用React组件，另一种是直接调取API，官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。...如果认为在componentWillMount里发起请求能提早获得结果，这种想法其实是错误的，通常componentWillMount比componentDidMount早不了多少微秒，网络上任何一点延迟...于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

3.2K3 0

2021高频前端面试题汇总之React篇

在这里，"render"的命名可以是任何其他有效的标识符。...使用pureComponent的好处：当组件更新时，如果组件的props或者state都没有改变，render函数就不会触发。省去虚拟DOM的生成和对比过程，达到提升性能的目的。...Redux 中异步的请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助redux。...)，⽽不是充满 “⿊魔法” thunk function 异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理...res.data) // 将action发送到reducer yield put(action) }catch(e){ console.log('网络请求失败

2.6K0 0

社招前端一面react面试题汇总

如果试图直接更新 state ，则不会重新渲染组件。// 错误This.state.message = 'Hello world'; 需要使用setState()方法来更新 state。...当 setState 传入 null 时，并不会触发 render。...⼀个纯粹的 action (FSA)，⽽不是充满 “⿊魔法” thunk function；异常处理：受益于 generator function 的saga实现，代码异常/请求失败都可以直接通过try...redux-saga缺陷：额外的学习成本：redux-saga不仅在使⽤难以理解的generator function，⽽且有数⼗个API，学习成本远超reduxthunk，最重要的是你的额外学习成本是只服务于这个库的...redux-observable缺陷：学习成本奇⾼：如果你不会rxjs，则需要额外学习两个复杂的库；社区⼀般：redux-observable的下载量只有redux-saga的1/5，社区也不够活跃，在复杂异步流中间件这个层

4.1K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭