时间戳

首页 > 解决方案 > 如何在 redux-saga 中等待 API 结果

javascript - 如何在 redux-saga 中等待 API 结果

问题描述

我有使用 React Saga 进行后端调用的 React-Typescript 应用程序。当我的一个来自前端的函数执行后端调用时，在它执行之前，来自前端的下一个函数开始执行。

我已经使用了 SETTIMEOUT 函数并且它有效！就是想知道有没有其他办法。

前端代码：

{ this.props.ValidateClient(validatorObject) }
this.finalvalid(clientIn)

反应传奇代码：

export function* ValidateClient(action) {
    try {
        console.log("1");
        yield put(validateClientRequest());
        console.log("2");
        const data = yield call(() => {
            return  axios.get('https://localhost:44325/api/Clients/' + action.payload.firstName + "/" + action.payload.lastName + "/" + action.payload.Email);
        }
        );
        console.log(data);
        console.log("3");
        yield put(validateClientSuccess(data.status));
        console.log("4");
      
    } catch (error) {
        yield put(validateClientfailure(error));
    }

在控制台中记录 1,2 后，第二个函数开始执行！

如何串行执行 React Saga 代码然后转到第二个函数？

标签： javascriptreactjstypescriptredux-saga

解决方案

您的内联箭头函数不是异步的。你只是返回Promise而不是awaiting 它。我不确定这是否绝对是一个问题（因为aync函数本身Promise也返回 a ），但我怀疑如果将异步逻辑外部化到一个单独的函数中，它会更好地工作call。

import { call, put } from "redux-saga/effects";
import axios, { AxiosResponse } from "axios";

interface Payload {
  firstName: string;
  lastName: string;
  Email: string; // is this really uppercase?
}

type YourResponseType = any; // fill this in

const callApi = async ({
  firstName,
  lastName,
  Email
}: Payload): Promise<AxiosResponse<YourResponseType>> => {
  return await axios.get<YourResponseType>(
    "https://localhost:44325/api/Clients/" +
      firstName +
      "/" +
      lastName +
      "/" +
      Email // don't you need to URL encode this??
  );
};

export function* ValidateClient(action: { payload: Payload }) {
  try {
    console.log("1");
    yield put(validateClientRequest());
    console.log("2");
    const data = yield call(callApi, action.payload);
    console.log(data);
    console.log("3");
    yield put(validateClientSuccess(data.status));
    console.log("4");
  } catch (error) {
    yield put(validateClientfailure(error));
  }
}

尝试这个。我不能保证它是正确的，因为您的示例不能完全重现。

推荐阅读