成功 GET 请求后无法访问 Axios 响应对象的数据属性：类型“void”上不存在属性“data”

Question

我正在使用 React 和 TypeScript 构建一个个人项目来学习绳索，但在以下块中遇到了一个奇怪的（对我而言）错误，我使用 Axios 获取一些数据：

const fetchItem = async () => {
  const response = await axios
    .get("http://localhost:4000/items?id=2")
    .catch(error => console.log(error));
  console.log(response.data);
};

Property 'data' does not exist on type 'void'一旦我尝试访问data我的response对象的属性，错误消息就会立即在 Visual Studio Code 上弹出。

我怎样才能response.data正确访问（没有我的 IDE 和 Webpack 都抱怨）？

这是我的组件的完整代码，供参考：

import * as React from "react";
import { css } from "emotion";
import axios from "axios";

import { Item } from "./Item/Item";

export interface ContentProps {
  view: string;
}

const fetchItem = async () => {
  const response = await axios
    .get("http://localhost:4000/items?id=2")
    .catch(error => console.log(error));
  console.log(response.data);
};

export class Content extends React.Component<ContentProps> {
  state = {
    text: "test"
  };

  componentDidMount() {
    fetchItem();
  }

  render() {
    return (
      <div>
        {this.props.view === "item" ? (
          <Item text={this.state.text} />
        ) : (
          <List />
        )}
      </div>
    );
  }
}

webpack 上的错误：

对VSC的工具提示完整的错误文本指出：Property 'data' does not exist on type 'void | AxiosResponse<any>'.。

Answer 1

您的await，当出错返回时undefined，因为console.log在您的catch返回中undefined，并且返回值被推断为void。

基本上在这里，您将 async/await 同步样式与 promise async 编写异步代码的样式混合在一起，最好坚持使用一个以避免像这里一样与 good'ol 混淆try catch。

所以它可以是这样的：

const fetchItem = async() => {
  try {
    const response = await axios("http://localhost:4000/items?id=2");
    console.log(response.data);
  } catch (error) {
    console.log(error)
  }
};