如何等待API结果重复传奇

Question

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

我已经使用了SETTIMEOUT功能，它工作！只是想知道是否还有其他办法。

前端代码：

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

React Saga代码：

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代码，然后转到第二个函数？

Answer 1

您的内联箭头函数是而不是异步。您只是返回Promise，而不是await。我不确定这是否肯定是一个问题(因为aync函数本身也返回Promise(，但我怀疑如果您将异步逻辑外部化为一个单独的函数并将其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));
}
}

试试这个。我不能保证它是正确的，因为你的例子不是完全可复制的。