Javascript 反应自然—；使用Promise为API请求构建动态URL

我把一个问题分解成几个小问题。请理解我以前从未使用过Promise，而且我也是一个新的本地人。如果能获得关于如何设置API调用和处理数据的反馈和建议，那就太好了。先谢谢你

如何为API请求动态创建URL？以下是我努力实现的目标：

伪代码

孩子

• 检索两个变量
• 使用这两个变量来构建URL
• 触发第一个承诺和决心
• 检索另外两个变量
• 使用这两个变量构建一个新的URL
• 触发第二个承诺和决心
• 从两个承诺中收集数据并传递给家长

母公司

• 从子系统检索数据
• 从第一个承诺获取数据并设置为状态
• 从第二个承诺获取数据并设置为另一个状态

APIservice.js

孩子

List.js

母公司

正如您所看到的，我设置端点的方式很蹩脚。这并不理想，因为URL是相同的。我想构造一些可以接收两个变量的东西，并在运行中构建URL。类似于

https://api.tfl.gov.uk/Line/${routeid}/Arrivals/${stationid}

如果我做到了这一点，我如何将API调用传递给只有一个端点的APIservice，该端点将根据它接收到的两个变量进行动态更改？我不知道如何区分承诺中的呼叫。所有呼叫都只有“一个”URL

let APIservice=require（'./APIservice'）
让我们来看看https://api.tfl.gov.uk/Line/55/Arrivals/490004936E'
让endpoint1='1！'https://api.tfl.gov.uk/Line/Northern/Arrivals/940GZZLUODS'
导出类列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
总线：空，
管：空，
}
};
组件willmount（）{
让loadData=（端点）=>{
我保证([
APIservice.\u getStopPoint（端点），
APIservice._getStopPoint（端点1），
])
。然后（（数据）=>{
//更好识别的名称
const listBus=数据[0]
常量listTube=数据[1]
这是我的国家({
总线：listBus，
管：listTube
}, () => {
console.log（“bus”，this.state.bus，“tube”，this.state.tube）
});
})
.catch（（错误）=>{
console.log（错误）
})
}
加载数据（端点）；
加载数据（端点1）；
}
render（）{
返回(
(
{item.timeToStation}
)}
keyExtractor={item=>item.id}
/>
(
{item.timeToStation}
)}
keyExtractor={item=>item.id}
/>
);
}
};

一旦你了解了它的工作原理，就很容易实现你所说的内容

您正在对API调用使用

fetch

，API调用在使用时返回一个

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>
        );
    }
};

let APIService=require（'./APIService'）
导出类列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
总线：空，
管：空，
}
};
组件willmount（）{
APIService.fetchFirst（（resp1）=>{
APIService.fetchSecond（resp1.routeid，resp1.stationid，（resp2）=>{
这是我的国家({
试管：resp2
});
});
});
}
render（）{
返回(
(
{item.timeToStation}
)}
keyExtractor={item=>item.id}
/>
(
{item.timeToStation}
)}
keyExtractor={item=>item.id}
/>
);
}
};

我没有检查回调函数上的错误，请确保在使用此函数时处理错误

---

噢繁荣好的，我需要逐行分析，试着理解发生了什么。不管怎样，谢谢你的回复@迪戈里亚尼：当然！如果你不懂，请告诉我。我想向一个新手解释一下：）好吧，让我们从简单开始。

static

做什么？我在文档中找不到它。@DiegoOriani

static

是JS中的“可见性修饰符”。你可以在任何地方查找ex。酷，我会在这里尝试一些东西。我真的很感谢你的帮助。

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>
        );
    }
};