使用 TypeScript 处理 API 请求返回值的类型

在现代前端开发中，API 请求是非常常见的操作。而在使用 TypeScript 时，我们可以为这些请求的返回值定义类型，从而提高代码的可靠性和可读性。在本文中，我们将探讨如何使用 TypeScript 处理成功和失败时返回值类型不一致的情况。

定义返回值类型

首先，我们需要为 API 请求定义成功和失败的返回值类型。可以通过接口（Interface）来定义这些类型：

// 成功返回值接口
interface SuccessResponse {
  success: true;
  data: any; // 根据实际返回的数据结构定义
}

// 失败返回值接口
interface ErrorResponse {
  success: false;
  error: string; // 错误信息
}

// 联合类型
type ApiResponse = SuccessResponse | ErrorResponse;

在上面的代码中，我们定义了 SuccessResponse 接口表示成功的返回值，ErrorResponse 接口表示失败的返回值，并通过联合类型（Union Types）将两者结合在一起形成 ApiResponse 类型。

实现请求函数

接下来，我们定义一个请求函数来处理 API 请求，并根据返回结果构建相应的返回值类型。以下是一个使用 fetch 进行 API 请求的示例：

async function fetchData(url: string): Promise<ApiResponse> {
  try {
    const response = await fetch(url);
    const data = await response.json();

    if (response.ok) {
      return {
        success: true,
        data: data
      };
    } else {
      return {
        success: false,
        error: data.error || 'Unknown error'
      };
    }
  } catch (error) {
    return {
      success: false,
      error: error.message || 'Network error'
    };
  }
}

在上面的代码中，我们使用 fetch 进行网络请求，并根据响应状态（response.ok）来判断请求是否成功。如果成功，则返回 SuccessResponse 类型的数据；如果失败，则返回 ErrorResponse 类型的数据。

处理返回值

最后，我们调用请求函数并根据返回值的类型进行相应的处理。可以使用类型收窄（Type Narrowing）来确定实际返回的类型：

async function handleFetch() {
  const response = await fetchData('https://api.example.com/data');

  if (response.success) {
    // 处理成功返回的数据
    console.log('Data:', response.data);
  } else {
    // 处理错误返回的数据
    console.error('Error:', response.error);
  }
}

在上面的代码中，我们通过检查 response.success 的值来确定返回值的类型。如果 success 为 true，则表示请求成功，可以安全地访问 response.data；否则表示请求失败，可以访问 response.error。

完整示例

以下是完整的示例代码：

interface SuccessResponse {
  success: true;
  data: any;
}

interface ErrorResponse {
  success: false;
  error: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

async function fetchData(url: string): Promise<ApiResponse> {
  try {
    const response = await fetch(url);
    const data = await response.json();

    if (response.ok) {
      return {
        success: true,
        data: data
      };
    } else {
      return {
        success: false,
        error: data.error || 'Unknown error'
      };
    }
  } catch (error) {
    return {
      success: false,
      error: error.message || 'Network error'
    };
  }
}

async function handleFetch() {
  const response = await fetchData('https://api.example.com/data');

  if (response.success) {
    console.log('Data:', response.data);
  } else {
    console.error('Error:', response.error);
  }
}

通过这种方式，我们可以在 TypeScript 中有效地处理 API 请求，并根据返回值的类型进行相应的处理。这样不仅可以提高代码的可读性，还能有效减少由于类型错误导致的运行时问题。