免责声明:我是JS的新手,所以这个问题可能很容易解决,但我已经查阅了所有的资源和堆栈溢出帖子,我可以找到在线的主题
这可能是缺少的一些简单的东西,但我还没有能够调试这个问题:
我想将Azure函数API连接到React应用,但我无法处理Html响应,这使我的await函数挂起。
下面是非常简单的Azure函数API代码:
import logging
import azure.functions as func
import json
def main(req: func.HttpRequest) -> func.HttpResponse:
logging.info('Python HTTP trigger function processed a request.')
return func.HttpResponse(
json.dumps({
'recommendations': [1,2,3,4,5]
}),
mimetype="application/json"
);
下面是我的React应用程序(与Expo一起运行):
class App extends Component {
state = {
selectedUser: 0,
step: 0,
recommendations: 1
};
goToStep0 = async () => {
this.setState({ step: 0, recommendations: 1 });
};
goToStep1 = async () => {
const { data: rec } = await axios.get(config.API_URL);
//const rec = await axios.get(config.API_URL);
// const options = {method: "GET"};
// var rec;
// fetch(config.API_URL,options)
// .then(data => {rec = data.recommendations;});
this.setState({ step: 1, recommendations: rec });
};
Azure函数正在接收输入并每次返回成功答案。
我尝试过的方法:
- 正在更改Azure函数应用程序以返回字符串
- 正在尝试使用fetch获取请求
- 删除异步并运行更旧的school请求:
var rec;
fetch(config.API_URL)
.then(response => response.json())
.then(data => {
rec = data
});
- 大概至少有10件其他的事情我已经忘记了(我已经在这上面浪费了4个多小时...)
提前感谢您的帮助!
编辑:下面是应用程序渲染部分的代码(文本为法语):
render() {
if (!config.API_URL) {
return (
<View style={styles.container}>
<Image
style={{ resizeMode: "center", width: 450, height: 150 }}
source={require("./assets/icon-flat.png")}
/>
<Text style={{ color: "red", margin: 20 }}>
L'app n'est pas configurée correctement. Mettez à jour le fichier
config.json comme indiqué dans le README.
</Text>
</View>
);
}
return (
<View style={styles.container}>
<Image
style={{ resizeMode: "center", width: 450, height: 150 }}
source={require("./assets/icon-flat.png")}
/>
<Text style={{ fontSize: 18, padding: 20, textAlign: "center" }}>
Choisissez votre profil afin de recevoir des recommendations de
lecture personnalisées : {this.state.recommendations.toString()}
Quel est mon état : {this.state.step}
</Text>
<Picker
style={{ height: 200, width: "80%", margin: 30 }}
selectedValue={this.state.selectedUser}
onValueChange={value => this.setState({ selectedUser: value })}
>
{[...Array(10000).keys()].map(e => (
<Picker.Item key={e} label={`User ${e}`} value={e} />
))}
</Picker>
<Button title="Se connecter" onPress={this.goToStep1} />
</View>
);
}
}
2条答案
按热度按时间vawmfj5a1#
您可以在Axios调用时调用回调函数,如下所示:
就像你在捡东西时做的那样
f87krz0w2#
我已经设法找到了问题所在。代码没有问题,因为我使用的是旧版本的React和Axios。
使用最新版本时,我无法向localhost发送请求,但我在部署应用程序后设法获得了响应。
我已经使用Ngrok将我的Azure函数API“部署”到互联网上,Ngrok允许我处理请求。