ReactNative之fetch请求报错解决

最新推荐文章于 2024-12-13 11:22:59 发布

原创最新推荐文章于 2024-12-13 11:22:59 发布 · 置顶 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ReactNative #fetch #iOS

ReactNative 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在ReactNative中遇到fetch请求错误的问题及解决方案。当使用fetch进行POST请求时，由于body数据格式问题导致请求失败。通过将数据转换为传统URL编码格式，并创建一个方法strDicToString处理data，成功解决了post请求的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onLoad(url){
    fetch(url)
        .then(response=>response.json())
        .then(result=>{
            this.setState({
                result:JSON.stringify(result)
            })
        })
        .catch(error=>{
            this.setState({
                result:JSON.stringify(error)
            })
        })
}
onSubmit(url){
    fetch(url,{
        method:'POST',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/x-www-form-urlencoded'
        },
        // body:JSON.stringify({
        //     session_id:"ccf80d15403caf12cb41e9fc8c4327630ef03b76",
        // })
        body:'session_id=ccf80d15403caf12cb41e9fc8c4327630ef03b76'
    })
        .then(response=>response.json())
        .then(result=>{
            this.setState({
                result:JSON.stringify(result)
            })
        })
        .catch(error=>{
            this.setState({
                result:JSON.stringify(error)
            })
        })
}

<Text
    style={styles.tips}
    onPress={()=>{
        this.onLoad('http://rap.taobao.org/mockjsdata/11793/test')
    }}>获取数据
</Text>

<Text
     style={styles.tips}
     onPress={()=>{
         this.setState({
              result:''
         })
         this.onSubmit('http://xxxx/wx/get_settings')
     }}>提交数据
 </Text>
<Text>返回的结果:</Text>
<Text>{this.state.result}</Text>

然后出了很奇葩的问题，如下图所示

返回的结果根本不是我想要的数据，最后查找官方文档，看到一句话

post请求的时候，给服务器端传的body，改为直接拼接的格式即可：

fetch这边的post请求需要用传统方式上传data数据的话，可以写一个方法专门处理

strDicToString(data){
    let result=''
    let arr=[]
    for (let [k, v] of Object.entries(data)) {
        // alert(`${JSON.stringify(k)}=${JSON.stringify(v)}`);
        // alert(k+'='+v)
        // str=`${JSON.stringify(k)}=${JSON.stringify(v)}`
        str=k+'='+v
        // alert(str)
        arr.push(str)
    }
    for (var i=0;i<arr.length;i++){
        if (i==arr.length-1){
            result+=arr[i]
        }else {
            result+=arr[i]+'&'
        }
    }
    return result
}
然后在调用的时候这样写：body:this.strDicToString(data)

接口就可以成功的请求了。。。。。。