web-dev-qa-db-fra.com

échec de la gestion de la requête réseau dans React Native

Je rencontre un problème lors de l'utilisation de l'API native fetch de React. plusieurs fois la demande a échoué. J'ai une connexion haut débit. mais plusieurs fois cela a échoué. ce problème se produit dans Android, ios les deux.

const shoppingApi  = 'myserverlink';

async function Sendshoppinapi(data) {
    try {
        let response = await fetch(shoppingApi, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'content-type':'multipart/form-data'
            },
            body: data
        });
        let responseJson = await response.json();
        return responseJson;
    }
    catch (error) {
          Alert.alert(error.toString())
    }
}

export {Sendshoppinapi};

données que j'envoie au serveur en tant que post-demande

  add_to_wishlist = (item,index) => {
        {
          let data = new FormData();
        data.append('methodName',       'add_to_wishlist');
        data.append('user_id',        global.userid)
        data.append('item_id',        this.props.navigation.state.params.itemid.toString())


        Sendshoppinapi(data).then((responseJson)=>{

          console.warn(responseJson);
          if(responseJson.responseCode == '200'){
            this.setState({fav:false})
            Alert.alert('SHOPPING','Item added to wishlist successfully.',[{text: 'OK',},],{ cancelable: false })

          }
          else{
            this.setState({fav:false})
            Alert.alert('SHOPPING','Item already .',[{text: 'OK',},],{ cancelable: false })
          }
        })}
      }

Erreur lors de l'échec de la demande error

fullscreen

react-nativereact-native-androidreact-native-ios
6
Tanveerbyn

J'ai cité une réponse que j'ai utilisée pour un autre post - mais j'ai ajouté attendre.

Vous pouvez vérifier l'état de l'appel pour déterminer peut-être pourquoi l'échec de l'appel réseau. Essayez d'utiliser ok de fetch pour vérifier si la réponse était valide, par exemple:

.then(function(response) {
    if (!response.ok) {
        //throw error
    } else {
       //valid response
    }
})

Utilisation de attendre:

 let response = await fetch(url)
 if (response.ok) return await response.json()

Vous pouvez également accéder à l'état de la réponse comme:

response.status;

ou encore, statusText tel que:

response.statusText;

vérifiez ci-dessous:

https://developer.mozilla.org/en-US/docs/Web/API/Response/statusText

https://developer.mozilla.org/en-US/docs/Web/API/Response/status

https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

1
JRK

Utilisez la fonction then () avec des promesses. (Extrait de code demandé)

fetch(shoppingApi, {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'content-type':'multipart/form-data'
    },
    body: data
})
.then((resp) => {
    return resp.json()
})
.then((resp) => {
  //resp contains your json data
});

Vous pouvez également faire en sorte que votre fonction renvoie une promesse et l'utiliser avec then ():

function sendShoppingApi(data) {
    return new Promise((resolve, reject) => {
        fetch(shoppingApi, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'content-type':'multipart/form-data'
            },
            body: data
        })
        .then((resp) => {
            return resp.json();
        })
        .then((resp) => {
            resolve(resp);
            
            /*
              you should also check if data is valid, if something went wrong
              you can reject the promise:
              
              if(!dataOK)
                  reject("error message");
            
            */
        });
    });
}

Alors maintenant, vous pouvez faire quelque chose comme ça:

sendShoppingApi(data)
.then((resp) => {
    //do stuff with your data
})
.catch((err) => {
    //handle error
});

[~ # ~] mise à jour [~ # ~]

pourrait être un doublon de ceci: React Native fetch () Network Request Failed

1
Andriy Klitsuk

Dans le cas où vous exécutez l'application sur le Android, l'API est sur un ordinateur et les deux sont sur le même réseau, j'ai ajouté des choses possibles à vérifier. t des solutions spécifiques détaillées car il existe de nombreuses réponses sur chaque sujet.

  • Faites une vérification rapide avec ngrok https://ngrok.com/ sur le plan gratuit pour voir si cela fonctionne. Si oui:
    • Assurez-vous que l'API est accessible en essayant d'y accéder sur le navigateur de l'appareil (le plus important est de vérifier si vous autorisez le port aux règles entrantes, pare-feu).
    • Si vous utilisez HTTPS, vous pouvez obtenir une erreur si votre env natif réactif n'est pas correctement configuré pour accepter des certificats non approuvés, en supposant que vous utilisez un certificat non approuvé. Faites une vérification sans HTTPS, uniquement avec HTTP, pour voir si c'est le cas. https://github.com/facebook/react-native/issues/20488
0
Gabriel P.