使用 axios 时可能出现未处理的 Promise 拒绝、网络错误

Posted 2023-03-14

【中文标题】使用 axios 时可能出现未处理的 Promise 拒绝、网络错误

【英文标题】：Possible unhandled promise rejection, network error when using axios

【发布时间】：2018-09-25 04:15:54

【问题描述】：

我正在尝试使用 react-native、axios 和 Expo 发送 JSON 数据，但是当我在我的应用程序上按“发送”时，我收到以下警告：

可能未处理的承诺拒绝，错误：网络错误

当我尝试通过 POSTman 发送通知 (JSON) 时，我的 API 正确接收通知 (JSON)，但是当我尝试使用 axios 发送通知时，我收到上述警告消息，因此可能 react 没有正确发送数据。

export default class NotificationsInput extends React.Component 

state = 
    token: '',
    title: '',
    body: ''


handleToken = event => 
    this.setState( token: event.target.value )


handleTitle = event => 
    this.setState( title: event.target.value )


handleBody = event => 
    this.setState( body: event.target.value )


handleSubmit = event => 
    event.preventDefault();

    let notification = JSON.stringify(
        token: this.state.token,
        title: this.state.title,
        body: this.state.body
    )

    let headers = 
        headers: 
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        

    
    axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
        .then(res => 
            console.log(res);
            console.log(res.data)
        )
        .then(error => console.log(error));



render() 
    return (
        <View>
            <TextInput onChange=this.handleToken
                style= height: 25, width: 200, borderColor: 'black', borderWidth: 1 
            />
            <TextInput onChange=this.handleTitle
                style= height: 40, width: 200, borderColor: 'black', borderWidth: 1 
            />
            <TextInput onChange=this.handleBody
                style= height: 40, width: 200, borderColor: 'black', borderWidth: 1 
            />
            <Button onPress=this.handleSubmit title="Send">Send</Button>
        </View>
    )

编辑：

我添加了 catch() 函数，但现在控制台中的错误只是Network Error。

handleSubmit = event => 
    event.preventDefault();

    let notification = JSON.stringify(
        token: this.state.token,
        title: this.state.title,
        body: this.state.body
    )

    let headers = 
        headers: 
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        

    
    axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
    .then(res => 
        console.log(res);
        console.log(res.data)
    )
    .catch(error => console.log(error));

【问题讨论】：

您收到的警告信息是什么

可能的未处理承诺拒绝（id：0）：错误：网络错误

您的错误表明您没有处理承诺拒绝，即其他用户提到的添加.catch 也检查此：***.com/questions/38842499/…

在添加 .catch 块后你得到什么错误？

只有网络错误

【参考方案1】：

我可以看到你已经链接了两个，.then 这是不正确的。您需要一个 catch 块来捕获网络错误。往下看

  axios.post(`http://127.0.0.1:8000/send_push_message/`, notification, headers)
    .then(res => 
        console.log(res);
        console.log(res.data)
    )
    .catch(error => console.log(error));

【讨论】：

@Rik 我的意思是在他的代码中。他试图在 .then 中发现错误

我尝试添加一个 catch，但这只会在我的控制台中弹出错误

@BielBorba 是正确的，这意味着您的呼叫被后端拒绝。我认为它在有效载荷中寻找一些它没有找到和失败的数据。 medium.com/@dtinth/…

【参考方案2】：

使用 catch 代替 then 进行错误处理。

.catch(error => console.log(error));

【讨论】：

我试过了，但在控制台上总是出现同样的错误

后端是否启用了 CORS？