程序世界之速成课免费视频教程 #03 如何在 React (componentDidMount Async) 使用 Async Await 和 fetch

https://www.qiuzhi99.com/movies/cheng-xu-shi-jie-zhi-su-cheng-ke-02-cong-ling-kai-shi-shi-yong-webpack-4-he-babel-7-da-jian-react-kai-fa-huan-jing 程序世界之速成课 #02 从零开始使用 Webpack 4 和 Babel 7 搭建 React 开发环境

补充：https://github.com/lquixada/cross-fetch

https://github.com/hfpp2012/webpack-react-tutorial

https://api.coinmarketcap.com/v1/ticker/?limit=10

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Response_objects

https://github.com/mdn/fetch-examples

https://github.com/github/fetch

https://github.com/matthew-andrews/isomorphic-fetch

https://babeljs.io/docs/en/babel-polyfill

https://www.qiuzhi99.com/playlists/qing-song-xue-webpack-4

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://www.qiuzhi99.com/playlists/qing-song-redux-saga

import React, { Component } from 'react';
import Input from './Input';

class FormContainer extends Component {
  constructor() {
    super();

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

  async componentDidMount() {
    // try catch 是 async await 捕获错误的方法
    try {
      const response = await fetch("https://api.coinmarketcap.com/v1/ticker/?limit=10")
      // 请求能够到达服务器，服务器返回了 500 或 400 等状态码，就会执行下面的语句
      // 执行之后，就会把错误抛出，被 catch 捕获到
      if (!response.ok) {
        throw Error(response.statusText);
      }
      const json = await response.json();
      this.setState({ data: json })
    // 正常情况下，只有网络错误才会执行 catch
    } catch (error) {
      console.log(error);
    }
    // fetch("https://api.coinmarketcap.com/v1/ticker/?limit=10")
    //   .then(response => response.json())
    //   .then(json => this.setState({data: json}))
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.data.map(el => (
            <li key={ el.name }>{ el.name } : { el.price_usd }</li>
          ))}
        </ul>
      </div>
    )
  }
}

export default FormContainer;

.babelrc

{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": 'usage' }],
    "@babel/preset-react"
  ]
}