Question 104520 in Azure Question posted in
The official documentation to get you started can be found here.

Unable to process Azure Functions Html response with React – Expo

Disclaimer: I am new to JS so this problem is probably pretty simple to solve, but I have consulted all resources and stack overflow posts I could find online on the subject

This is probably something simple that’s missing but I haven’t been able to debug this problem :

I want to connect an Azure Function API to a React app, but I am unable to process the Html Response, which makes my await functions hang.

Here is the very simple Azure functions API code :

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

And here is my React based app (running with 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 });
  };

The Azure function is receiving input and returns a successful answer everytime.

What I have tried :

  • Changing the the Azure function app to return a string
  • Trying to get the request with fetch
  • Removing async and running a more old school request :
var rec;
fetch(config.API_URL)
.then(response => response.json())
.then(data => {
rec = data
});
  • Probably at least 10 other things I have forgotten (I have wasted more than 4 hours on this…)

Thanks a lot in advance for your help!

Edit : Below is the code for the rendering part of the app (text is in French) :

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have managed to find the problem. The code was not problematic as much as the fact that I was using an old version of react and axios.

    With the newest version, I am unable to send requests to localhost but I managed to get responses after deploying the application.

    I have "deployed" my Azure function API to the internet using Ngrok which allows me to handle requests.


  2. 0

    You can call the callback function on Axios call like this:

      axios.get(config.API_URL)
  .then(res => {
    if (res) {
     console.log("Data fetched: ", res)
      // do stuff
    }
    else {
      // do stuff
    }
  }).catch(err => {
   console.log(err)
  })

    Like you did with fetch

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search