繁体   English   中英

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

How to fetch data from API based on params in the URL

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在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})
            })
    }
}
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');
3 如何从路由参数正确获取数据?

当用户单击收藏夹组件将其发送到主路线时,我有一条显示了当前数据的“主要”路线,还有一条显示了“收藏夹”的路线,需要显示从api提取并通过redux更新的新数据。 所以我在主要组件中使用下面的代码,但是我得到的是先前的数据显示了几秒钟,然后它才改变: 我如何避免这种行为? ...

5 如何从 url 中获取 api

我对 fetch 的工作原理还是陌生的,我找不到任何关于如何从开放天气 API 获取数据的信息。 我有一个 URL,它提供了我需要的所有数据,但是当我尝试在 React 中使用它时,我无法弄清楚它是如何工作的到目前为止我有这个: 当我console.log(data)它说 undefined 所 ...

6 如何从api网址获取json嵌套数据

这是我的json导出数据 导出文件是通过API网址自动生成的,因此我无法修改json结构。 这是完整的json文件http://www.studiokaleya.it/mavenlinkapi/dati/stories.json 这是我想做的事情: 一个网页,其中包含用 ...

9 Deno - 如何从远程 API 或 URL 获取数据?

我想知道如何使用 deno 从其他服务器和 API 获取数据? 文档中的所有内容都教我如何制作 http 服务器并从本地源读取文件。 但是我找不到任何关于在网络上阅读某些东西的有用信息。 如何从 Stripe API 读取 JSON 数据? 或者,如果我想读取其中包含文本的 HTML 文件? 感 ...

2020-05-28 23:32:27 3 2413   deno
10 如何使用 axios 使用钩子从具有不同参数的 API 中获取数据?

我正在尝试制作一个餐厅查找器应用程序,我正在使用 API https://developers.zomato.com/api/v2.1' 。 所以在那个 API 中,有很多方法可以根据位置、商店名称等获取数据。那么我如何使用带有钩子的 Axios 来实现它,并且我应该显示? 或者您可以将此问题视为如 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM