Question

您好我试图了解Promises如何工作以及如何模拟异步调用以用作React组件的测试。我写了这段代码，但最后的结果是数据立即加载而不是等待延迟时间。
我在哪里做错了？
提前谢谢

import React, { Component } from 'react';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default class Test extends Component 
{
    constructor(props) {
        super(props);

        this.state = {
            data: []
        };
    }

    componentDidMount() {
        sleep(3000).then(
            this.setState({
                data: ['val1', 'val2', 'val3']
            })
        );
    }

    render() {
        return (
            <ul>
                {this.state.data.map(function(value, index){
                    return <li key={index}>{value}</li>;
                })}
            </ul>
        )
    }
}

Answer 1

问题是你是立即调用函数setState而不是将函数引用传递给then。

您可以通过多种方式获得功能参考：一种是使用bind。改变这个：

    sleep(3000).then(
        this.setState({
            data: ['val1', 'val2', 'val3']
        })
    );

为：

    sleep(3000).then(
        this.setState.bind(this, {
            data: ['val1', 'val2', 'val3']
        })
    );

或者，您可以更明确地创建函数：

    sleep(3000).then(
        _ => this.setState({
            data: ['val1', 'val2', 'val3']
        })
    );

Answer 2

const getData = () => {
  return new Promise(resolve => {
    const data = [
      {
        value: 10000000
      },
      {
        value: 20000000
      }
    ];
    setTimeout(() => {
      resolve(data);
    }, 10);
  });
};

Answer 3

使用ES6，您可以使用以下内容模拟异步调用：

import React, { Component } from 'react';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default class Test extends Component 
{
  constructor(props) {
      super(props);

      this.state = {
          data: []
      };
  }

  componentDidMount() {
    const data = ['val1', 'val2', 'val3']
    this.myFunc(data)
  }

  myFunc = async (data) => {        
    await sleep(3000)  
    this.setState({ data })
  }

    render() {
        return (
            <ul>
        {this.state.data.map(function(value, index){
            return <li key={index}>{value}</li>;
        })}
      </ul>
        )
    }
}

模拟异步调用

3 个答案: