node.js - 无法使用 React 处理 Azure Functions Html 响应 - Expo

Question

免责声明:我是 JS 新手，所以这个问题可能很容易解决，但我查阅了可以在网上找到的有关该主题的所有资源和堆栈溢出帖子

这可能是缺少的一些简单的东西，但我无法调试这个问题:

我想将 Azure Function API 连接到 React 应用程序，但我无法处理 Html 响应，这导致我的等待函数挂起。

这是非常简单的 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 获取请求
• 删除异步并运行更旧的学校请求:

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

Answer 1

我已经找到问题所在了。代码没有问题，因为我使用的是旧版本的react和axios。

使用最新版本，我无法向 localhost 发送请求，但我在部署应用程序后设法获得响应。

我已使用 Ngrok 将我的 Azure 函数 API“部署”到互联网，这使我能够处理请求。