TS报photos属性不存在及Pexels API请求ex.response未定义问题

报错1：TypeScript提示property 'photos' does not exist on type 'Image[]' #

原因 #

你给axios.get传入的泛型是Image[]，相当于告诉TS接口返回的响应数据直接就是图片数组，但Pexels的实际返回结构是外层包裹了公共字段的对象，photos是外层对象下的属性，所以TS会认为你访问了不存在的字段。

修复方法 #

1. 新增一个接口描述Pexels接口的完整响应结构
2. 将axios.get的泛型替换为新的响应接口类型

报错2：控制台抛出Uncaught (in promise) TypeError: ex.response is undefined #

原因 #

ex.response只有在请求成功发送到服务器、且服务器返回了错误状态码（4xx/5xx）时才会存在。如果是网络中断、跨域、请求被拦截等请求未到达服务器的场景，ex.response就是空值，直接访问ex.response.status就会触发空指针报错。

修复方法 #

访问ex.response前先做空值判断，可直接使用TS可选链语法?.规避空值报错。 #

完整修正后代码 #

import * as React from "react";
import { ChakraProvider} from "@chakra-ui/provider";
import {theme} from "@chakra-ui/theme";
import {Text,Box} from "@chakra-ui/react";
import axios from 'axios';

const App = () => {
  return (
   <ChakraProvider theme={theme}>
     <Box>
     <Display/>
     </Box>
   </ChakraProvider>
  );
}

export default App;

// 新增Src接口描述图片地址结构，避免后续调用src字段时TS报错
interface Src {
  original: string;
  large2x: string;
  large: string;
  medium: string;
  small: string;
  portrait: string;
  landscape: string;
  tiny: string;
}

interface Image {
  id:number,
  width:number,
  height:number,
  avg_color:string,
  liked:boolean,
  photographer:string,
  photographer_id:number,
  photographer_url:string,
  src:Src, // 替换原来的object类型
}

// 新增Pexels响应的外层接口
interface PexelsResponse {
  total_results: number;
  page: number;
  per_page: number;
  photos: Image[];
  next_page?: string;
  prev_page?: string;
}

const defaultImages : Image[] = [];

function Display() {
  const [Images,setImages] = React.useState<Image[]>(defaultImages);
  const [loading,isLoading] = React.useState<boolean>(true);
  const [error,setError] = React.useState("");
  
  React.useEffect(() => {
    // 泛型替换为PexelsResponse
    axios.get<PexelsResponse>('https://api.pexels.com/v1/curated?page=2&per_page=40', {
      headers: {
        Authorization : '563492ad6f91700***********************************'
      },
    }).then(response => {
      setImages(response.data.photos);
      isLoading(false);
      console.log("it worked!",response.data.photos);
    }).catch(ex => {
      // 用可选链先判断response是否存在
      const error = ex.response?.status === 404 ? 'Page not found':'Something wrong has happened';
      setError(error);
      isLoading(false);
      console.log(error);
    })
  },[]);

  return (
    <Text></Text>
  );
}

内容的提问来源于stack exchange，提问作者Esam Olwan