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

Question

我正在尝试使用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));

}

Answer 1

我可以看到你链接了两个，然后这是不正确的。您需要一个 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));

Answer 2

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

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

Answer 3

解决了。更改：

return axios.get('http://localhost:3000/hello')

至：

return axios.get('http://10.0.0.2:3000/hello')

并且它有效。在 Android 模拟器中，本地主机引用其设备。

https://github.com/facebook/react-native/issues/10404

Answer 4

如果您在后端堆栈中启用了 cors，

然后尝试将

127.0.0.1

替换为

10.0.2.2

希望这有帮助。

Answer 5

再次检查您的 api_url。

应包含“http”或“https”

Answer 6

如果您在本地计算机上使用像 ngrok 这样的数据库，请确保在重新启动服务器后获得新的转发地址。

我花了一段时间才发现为什么我突然无法使用我的应用程序的某些部分，尽管我的代码看起来不错。我重新启动了我的 ngrok 服务器，替换了我的服务器文件中的转发地址，并且它被修复了！ :)