如何根据 URL 中的参数从 API 中获取数据

Question

我正在使用 React Native 构建一个从 API 获取数据的应用程序。 API 数据是有关航班出发/到达的信息。 我要做的很简单，我希望该应用程序有 2 个选项卡，可以在到达和出发之间切换屏幕。 2 个屏幕将显示所有航班的出发或到达。 目前，我使用该应用程序只是为了显示出发航班并从URL/flights/departures 等 URL 获取数据。由于我是 Native 的新手，我无法理解如何根据 URL 参数获取数据。我的意思是我有 API URL，我想获取数据，如果它是添加到 URL 的出发或到达，例如API/flights/{flightType}，因此当屏幕更改时，会获取正确的数据。我现在所做的如下，但仅适用于出发，我想了解如何根据需要更改它。

import axios from 'axios';
import { apiBaseURL } from "../Utils/Constants";
import {
    FETCHING_FLIGHTS_DATA
    ,FETCHING_FLIGHTS_DATA_SUCCESS,
    FETCHING_FLIGHTS_DATA_FAIL
} from "../Utils/ActionTypes";

export default function FetchFlightData() {
    return dispatch => {
        dispatch({ type: FETCHING_FLIGHTS_DATA});
        return axios.get(`${apiBaseURL}/departures`)
            .then(res => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: res.data})
            })
            .catch(err => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data})
            })
    }
}

Answer 1

您可以将航班类型作为参数传递给您的函数，并在切换选项卡时使用正确的类型调用FetchFlightData。您可能应该将每种类型的获取成功分开或将航班类型作为参数添加到您的有效载荷中，然后在减速器中区分出发数据或到达数据

import axios from 'axios';
import { apiBaseURL } from "../Utils/Constants";
import {
   FETCHING_FLIGHTS_DATA,
   FETCHING_FLIGHTS_DATA_SUCCESS,
   FETCHING_FLIGHTS_DATA_FAIL
} from "../Utils/ActionTypes";

export default function FetchFlightData(flightType) {
    return dispatch => {
        dispatch({ type: FETCHING_FLIGHTS_DATA});
        return axios.get(`${apiBaseURL}/${flightType}`)
            .then(res => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: {data:res.data,type:flightType}})
            })
            .catch(err => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data})
            })
    }
}

//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
  return {
     ...state,
     arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
     departures: action.payload.type === 'departures' ? action.payload.data:state.departures
  }
break;

// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');