如何在不使用 setTimeout 的情况下从我的 axios 请求中获取数据?

Question

我遇到了一个问题，我相信你们中的许多人都以某种方式遇到过这个问题，所以我正在使用axios来获取我的数据：

let data = axios.get(
"http://localhost:8080/api/taskExecution?&search=&page=1&size=8"
).then(response => {
if (response.status !== 200) {
console.log("LOADING");
} else {
return response.data;
}
});
let tasks = [];
data.then(response => {
tasks = response;
});
console.log(tasks);
return tasks;

像这样，响应数据返回 8 个项目的数组，但tasks仍然是空的，这很正常，因为axios请求需要一些时间，我可以使用 setTimeout 100 毫秒，在里面，我放console.log(tasks);它会工作但不是一个合适的解决方案，因为如果服务器需要 5 秒才能返回数据怎么办？

此代码在我的化简器中，因此我必须获取我的tasks并返回它们，以便我可以显示它们，并在执行请求时显示加载器。

这是我的减速器：

import update from "immutability-helper";
import Axios from "axios";
export default function getTasksReducer(state = [], action) {
switch (action.type) {
case "GET_TASKS":
let data = Axios.get(
"http://localhost:8080/api/taskExecution?&search=&page=1&size=8"
).then(response => {
if (response.status !== 200) {
console.log("LOADING");
} else {
return response.data;
}
});
let tasks = [];
data.then(response => {
tasks = response;
});
console.log(tasks);
return tasks;
default:
return state;
}
}

我需要一些关于这段代码的帮助，也需要一些关于它的概念的帮助，我的意思是我应该在哪里更改我的加载器状态等等。

Answer 1

我想你可以花一些时间来理解承诺和异步/awiat

例如：如果执行此操作，您的控制台将列出所有任务。

data.then(response => {
tasks = response;
console.log(tasks);
});

原因是您传递给.then承诺函数不会立即执行，而是在解决承诺后执行(在您的情况下，在完成 http 请求执行后。

要获得更多的逐行执行感觉，您可以使用 async/await

let tasks = await Axios.get("http://localhost:8080/api/taskExecution?&search=&page=1&size=8")
.then(response => {
if (response.status !== 200) {
console.log("LOADING");
} else {
return response.data;
}
});
console.log(tasks);
return tasks;

问题是您只能在异步函数中使用 await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Answer 2

好的，伙计，所以我想提出一些事情：

首先，您应该始终使用化简器仅将新状态返回给 Redux，仅此而已。您只需将来自操作的新数据与旧状态合并，然后将其返回即可。而且你不能在那里使用Promise或async/await，因为Redux不支持也不会支持这种行为。

其次，所有业务逻辑都应该放在你的行动中。数据获取(就像你的情况一样(，计算和诸如此类的东西需要在行动中。现在，您已经到了最有可能开始使用redux-thunk或redux-saga等库来处理操作中的异步操作的地步。redux-thunk没有redux-saga那么复杂，但redux-saga为您提供了许多很酷的功能，但它可能有点复杂。

您可以使用这些库做大或从小做起，无论哪种方式，它们都会迫使您将获取的数据转移到您的操作中。如果您希望支持加载数据，则只需调度告诉Redux的操作："我正在加载数据"或"我在加载数据时出错"或"我已加载数据"。当该操作出现时，如果需要，请更新您的商店，显示加载程序，数据或错误。您可以查看使用redux-thunk获取数据的这个或那个示例，这里有开始使用异步操作所需的一切。

希望对<有帮助3>

Answer 3

正如其他答案中提到的，我将我的化简器设置为仅处理状态更新和操作创建器函数来获取数据。如果我要这样做，这是最低起点。可以使用加载状态来显示加载微调器或进度条。

我的操作创建器功能与单个操作：

export const GET_TASKS_START = "GET_TASKS";
export const GET_TASKS_SUCCESS = "GET_TASKS_SUCCESS";
export const GET_TASKS_FAILURE = "GET_TASKS_FAILURE";
export const getData = () => dispatch => {
dispatch(GET_TASKS_START);
axios
.get("http://localhost:8080/api/taskExecution?&search=&page=1&size=8")
.then(response => {
dispatch({ type: GET_TASKS_SUCESS, payload: response.data });
})
.catch(err => {
dispatch({ type: GET_TASKS_FAILURE, payload: err.response });
});
};

化简器将按如下方式处理状态更新：

import {
GET_TASKS_SUCCESS,
GET_TASKS_FAILURE,
GET_TASKS_START
} from "./Action.js";
const initialState = {
tasks: [],
error: null,
loading: false
};
export default function tasksReducer(state = initialState, action) {
switch (action.type) {
case GET_TASKS_START:
return {
...state,
loading: true
};
case GET_TASKS_SUCCESS:
return {
...state,
loading: false,
tasks: action.payload, 
error: null
};
case GET_TASKS_FAILURE:
return {
...state,
loading: false,
error: action.payload
};
}
}

我建议控制台日志记录和检查响应(数据和错误(，并相应地修改这两个函数