Question

使用React Native Fetch 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 })
          }
        })}
      }

请求失败时出错

Answer 1

我引用了我在另一篇文章中使用的答案-但是我添加了等待。

您可以检查呼叫状态，以确定也许网络呼叫失败的原因。尝试使用提取的ok检查响应是否有效，例如：

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

使用等待：

 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/

Answer 2

将then（）函数与promises一起使用。（请求的代码段）

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

更新

可能与以下内容重复：React Native fetch() Network Request Failed

Answer 3

对于在Android设备上运行该应用程序的情况，该API位于计算机上，并且它们都位于同一网络上，因此我添加了一些可能要检查的内容。由于每个主题都有很多答案，因此我没有详细的具体解决方案。

在免费计划上与ngrok https://ngrok.com/进行快速检查，看是否可行。如是：
- 通过尝试在设备浏览器上访问API来确保可访问该API（最重要的是检查是否在入站规则，防火墙中允许该端口）。
- 如果您使用的是HTTPS，并且假设本地React的环境未正确配置为接受不受信任的证书（假设您使用的是不受信任的证书），则可能会出错。在不使用HTTPS的情况下（仅使用HTTP）进行检查，以查看情况是否如此。 https://github.com/facebook/react-native/issues/20488

在响应本机中处理网络请求失败

3 个答案: