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

Redux-saga不会等待api调用解决,而是不断返回承诺。如何在api调用时进行"yeild call“等待?

在Redux-saga中,可以使用yield call来等待api调用解决。yield call是一个Effect,用于调用函数或方法,并等待其返回结果。

具体步骤如下:

  1. 首先,确保你已经安装了redux-saga库,并在应用程序的saga文件中引入所需的依赖。
  2. 在saga文件中,定义一个generator函数,用于处理异步逻辑。
  3. 在generator函数中,使用yield call来调用api函数,并等待其返回结果。
  4. 在调用api函数时,可以传递参数,以便根据需要进行api调用。
  5. 使用yield put来触发一个action,以便在api调用完成后更新应用程序的状态。

下面是一个示例代码,展示了如何在api调用时使用yield call进行等待:

代码语言:txt
复制
import { call, put } from 'redux-saga/effects';
import { fetchUserSuccess, fetchUserFailure } from './actions';
import { getUserApi } from './api';

function* fetchUserSaga(action) {
  try {
    const user = yield call(getUserApi, action.payload); // 使用yield call调用api函数,并等待其返回结果
    yield put(fetchUserSuccess(user)); // 触发一个action,更新应用程序的状态
  } catch (error) {
    yield put(fetchUserFailure(error));
  }
}

export default function* rootSaga() {
  yield takeEvery('FETCH_USER_REQUEST', fetchUserSaga);
}

在上述示例中,fetchUserSaga是一个generator函数,它使用yield call来调用getUserApi函数,并等待其返回结果。在api调用完成后,使用yield put触发一个action,更新应用程序的状态。

需要注意的是,getUserApi是一个示例api函数,你需要根据实际情况替换为你自己的api函数。另外,FETCH_USER_REQUEST是一个示例action类型,你也需要根据实际情况替换为你自己的action类型。

关于Redux-saga的更多信息和使用方法,你可以参考腾讯云的相关产品文档:Redux-saga产品介绍

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

相关·内容

手写Redux-Saga源码

本文要讲的就是Redux-Saga,这个也是我在实际工作中使用最多的Redux异步解决方案。...然后看看fetchUserInfo函数,这个函数也不复杂,就是调用一个API函数fetchUserInfoAPI去获取数据,注意我们这里函数调用并不是直接的fetchUserInfoAPI(),而是使用了...fork的使用跟call很像,也是可以直接调用传进来的方法,只是call等待结果回来才进行下一步,fork不会阻塞这个过程,而是当前结果没回来也会直接运行下一步: fork(fn, ...args);...runCallEffect 前面我们发起API请求还用到了call,一般我们使用axios这种库返回的都是一个promise,所以我们这里写一种支持promise的情况,当然普通同步函数肯定也是支持的:...当拿到effects返回的对象后,我们再根据他的type去找对应的处理函数来进行处理。

