如何基于URL中的参数从API提取数据

Question

我正在React Native中构建一个从API获取数据的应用程序。 API数据是有关航班起飞/到达的信息。 我想做的事情很简单，我希望该应用程序有2个选项卡，可在到达和离开之间切换屏幕。 2个屏幕将显示所有航班的出发或到达。 目前，我只是为了显示出发航班并从URL（例如URL/flights/departures获取数据而做的应用程序。 由于我是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');