如何进行api调用并在控制台中获取和显示数据

问题描述

我想要做的是我有一张包含数据的表，我想在单击按钮时进行 api 调用。

在我下面的代码中，我尝试做一个表，当我选择表中的行并单击提交按钮然后获取数据 api 并在控制台中显示数据。

点击https://codesandbox.io/s/o8tu5?file=/index.js这里我想在按钮点击时进行api调用我们怎么做我的api是https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e

任何人都可以帮助我调用 api。非常感谢。

 render() {
    return (
      <div>
        <div
          className="table-employee"
          style={{ marginTop: "20px",border: " 1.5px solid darkgray" }}
        >
          <table className="table table-hover table-bordered table-sm">
            <thead>
              <tr>
                <th scope="col">Select</th>
                <th scope="col"> LOAD DATE</th>
                <th scope="col"> FILE DATE</th>
                <th scope="col"> SERVICE</th>
                <th scope="col"> PROVISIONER CODE </th>
                <th scope="col"> DESCRIPTION</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <input type="radio" preventDefault name="select" />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="btn-submit">
          <button
            className="btn btn-primary"
            style={{ marginRight: "30px" }}
            type="submit"
          >
            submit
          </button>
        </div>
      </div>
    );
  }

解决方法

应该看起来像这样。

async function getData(url){
  // make a request to the api.
  const res = await axios.get(url);
  // check that the request was successful.
  if(res.status == 200){
    // return the parsed json data.
    return JSON.parse(res.data);
  }
  // if it failed,log the error message.
  console.log(res.message);
}