如何保持调用api，直到任务在reactjs完成?

Question

我正在开发reactjs作为前端，Django作为后端。我有一个用django写的费时的任务，理想情况下需要比规定的API响应时间更多的时间来检索值。因此，我把它变成了一个芹菜任务，它的任务id作为API响应返回。

计划是在页面加载时调用API，启动芹菜任务，并返回任务ID。因此，有了任务ID，我就可以继续轮询另一个API以获取任务的状态，直到完成为止。任务完成后，我可以ping另一个API以获得芹菜任务的响应。

我想，我可以使API调用，然后运行一个循环与睡眠，但不知道如何实现这一点?

import { useEffect, useState } from "react"
import axios from "axios"
function App() {
const [taskId, setTaskId] = useState("")

const apiToSpawnTask = () => {
axios.get("http://localhost:8000/spawn_task")
.then(({data}) => setTaskId(data.task_id))
}
const checkTaskStatus = () => {
axios.get(`http://localhost:8000/task-id/${taskId}`)
.then(({data}) => {
// data.status contains the status of the task id
})
}
const getCompletedTaskResult = () => {
axios.get(`http://localhost:8000/get-task-result/${taskId}`)
.then(({data}) => {
// this data is used in the return
})
}
useEffect(() => {
// What should be the code here?
})
return (<div>Test</div>)
}

Answer 1

const checkTaskStatus = () => {
return axios.get(`http://localhost:8000/task-id/${taskId}`)
.then(({data}) => {
return data
})
}
// ...
useEffect(() => {
const interval = setInterval(() => {
const status = checkTaskStatus
// probably a different property returned from your api
if (status.ready) {
clearInterval(interval)
}
}, 1000)
return () => clearInterval(interval)
})

Answer 2

import { useEffect, useState, useRef } from "react"
import axios from "axios"
function App() {
const [taskId, setTaskId] = useState("");
const intervalRef = useRef(null);
const apiToSpawnTask = () => {
axios.get("http://localhost:8000/spawn_task")
.then(({data}) => {
setTaskId(data.task_id);
intervalRef.current = setInterval(() => {
checkTaskStatus(data.task_id);
}, 5000);
})
}
const checkTaskStatus = (id) => {
axios.get(`http://localhost:8000/task-id/${id}`)
.then(({data}) => {
// data.status contains the status of the task id
if(data.status === 'success') {
getCompletedTaskResult();
clearInterval(intervalRef.current);
}
})
}
const getCompletedTaskResult = () => {
axios.get(`http://localhost:8000/get-task-result/${taskId}`)
.then(({data}) => {
// this data is used in the return
})
}
useEffect(() => {
apiToSpawnTask();
}, [])
return (<div>Test</div>)
}

提示:与其硬编码基础URL为http://localhost:8000，不如尝试使用axios实例。因此，如果你想在未来改变基础URL，你不需要修改所有地方。

axios/index.js

import axios from "axios";
const instance = axios.create({
baseURL: "http://localhost:8000"
});
export default instance;