webentwicklung-frage-antwort-db.com.de

Verarbeiten der Netzwerkanforderung ist fehlgeschlagen, da die native Reaktion fehlgeschlagen ist

Ich habe ein Problem mit der reaktiven nativen Fetch-API. Viele Anfragen sind fehlgeschlagen. Ich habe eine Hochgeschwindigkeitsverbindung. aber oft ist es gescheitert. Dieses Problem tritt bei Android und beiden auf.

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

daten die ich als post server anfrage schicke

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

Fehler, wenn die Anfrage fehlgeschlagen ist error

fullscreen

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

Ich habe eine Antwort zitiert, die ich für einen anderen Beitrag verwendet habe - aber ich habe Warten hinzugefügt.

Sie können den Status des Anrufs überprüfen, um festzustellen, warum der Netzwerkanruf fehlgeschlagen ist. Versuchen Sie, mit ok von fetch zu überprüfen, ob die Antwort gültig war. Beispiel:

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

Verwenden von wait:

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

Sie können auch auf den Status der Antwort zugreifen, z.

response.status;

oder auch statusText wie:

response.statusText;

checkout das unten:

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

Nutze die then () -Funktion mit Versprechungen. (Angefordertes Code-Snippet)

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

Sie können Ihre Funktion auch zu einem Versprechen machen und es mit then () verwenden:

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");
            
            */
        });
    });
}

So, jetzt kannst du so etwas machen:

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

[~ # ~] Update [~ # ~]

könnte ein Duplikat davon sein: Reagiere native fetch () Netzwerkanfrage fehlgeschlagen

1
Andriy Klitsuk

Für den Fall, dass Sie die App auf dem Gerät Android) ausführen, sich die API auf einem Computer befindet und sich beide im selben Netzwerk befinden, habe ich einige mögliche Dinge hinzugefügt, die überprüft werden müssen. t detaillierte spezifische Lösungen, da es zu jedem Thema viele Antworten gibt.

  • Prüfen Sie mit ngrok https://ngrok.com/ schnell, ob der kostenlose Plan funktioniert. Falls ja:
    • Stellen Sie sicher, dass auf die API zugegriffen werden kann, indem Sie versuchen, im Gerätebrowser darauf zuzugreifen (am wichtigsten ist es, zu überprüfen, ob Sie den Port für eingehende Regeln und die Firewall zulassen).
    • Wenn Sie HTTPS verwenden, wird möglicherweise eine Fehlermeldung angezeigt, wenn Ihre native Reaktionsumgebung nicht für die Annahme nicht vertrauenswürdiger Zertifikate konfiguriert ist, sofern Sie ein nicht vertrauenswürdiges Zertifikat verwenden. Prüfen Sie ohne HTTPS, nur mit HTTP, ob dies der Fall ist. https://github.com/facebook/react-native/issues/20488
0
Gabriel P.