问题

以下是代码的翻译部分：

我开始使用 TypeScript，但不明白为什么这段代码会出现一些问题。

import axios, { AxiosResponse, AxiosError } from 'axios';

const get = async () => {
    const url = 'https://example.com';
    const request: AxiosResponse | { error: AxiosError }  = await axios.get(url).catch((error: AxiosError) => ({ error }));

    if (request.error) {
        console.log(request.error)
    }

    console.log(request.data)
}

当我尝试访问 request.error 或 request.data 时出现了一些错误。

属性 'error' 不存在于类型 'AxiosResponse<any, any> | { error: AxiosError<unknown, any>; }'。属性 'error' 不存在于类型 'AxiosResponse<any, any>'。ts(2339)

属性 'data' 不存在于类型 'AxiosResponse<any, any> | { error: AxiosError<unknown, any>; }'。属性 'data' 不存在于类型 '{ error: AxiosError<unknown, any>; }'。ts(2339)

此外，我不想使用 try/catch，我想要使用内联的 catch()，就像我以前在 JavaScript 中做的那样。

@编辑
我设法像这样“解决”了它。

import axios, { AxiosResponse, AxiosError } from 'axios';

const get = async () => {
    const url = 'https://example.com';
    const request: AxiosResponse | { error: AxiosError, [key: string]: any  }  = await axios.get(url).catch((error: AxiosError) => ({ error }));

    if ("error" in request) {
        console.log(request.error)
    }

    console.log(request.data)
}

但我想知道是否有办法使用 request.error 而不是 "error" in request。

import axios, { AxiosResponse, AxiosError } from 'axios';

const get = async () => {
    const url = 'https://example.com';
    const request: AxiosResponse | { error: AxiosError }  = await axios.get(url).catch((error: AxiosError) => ({ error }));

    if (request.error) {
        console.log(request.error)
    }

    console.log(request.data)
}

import axios, { AxiosResponse, AxiosError } from 'axios';

const get = async () => {
    const url = 'https://example.com';
    const request: AxiosResponse | { error: AxiosError, [key: string]: any  }  = await axios.get(url).catch((error: AxiosError) => ({ error }));

    if ("error" in request) {
        console.log(request.error)
    }

    console.log(request.data)
}

答案1

得分: 1

你不需要明确地输入你的 `request`（可能最好命名为 `response`）。Axios（就像许多其他TS包一样）已经包含了返回类型。

如果你真的需要在内联中使用 `catch`，更好的方法是创建一个 [类型守卫函数][1]。所以会像这样：

```ts
import axios, { AxiosError } from 'axios'

const get = async () => {
  const url = 'https://example.com'
  const response = await axios
    .get(url)
    .catch((error: AxiosError) => ({ error }))

  if (isErrorObject(response)) {
    console.log(response.error)
  } else {
    console.log(response.data)
  }
}

const isErrorObject = (obj: unknown): obj is { error: AxiosError } => {
  return (obj as { error: AxiosError }).error !== undefined
}

但是，老实说，除非你真的需要这种方法，我会推荐一些更简单的做法：

const get = async () => {
  const url = 'https://example.com'
  axios
    .get(url)
    .then(response => {
      console.log(response.data)
    })
    .catch((error) => {
      console.log(error)
    })
}

<details>
<summary>英文:</summary>

You don&#39;t need to explicitly type your `request` (which would probably be better named `response`). Axios (just like many other TS packages) already contains the return type.

If you really need to do this inline `catch`, the better approach is to create a [Type Guard function][1]. So it would be something like that

```ts
import axios, { AxiosError } from &#39;axios&#39;

const get = async () =&gt; {
  const url = &#39;https://example.com&#39;
  const response = await axios
    .get(url)
    .catch((error: AxiosError) =&gt; ({ error }))

  if (isErrorObject(response)) {
    console.log(response.error)
  } else {
    console.log(response.data)
  }
}

const isErrorObject = (obj: unknown): obj is { error: AxiosError } =&gt; {
  return (obj as { error: AxiosError }).error !== undefined
}

But, honestly, unless you really need this approach, I would recommend something much simpler:

const get = async () => {
  const url = 'https://example.com'
  axios
    .get(url)
    .then(response => {
      console.log(response.data)
    })
    .catch((error) => {
      console.log(error)
    })
}