使用 await fetch 在 componentDidMount 获取数据

在 React 组件中，我们常常需要从服务器获取数据并展示。这时候，我们需要在 componentDidMount 中发起 AJAX 请求。如果使用常规的 fetch API 发起请求，我们需要使用 promise 和 then 函数来处理返回的数据。这样会造成代码冗余和可读性下降。

为了解决这个问题，我们可以使用 async 和 await 操作符代替 promise 和 then 函数，并利用 ES7 的语法来简化我们的代码。下面我们就来看一下如何使用 await fetch 在 componentDidMount 获取数据。

步骤

1. 创建组件

首先，我们需要创建一个类组件，用于展示从服务器获取的数据。

import React, { Component } from 'React';

class ExampleComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    render() {
        return (
            <div>
                //展示数据
            </div>
        );
    }
}

export default ExampleComponent;

2. 在 componentDidMount 中使用 await fetch 获取数据

在 componentDidMount 函数中，我们发起 HTTP 请求获取数据，并将返回的 JSON 对象存储到状态 state 中。使用 await 和 fetch，我们可以很容易地实现这一步骤：

async componentDidMount() {
    const response = await fetch('http://url-to-api-endpoint');
    const data = await response.json();
    this.setState({data: data});
}

await 会暂停函数的执行，直到 Promise 改变其状态 resolve。这里的 Promise 实际上是由 fetch API 返回的 response 对象。一旦 Promise 被 resolve，我们可以使用 await 将返回的数据解析成 JSON 对象，并存储到组件的状态 state 中。这里将获取到的数据作为新的 state 对象，然后 setState 会触发组件重新渲染。

3. 展示数据

最后，我们只需要在 render 函数中展示从服务器获取的数据即可。我们可以使用 map 函数来将数据列表化。在这个例子中，我们假设从服务器获取的数据是一个包含了一些元素的数组。我们可以这样来处理每一个元素，并通过 JSX 来将这个元素渲染到页面中。

render() {
    const { data } = this.state;
    return (
        <div>
            {data.map((item, i) => (
                <div key={i}>
                    //展示item的信息
                </div>
            ))}
        </div>
    );
}

完整代码

import React, { Component } from 'React';

class ExampleComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    async componentDidMount() {
        const response = await fetch('http://url-to-api-endpoint');
        const data = await response.json();
        this.setState({data: data});
    }
    
    render() {
        const { data } = this.state;
        return (
            <div>
                {data.map((item, i) => (
                    <div key={i}>
                        //展示item的信息
                    </div>
                ))}
            </div>
        );
    }
}

export default ExampleComponent;

以上示例代码中，我们使用了 ES7 中新的 async 和 await 关键字，以简化 AJAX 请求获取服务器数据并且在 componentDidMount 中响应。此方法可以减少代码冗余和提高代码的可读性。同时，我们还可以更加深入地使用 ES7 的异步操作语法来简化我们的开发流程。