web-dev-qa-db-ja.com

ネットワークリクエストの処理は、react nativeで失敗しました

反応ネイティブフェッチAPIを使用中に問題に直面しています。何回もリクエストが失敗しました。高速接続があります。しかし、何度も失敗しました。この問題はAndroidでもiOSでも発生しています。

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

ポストリクエストとしてサーバーを送信するデータ

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

要求が失敗したときのエラー error

fullscreen

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

私は別の投稿に使用した回答を引用しました-しかし、私は待って追加しました。

ネットワークコールが失敗した理由を判断するために、コールのステータスを確認できます。フェッチのokを使用して、応答が有効であったかどうかを確認してください。次に例を示します。

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

Awaitを使用する：

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

次のような応答のステータスにアクセスすることもできます。

response.status;

または、次のようなstatusText

response.statusText;

以下をチェックアウト：

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

Promiseでthen（）関数を使用します。 （要求されたコードスニペット）

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

また、関数がPromiseを返すようにし、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");
            
            */
        });
    });
}

だから今、あなたはこのようなことをすることができます：

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

[〜＃〜] update [〜＃〜]

これと重複する可能性があります： React Native fetch（）Network Request Failed

1
Andriy Klitsuk

Androidデバイスでアプリを実行している場合、APIはコンピューター上にあり、両方とも同じネットワーク上にあります。確認できるものをいくつか追加しました。各トピックには多くの回答があるため、具体的なソリューションを詳しく説明します。

  • 無料のプランでngrok https://ngrok.com/ を使用して簡単に確認し、機能するかどうかを確認します。そうであれば：
    • デバイスブラウザでAPIにアクセスして、APIにアクセスできることを確認します（最も重要なのは、受信ルール、ファイアウォールでポートを許可するかどうかを確認することです）。
    • HTTPSを使用している場合、非信頼証明書を使用していると想定して、反応するネイティブenvが信頼できない証明書を受け入れるように適切に構成されていない場合、エラーが発生する可能性があります。 HTTPSを使用せず、HTTPのみを使用して、そうであるかどうかを確認してください。 https://github.com/facebook/react-native/issues/20488
0
Gabriel P.