1.7K30
  • 前端实现异步的几种方式_redux是什么

    然后我们看下workerSaga,可以看到并不是直接调用异步函数或者派发action,而是通过call()以及put()这样的函数。这就是redux-saga中最为重要的一个概念:Effect。...但是这样的话不好做模拟(mock)测试:我们在测试过程中,一般不会真的执行异步任务,而是替换成一个假函数。实际上,我们只需要确保yield了一个正确的函数,并且函数有着正确的参数。...(Api.fetchUser, 'alice'), "Should yield an Effect call(Api.fetchUser, 'alice')" ) 为了实现这一目标,redux-saga...提供了一系列API函数来生成Effect对象,比较常用的是下面这几个: call:函数调用 select:获取Store中的数据 put:向Store发送action take:在Store...上等待指定action fork:和call类似,但是是非阻塞的,立即返回 比如我们之前用到的takeEvery()函数,其实内部实现就是不停地take -> fork -> take ->

    1.7K30

    redux-saga

    形式提供,提供各种语义的用来生成Effect的工具函数,例如把dispatch action包装成put、把方法调用包装成call/apply Effect -> 业务操作 在执行时内部进行转换,例如把...apply creator,形式与fn.apply类似),内部处理也是类似的: // call返回的描述对象(Effect) { @@redux-saga/IO: true, CALL: {...常用的Effect creator如下: 阻塞型方法调用call/apply 详见Declarative Effects 非阻塞型方法调用:fork/spawn 详见redux-saga’s fork...其中fork与spawn都是非阻塞型方法调用,二者的区别是: 通过spawn执行的task完全独立,与当前saga无关 当前saga不管它执行完了没,发生cancel/error也不会影响当前saga...(saga)返回的Effect与其它类型的Effect没什么本质差异,也可以通过all/race进行组合 Saga Helpers Saga Helper用来监听action,API形式是takeXXX

    1.9K41

    redux-saga入门

    文章目录 资料 redux-saga简介 常用API takeLatest takeEvery take delay put call fork cancel all 案例1:错误处理了 案例2:错误未处理...saga中yield 后面的内容我们称呼它为Effect(redux-saga的任务单元),在Effects中我们可以进行启动其它saga,也可以处理一些副作用操作。...fork表现形式为创建一个分叉的task去执行fn,且fork所在的saga不会等待fn返回结果的时候被中间件暂停,相反,它在fn被调用时便会立即恢复执行。.../非阻塞调用 阻塞调用的意思是saga在yield Effect之后会等待其结果返回,结果返回后才会继续执行saga中下一个指令。...Effect,该Effect作用是告诉中间件执行say // 由于call属于阻塞调用的方法,所以后面的 console.log 将等待say执行完毕 之后执行 yield call(say) console.log

    1.3K20

    React saga_react获取子组件ref

    products = yield call(Api.fetch, '/products') // ... } 上述代码中,比如我们需要测试Api.fetch返回的结果是否符合预期,通过调用call...不需要模拟Api.fetch函数的具体返回结果。...(fn, ...args) call方法调用fn,参数为args,返回一个描述对象。...用框图可以更清楚的分析: call方法调用阻塞主线程的具体效果如下动图所示: 白屏时为请求列表的等待时间,在此时,我们点击登出按钮,无法响应登出功能,直到请求列表成功,展示列表信息后,点击登出按钮才有相应的登出功能...也就是说call方法阻塞了主线程。 (4) 无阻塞调用 我们在第二章中,介绍了fork方法可以类似与web work,fork方法不会阻塞主线程。

    4.5K30

    你真的懂异步编程吗?

    JS 线程上进行处理,在JS中,异步的结果 回到 JS 主线程 的方式采用的是 “ 回函数 ” 的形式 , 所谓的 回函数 就是在 JS 主线程上声明一个函数,然后将函数作为参数传入异步调用线程,...,如果 myAjax 函数调用的后面有代码,则会继续执行,不会等待 ajax 的请求结果; 但是,myAjax 函数调用结束后,ajax 的网络请求却依然在进行着,如果想要获取到 ajax 网络请求的结果...,会调用成功的回函数 onFulfilled 来将异步结果返回;异步执行成功的状态是 Rejected, 这就是承诺给你的结果,然后调用 onRejected 说明失败的原因(异常接管); 将前面对...'yyy'; // 调用 next 后,返回对象值 console.log(33); } // 调用函数 不会立即执行,返回 生成器对象 const generator = foo();...* 星号,函数体中的代码有个 yield ,用于函数执行的暂停;简单点说就是,这个函数不是个普通函数,调用不会立即执行全部代码,而是在执行到 yield 的地方暂停函数的执行,并给调用返回一个遍历器对象

    83130

    手写系列-这一次,彻底搞懂 Promise

    ,状态的修改是不可逆的,当汉堡做好了,承诺兑现了,就不能再回到等待状态了。...总结一下,Promise 就是一个承诺承诺会给你一个处理结果,可能是成功的,可能是失败的,而返回结果之前,你可以同时做其他事情。...多次调用 then then 可以在同一个承诺上多次调用。...MyPromise 实例; then 内部调用时,需通过 resolvePromise 方法判断返回值 x 的类型来处理返回值。...4.1 事件队列 当遇到一个异步事件后,并不会一直等待异步事件返回结果,而是会将这个事件挂在与执行栈不同的队列中,我们称之为事件队列。 当所有同步任务执行完成后,系统才会读取”事件队列”。

    20530

    手写系列-这一次,彻底搞懂 Promise

    ,状态的修改是不可逆的,当汉堡做好了,承诺兑现了,就不能再回到等待状态了。...总结一下,Promise 就是一个承诺承诺会给你一个处理结果,可能是成功的,可能是失败的,而返回结果之前,你可以同时做其他事情。...多次调用 then then 可以在同一个承诺上多次调用。...MyPromise 实例; then 内部调用时,需通过 resolvePromise 方法判断返回值 x 的类型来处理返回值。...4.1 事件队列 当遇到一个异步事件后,并不会一直等待异步事件返回结果,而是会将这个事件挂在与执行栈不同的队列中,我们称之为事件队列。 当所有同步任务执行完成后,系统才会读取”事件队列”。

    37630

    飞哥教你使用异步编程提升服务性能

    上面两个例子,描述了如何创建一个Promise对象返回给caller,以及如何在callee端fulfill或reject这个Promise。...2、串行调用 ListenableFuture没有提供then方法,而是通过Futures的一系列静态方法来实现Promise风格的API。...还记得吧,Promise代表着一个未完成的并且承诺完成的值。通常这种情况下,意味着callback里调用了另外一个Promise风格的异步API。...可是,你会发现,上面的举例中结尾都返回了Promise,就是说,包含这段代码的方法被设计为异步API。而使用同步API,则会强制这个方法的调用者只能使用同步方式调用。...3、并行调用 异步API很适合并行调用。caller在调用多个没有依赖关系的异步API时,可以先依次发起调用而不用等待每个调用真正执行完成,从callee的角度来讲,执行是并行的。

    1.5K40

    JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 asyncawait 更好地编码方式!

    某些异步操作可能发生在事件循环的一个标记期间,不会导致一个全新的事件被添加到事件循环队列中,而是将一个项目(即任务)添加到当前标记的任务队列的末尾。...然后链式调用 .then(...)方法里再的创建了另一个 Promise,然后把 返回的 x 和 和(values[0] + values1) 进行求和 并返回 。...done(…) 不会创建并返回 Promise ,因此传递给 done(..) 的回显然不会将问题报告给不存在的链接 Promise 。...当这个函数返回一个值时,这个值只是一个普通值而已,这个函数内部将自动创建一个承诺,并使用函数返回的值进行解析。当这个函数抛出异常时,Promise 将被抛出的值拒绝。...例如,如果在一个程序中设置了一个断点,然后阻塞并使用调试快捷方式(“停止”),调试器将不会移动到下面,因为它只“逐步”执行同步代码。

    3.1K20

    深入理解 redux 数据流和异步过程管理

    异步过程的管理 很多情况下改变 store 数据都是一个异步的过程,比如等待网络请求返回数据、定时改变数据、等待某个事件来改变数据等,那这些异步过程的代码放在哪里呢? 组件?...解决这个问题,需要用 redux-saga 或 redux-observable 中间件。...redux saga 的异步过程管理就是这样的:先把 action 透传给 store,然后判断 action 是否是被 taker 监听的,如果是,则调用对应的 worker saga 进行处理。...generator 执行后返回的是一个 iterator,需要另外一个程序调用 next 方法才会继续执行。所以怎么执行、是否继续执行都是由另一个程序控制的。...那 redux-saga 是怎么解决的呢?

    2.5K10

    使用图解和例子解释Await和Async

    函数本身可以返回Promise,因此我们可以链式调用Promise。...调用“线程”不能等待Promise。 在Promise之后执行代码的唯一方法是通过then方法指定回函数。 只有当Promise成功时,回函数才能执行。...例如,假设我们需要编写一个程序: 发起http请求,等待完成,打印结果; 返回之后进行其他两个HTTP的并行调用; 当它们都完成时,打印结果。...不允许等待承诺鼓励开发非阻塞代码。 否则,开发人员将被诱惑执行封锁操作,因为它比使用承诺和回更容易。 当我们创建Promise时,我们无法同步等待完成。 我们只能通过一个回。...这使我们能够直接等待Promise,从而避免了回的需要。 最后,我们调用async函数,该函数只是产生一个封装了调用其他Promise的逻辑的Promise。

    1.4K20

    高频React面试题及详解

    第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回函数时需要用到 DOM 元素的状态,则将对比或计算的过程迁移至 getSnapshotBeforeUpdate,然后在...由于JavaScript中异步事件的性质,当您启动API调用时,浏览器会在此期间返回执行其他工作。...当React渲染一个组件时,它不会等待componentWillMount它完成任何事情 React继续前进并继续render,没有办法“暂停”渲染以等待数据到达。...,但是转化为了函数回的嵌套 React Hooks优点: 简洁: React Hooks解决了HOC和Render Props的嵌套问题,更加简洁 解耦: React Hooks可以更方便地把 UI...使用plain object保存数据,需要手动处理变化后的操作;mobx适用observable保存数据,数据变化后自动处理响应的操作 redux使用不可变状态,这意味着状态是只读的,不能直接去修改它,而是应该返回一个新的状态

    2.4K40

    gRPC 基础概念详解

    这个例子中使用了两个线程去分别进行发送请求和处理返回,一个线程批量发出 100 个 SayHello 的请求,另外一个不断的通过 cq_.Next() 来等待返回。...例子中只有一个请求,因此在 SayHello 之后,就直接通过 condition_variable 的 wait 函数等待结束,然后进行后续处理。这样其实不能进行并发,跟同步请求差别不大。...const Point& request,                   Feature* response); Client 在调用 ServerStream RPC 时,不会得到状态,而是返回一个...Read(),来不断的读取流,结束时 Read() 会返回 false;通过调用 Finish() 来读取返回状态。...,而是返回 UNIMPLEMENTED 状态,因为这个类可能被多次、多级继承 所以 Service 类中的所有 RPC API 都是同步的。

    4.1K50

    前端高频react面试题

    调用setState时,React render 是如何工作的?咱们可以将"render"分为两个步骤:虚拟 DOM 渲染:当render方法被调用时,它返回一个新的组件的虚拟 DOM 结构。...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI状态,激活的路由,被选中的标签,是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。...如果这还不够糟糕,考虑一些来自前端开发领域的新需求,更新优、服务端渲染、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性,难道就这么放弃了吗?当然不是。...一些库 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足的是,React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。...但是对于合成事件来说,有一个事件池专门来管理它们的创建和销毁,当事件需要被使用时,就会从池子中复用对象,事件回结束后,就会销毁事件对象上的属性,从而便于下次复用事件对象。

    3.4K20
    领券