如果不满足条件，我可以为 Axios Get Method 编写 if/else 语句吗？

Posted 2023-02-22

【中文标题】如果不满足条件，我可以为 Axios Get Method 编写 if/else 语句吗？

【英文标题】：Can I write a if/else statement for Axios Get Method if condition is not met?

【发布时间】：2018-05-25 13:03:23

【问题描述】：

我正在使用 Axios 在 ReactJS 中获取 API 数据。我设置了一个搜索查询，它将获取用户输入并将其与数据响应设置为状态的 API 匹配。我遇到了一个问题，如果我尝试接收的数据在 API 中不存在，则页面返回并显示以下错误：

Unhandled Rejection (TypeError): Cannot read property 'medium' of null

  32 |     title: response.data.name,
  33 |     summary: response.data.summary,
  34 |     rating: response.data.rating.average,
> 35 |     image: response.data.image.medium,
  36 |     genre: response.data.genres,
  37 |   );
  38 | )

有没有办法在 GET 请求中编写 if/else 语句来解决这个问题？

import React,  Component  from 'react';

import SearchResults from '../SearchResults/SearchResults';
import AddButton from '../AddButton/AddButton';
import axios from 'axios';

class Searchbar extends Component 
  constructor(props) 
    super(props);
    this.state = 
      searchTerm: ' ',
      title: ' ',
      summary: ' ',
      rating: ' ',
      image: ' ',
      genre: [],
    
  

  componentWillMount() 
    this.search();
  

  updateSearchHandler = (event) => 
    this.search(this.refs.query.value);
  

  search(query = "stranger-things") 
    const url = `http://api.tvmaze.com/singlesearch/shows?q=$query`;
    axios.get(url).then(response => 
      this.setState(
        title: response.data.name,
        summary: response.data.summary,
        rating: response.data.rating.average,
        image: response.data.image.medium,
        genre: response.data.genres,
      );
    )
  

  render() 
    let editedSummary = this.state.summary.replace(/(<p>|<b>|<\/p>|<\/b>)/g, '')
    let spiltGenre = this.state.genre.join(', ');

    return(
      <div>
        <input
          type="text"
          ref="query"
          onChange=this.updateSearchHandler/>

        <SearchResults
        showTitle=this.state.title
        showSummary=editedSummary
        showRating=this.state.rating
        showImage=this.state.image
        showGenre=spiltGenre/>

      <AddButton
        showTitle=this.state.title
        showGenre=spiltGenre/>
      </div>
    )
  


  export default Searchbar;

【参考方案1】：

选项 1 - 三元运算符

您可以使用三元运算符来测试是否定义了response.data.image。如果是，则返回response.data.image.medium，如果不是，则返回null 或其他值。三元运算符的工作方式如下：

const isTrue = true;
const newVariable = (isTrue ? 'Its true' : 'Its false');

如果isTrue 是true，那么newVariable 是Its true。如果isTrue 是false，那么newVariable 是Its false。

示例

这是一个简化的例子：

const response = 
  data: 
    name: "My Name",
    summary: "My Summary",
    rating: 
      average: "My Average"
    ,
    genres: "My genres"
  


const state = 
  title: response.data.name,
  summary: response.data.summary,
  rating: response.data.rating.average,
  image: response.data.image ? response.data.image.medium : "No image",
  genre: response.data.genres,
;

console.log(state);

选项 2

这是使用Object Destructuring 的另一种方法。解构允许我们从对象属性名称创建变量，根据需要重命名，并在属性未定义的情况下定义默认值。为了使用它，我们将 response.data 解构为我们想要的 5 个属性：

将name 重命名为title 保持summary为summary 将rating.average 重命名为rating 将image.medium重命名为medium，默认值为null 将genres 重命名为genre

然后我们需要将这些新常量传递给状态对象。

我提供了 2 个示例来展示它如何处理带有和不带有图像的响应。首先是带有 image 属性的响应。

示例 1

const response = 
  data: 
    name: "My Name",
    summary: "My Summary",
    rating: 
      average: "My Average"
    ,
    image: 
      medium: "My image"
    ,
    genres: "My genres"
  
;

const 
  name: title,
  summary,
  rating: average: rating,
  image: medium: image = medium: null,
  genres: genre
 = response.data;

const newState = 
  title,
  summary,
  rating,
  image, 
  genre


console.log(newState);

示例 2

现在是没有image 属性的响应。

const response = 
  data: 
    name: "My Name",
    summary: "My Summary",
    rating: 
      average: "My Average"
    ,
    genres: "My genres"
  


const 
  name: title,
  summary,
  rating: average: rating,
  image: medium: image = medium: null,
  genres: genre
 = response.data;

const newState = 
  title,
  summary,
  rating,
  image,
  genre


console.log(newState);

【参考方案2】：

你可以在axios的回调中做if/else。

我愿意：

image: response.data.image != null ? response.data.image.medium: '' ,

或者使用 if/else:

let imageMedium = '';
if (response.data.image != null) 
   imageMedium = response.data.image.meduim