时间戳

首页 > 解决方案 > 处理多个类似 API 调用的更好方法

reactjs - 处理多个类似 API 调用的更好方法

问题描述

我正在尝试使用 react 制作一个前端网站，并且我正在使用 NASA 拥有的 API。我的主要问题与 4 个火星漫游者有关：好奇号、机遇号、精神号和任务清单。这些漫游者中的每一个都有一个与它们相关的 API，可以提供他们拍摄的照片，我这样处理第一个漫游者：

//App.js
onTermSubmit = async (term) =>{

        const response = await MarsPics_Curiosity.get('',{
            params:{
                earth_date: term,
                api_key: 'KEY'
        })

        this.setState({Marspictures_Curiosity: response.data.photos, MarsDate_Curiosity: term})

    }

我正在考虑再制作 3 个这些来调用其余的流动站 API。但后来，我有点意识到这似乎有点多余和重复。所以，我想知道是否有更好的方法来处理这个问题而无需再制作 3 个单独的函数？

标签： reactjs

解决方案

您可以将流动站的名称传递给您的函数并根据此参数计算字段和对象名称

async (term, roverName) =>{
        const response = await window["MarsPics_" + roverName].get('',{
            params:{
                earth_date: term,
                api_key: 'KEY'
        })

        this.setState({
          ["Marspictures_" + roverName]: response.data.photos, 
          ["MarsDate_" + roverName]: term
        })

    }
    ```

推荐阅读