React Native - Axios: Как настроить глобальный вызов API для нескольких страниц? - PullRequest
Новая
       7

React Native - Axios: Как настроить глобальный вызов API для нескольких страниц?

0 голосов
/ 16 января 2019

Как я могу создать глобальную функцию запроса API, которая получает реквизит 'url' на основе текущей страницы, но возвращает только массив результатов, которые будут отображаться на странице.

Пример
Страница 1 (передает URL 1 проп) -> ApiRequest.js
ApiRequest -> возвращает массив результата, ошибки или при загрузке -> Page 1: map () массива в своем собственном дизайне.

Страница 2 (проходит через URL-адрес 2) -> ApiRequest.js
ApiRequest -> возвращает массив результата, ошибки или при загрузке -> Page 2: map () массива в своем собственном дизайне.
...

Я дошел до кода внизу; пока я не знаю, как вернуть только результаты состояния, загрузки или ошибки, которые я могу использовать на странице, требующей вызова API. Надеюсь, я немного ясен, потому что мне трудно объяснить эту ситуацию. 

import React from 'react';

const axios = require('axios');

export default class RequestApi  {
    constructor (props) {
        super (props)
        this.state = {
            results: [],
            loading: null,
            error: null,
            totalPages: null
        }
    }
    componentDidMount(){
        this.requestAPI();
    }
    requestAPI = () => {
        this.setState({error: null, results: []})
        axios({
            method: 'get',
            url: process.env.REACT_APP_API_LOCALS,
            responseType: 'json',
        })
        .then(
            (response) => {
                console.log(response)
                this.setState({
                    results: response.data.results,
                    error: null,
                    totalPages: Math.ceil(response.data.count / response.data.results.length)
                })  
            }
        )
        .catch(
            (error) => {
                this.setState({
                    loading: null,
                    error: true
                })  
            }
        );
    }
    render() {
        return ()
    }
}
...