React-Native —使用Promise為API請求構建動態URL

Question

我將較大的帖子分解為較小的問題。 請了解我以前從未使用過Promise，而且我也是React-Native的新手。 獲得有關如何設置API調用和處理數據的反饋和建議，將是很棒的。 先感謝您。

如何為API請求動態創建URL？ 這是我想要實現的目標：

偽代碼

兒童

• 檢索兩個變量
• 使用這兩個變量來構建URL
• 觸發第一個承諾並解決
• 檢索另外兩個變量
• 使用這兩個變量來構建新的URL
• 觸發第二個承諾並解決
• 收集來自兩個諾言的數據並傳遞給父項

親

• 從Child檢索數據
• 從第一個Promise中獲取數據並設置為狀態
• 從第二個Promise獲取數據並設置為另一個狀態

APIservice.js

兒童

class APIservice {


    _getStopPoint = (endpoint) => {
        return new Promise(function(resolve, reject) {
            fetch(endpoint)
            .then((response) => response.json())
            .then((data) => {
                console.log("APIservice StopPoint", data)
                resolve(data);
            });
        });
    };
};


module.exports = new APIservice

List.js

親

如您所見，設置端點的方式很la腳。 由於網址相同，因此不太理想。 我想構造一些可以接收兩個變量的東西，並隨時隨地構建URL。 類似於https://api.tfl.gov.uk/Line/${routeid}/Arrivals/${stationid} 。

如果我能做到這一點，如何將API調用傳遞給APIservice，使其只有一個端點會根據接收到的兩個變量動態變化？ 我不確定如何區分Promise.all中只有“一個” URL的呼叫。

let APIservice = require('./APIservice')

let endpoint = 'https://api.tfl.gov.uk/Line/55/Arrivals/490004936E'
let endpoint1 = 'https://api.tfl.gov.uk/Line/Northern/Arrivals/940GZZLUODS'

export class List extends Component {
    constructor(props) {
        super(props);

        this.state = {
            bus: null,
            tube: null,
        }
    };

    componentWillMount() {
        let loadData = (endPoint) => {

            Promise.all([
                APIservice._getStopPoint(endpoint),
                APIservice._getStopPoint(endpoint1),
            ])
            .then((data) => {

                // Name for better identification
                const listBus = data[0]
                const listTube = data[1]

                this.setState({
                    bus: listBus,
                    tube: listTube
                }, () => {
                    console.log("bus", this.state.bus, "tube", this.state.tube)
                });
            })
            .catch((error) => {
                console.log(error)
            })
        }

        loadData(endpoint);
        loadData(endpoint1);

    }

    render() {
        return(
            <View>
                <FlatList 
                data={this.state.bus}
                renderItem={({item}) => (
                    <Text>{item.timeToStation}</ Text>
                )}
                keyExtractor={item => item.id}
                />
                <FlatList 
                data={this.state.tube}
                renderItem={({item}) => (
                    <Text>{item.timeToStation}</ Text>
                )}
                keyExtractor={item => item.id}
                />
            </ View>
        );
    }
};

Answer 1

一旦理解了它的工作原理，就很容易實現您所說的話。

您正在對API調用使用fetch Promise ，使用時會返回Promise 。 您的用例的偽代碼將如下所示：

class APIService {
    static fetchFirst(cb) {
        fetch('FIRST_URL')
            .then(resp => {
                try {
                    resp = JSON.parse(resp._bodyText);
                    cb(resp);
                } catch(e) {
                    cb(e);
                }
            })
            .catch(e => cb(e));
    }

    static fetchSecond(routeid, stationid, cb) {
        fetch(`https://api.tfl.gov.uk/Line/${routeid}/Arrivals/${stationid}`)
            .then(resp => {
                try {
                    resp = JSON.parse(resp._bodyText);
                    cb(resp);
                } catch(e) {
                    cb(e);
                }
            })
            .catch(e => cb(e));
    }
}

module.exports = APIService;

將此包含在您的父組件中，並按以下方式使用它：

let APIService = require('./APIService')

export class List extends Component {
    constructor(props) {
        super(props);

        this.state = {
            bus: null,
            tube: null,
        }
    };

    componentWillMount() {
        APIService.fetchFirst((resp1) => {
            APIService.fetchSecond(resp1.routeid, resp1.stationid, (resp2) => {
                this.setState({
                    tube: resp2
                });
            });
        });
    }

    render() {
        return(
            <View>
                <FlatList 
                data={this.state.bus}
                renderItem={({item}) => (
                    <Text>{item.timeToStation}</ Text>
                )}
                keyExtractor={item => item.id}
                />
                <FlatList 
                data={this.state.tube}
                renderItem={({item}) => (
                    <Text>{item.timeToStation}</ Text>
                )}
                keyExtractor={item => item.id}
                />
            </ View>
        );
    }
};

我尚未檢查回調函數中的錯誤，請注意使用此錯誤時已處理。