Question

我想在向后端发出请求时显示一个加载栏，我已经为请求和响应声明了拦截器，如下所示：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log("before request");
    return config;
}, function (error) {
    // Do something with request error
    console.log("before request error");
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    console.log("after request completed success");
    return response;
}, function (error) {
    // Do something with response error
    console.log("after request completed error");
    return Promise.reject(error);
});

我的想法是，我希望有一个变量或某种状态，我可以根据请求生成而未完成加载条显示加载条，并在收到响应时隐藏它！

我的装载栏组件分开如下：

export default class ProgressBar extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <Progress.Circle size={60} indeterminate={true}/>
            </View>
        );
    }
}

我尝试在单独的文件smth上创建一个const值，例如 isLoading：false ，然后从感受器中更改它但由于某种原因它不能按照我想要的方式工作，以便加载栏显示和隐藏取决于isLoading变量的值！

Answer 1

在处理数据时，您不需要axios拦截器来显示加载器。我可以给你的一个建议是确保无论何时触发动作创建者，将组件localState设置为变量为布尔值true并在接收到值时将其设置为false，这样就可以根据需要操纵微调器的显示关于实际价值。

下面给出一个例子：

class LoaderExample extends Component {

state = { 

   isLoading: true

 }

  componentDidMount(){

   this.setState({ isLoading: true })

   this.props.makeApiCall()
    .then(() => this.setState({ isLoading: false }))
}

  render(){
     return(
      {
      this.state.isLoading && <SpinnerComponent/>

      }
    )
}

}

只是一个例子，您可以修改它以适合您的解决方案。

如何在本机中自动显示隐藏加载栏

1 个答案: