Question

我想做约。这：我有我的模块httpService使用axios与API进行通信。简而言之，它看起来像这样：

import axios from "axios";

function post(url, dt) {
  const ret = axios.post(url, dt).then(true);
  return ret;
}

export default {
  get: axios.get,
  post,
  put: axios.put,
  delete: axios.delete
};

我想在某个组件的应用程序中显示“某种方式”，表明某些axios请求正在运行。我的基本想法是，我可以使用Redux来保存post函数的状态。我知道如何显示（和更改）组件中的Redux值（在我的情况下为应用程序中的某些信息面板-例如，仅加载图标），但是我不知道如何从上述我的post函数更改状态，女巫不是组件的一部分...

再次进行基本测试（如果发生错误等，则不包含任何内容）作为结果样本：

function post(url, dt) {
  SET STATE TO SHOW LOADING ICON
  const ret = axios.post(url, dt).then(HIDE LOADING ICON);
  return ret;
}

我的问题是，如果这是一种很好的方法，如何在应用程序中指示axios正在运行（如果有任何更智能的解决方案）。如果这是个好主意，那么如何仅在模块功能上而不是在组件上执行此操作。谢谢您的帮助！

Answer 1

在这种情况下无需使用redux，但是如果您设置了redux，则可以朝这个方向随意回答。

axios.post正在返回承诺。因此，您可以在组件中执行此操作，而不是在函数中执行.then()。这是一个使用挂钩作为加载指示器的示例。

import * as React from 'react'
const {useState} = React

const FormPage = () => {
    const [loadingActive, setLoadingActive] = useState(false)
    // we are now loading, 
    // this could be triggered just before firing the post function
    setLoadingActive(true)

    post('http://example.com', {randomData: 1}).then((resultData) => 
        setLoadingActive(false))
    .catch((error) => {
        // handle the error
        setLoadingActive(false)
    })

    <>
        <Loader show={loadingActive} />

        <div>other stuff</div>
    </>

}

因此，post函数不会在其内部调用.then，而只会调用return这个承诺。您可以使用async/await或promise.then().catch()语法。无论您觉得更满意。请求完成后，他们将被呼叫。如果发生错误，则调用.catch，如果发生错误，则调用.then。 .then的功能将接收向下发送的数据，作为您可以使用的结果。

请确保在setLoadingActive或.then或.catch中呼叫.finally-有关.finally的更多信息，请点击https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

React / Redux更改模块中的值（不在组件中）

1 个答案: