如何在JavaScript中使用变量进行连续的API调用
抱歉，如果这是个“菜鸟”问题，但我还是会问的。:)
我有一个HTML页面和一个JavaScript文件，其中我发出了两个API调用来获取火车出行信息。您正在填写您想要访问的城市，第一个API调用将返回该位置的ID。第二个API调用应该使用这个接收到的ID为您提供多达六个即将从该位置出发到预先设置的目的地。
第一个API调用处理从cityname页面的输入字段传递的变量，在日志中我得到一个ID号。它显示在控制台日志中。不幸的是，我不能提供图片(声誉太低：)。
第二个API调用总是失败的，因为变量trainoriginid总是以空结束(我猜这实际上是一个变量范围问题)。我尝试在第二个API调用上使用与第一个调用相同的技术，正如您在注释的"var url“行中看到的那样，但是无论我在哪里声明或设置trainoriginid，它最终都是空的。如何将第一个API调用的结果传递给第二个API？非常感谢您提供的所有信息。
这一行来自错误消息：
GEThttps://api.resrobot.se/v2.1/trip?format=json&originId=&destId=740098037&passlist=true&showPassingPoints=true&accessId如果我使用带有"const“行的调用，那么一切都可以工作，这样您就可以看到url应该是什么样的。
JavaScript代码(未完成)如下：
let reqBtn = document.querySelector('.request-btn');
let reqInput = document.querySelector('.request-input');
let respResultDiv = document.querySelector('.response-result');
let trainoriginid = '';
reqBtn.addEventListener('click', event => {
let cityName = reqInput.value;
console.log(cityName);
var citylookup = `https://api.resrobot.se/v2.1/location.name?input=${cityName}&format=json&accessId=[APIKey]`;
axios.get(citylookup).then(searchresponse => {
console.log(searchresponse.data);
let searchdata = searchresponse.data;
trainoriginid = searchdata.stopLocationOrCoordLocation[0].StopLocation.extId;
console.log(trainoriginid);
});
//var url = `https://api.resrobot.se/v2.1/trip?format=json&originId=${trainoriginid}&destId=740098037&passlist=true&showPassingPoints=true&accessId=[APIKey]`;
const url = `https://api.resrobot.se/v2.1/trip?format=json&originId=740000008&destId=740098037&passlist=true&showPassingPoints=true&accessId=[APIKey]`
axios.get(url).then(response => {
console.log(response.data.Trip);
let data = response.data.Trip;注意！在遵循上面的链接并做了一些测试之后，使用回调解决了我的问题。作为参考，最终解决方案如下所示：
reqBtn.addEventListener('click', event => {
let cityName = reqInput.value;
respResultDiv.textContent = '';
console.log(cityName);
getStationId(cityName, getTrainList)
});
function getStationId(cityNameinput, callback){
var citylookup = `https://api.resrobot.se/v2.1/location.name?input=${cityNameinput}&format=json&accessId=[API-key]`;
var originid;
axios.get(citylookup).then(searchresponse => {
console.log(searchresponse.data);
let searchdata = searchresponse.data;
originid = searchdata.stopLocationOrCoordLocation[0].StopLocation.extId;
console.log(originid);
callback(originid);
});
}
function getTrainList(trainoriginid){
console.log(trainoriginid);
var url = `https://api.resrobot.se/v2.1/trip?format=json&originId=${trainoriginid}&destId=740098037&passlist=true&showPassingPoints=true&accessId=[API-key]`;
axios.get(url).then(response => {
console.log(response.data.Trip);
let data = response.data.Trip;
[Do a bunch of stuff with the result here]
});
}回答 1
Stack Overflow用户
发布于 2022-05-24 06:26:05
在上面的例子中，第二个查找调用需要在第一个查找的“然后”响应方法中。您同时调用两个内联，因此第二个调用将始终使用空的“列车原始it”，因为它还没有设置。另外，在上面的示例中，我无法看到您实际将"${trainoriginid}“应用于第二个url。
在这种情况下，您不需要使第二个url为"const“，因为这是一个单一的使用协议。最好使用"let“(并应用"${trainoriginid}")。
顺便提一句，axios是可使用的，因此您可以使用等待第一个调用(并使click方法异步)，然后您可以让这两个查找内联，但它可能更容易只是移动第一个响应内的第二个调用。
https://stackoverflow.com/questions/72357912
复制相似问题
腾讯云开发者
