.catch()通过fetch()捕获所有错误甚至来自另一个承诺

时间:2018-01-19 19:50:48

标签: javascript react-native promise

我创建了一个简单的函数来通过存储的令牌对用户进行身份验证,该函数基于一个promise,如果它已成功连接到我们的服务器API,则返回带有用户详细信息的响应,如果有服务器连接,它将返回通过React-native fetch方法拒绝指定的错误。

import React, { Component } from 'react';
import {
    Text,
    View,
    AlertIOS,
} from 'react-native';

function AuthAPI(token)
{
    return new Promise((resolve, reject) => {
        fetch("https://myawesomeapi.com/auth", {
            method: "POST",
            body: '{"token": "' + token + '"}',
        })
        .then((response) => response.json())
        .then((response) => {
            resolve(response);
        })
        .catch((error) => {
            reject(error);
        });
    });
}

export default class Home extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            bodyMessage: 'Waiting for response!',
        };
    }

    componentWillMount()
    {
        AuthAPI("token-here")
        .then((response) => {
            const justAnotherVar = iamNotExist; // this will throw an error in next .catch
            AlertIOS.alert("Your Name: " + response.userFullName);
            this.setState({bodyMessage: 'Fetch is done with a response!'});
        })
        .catch((error) => {
            console.err(error);
        });
    }

    render()
    {
        const { bodyMessage } = this.state;
        return (
            <View style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
            }}>
                <Text>Welcome..</Text>
                <Text>{bodyMessage}</Text>
            </View>
        );
    }
}

问题解释:

AuthAPI.then(/***/)内部出现错误时,它将被AuthAPI.catch捕获,但据我所知AuthAPI.catch只会捕获来自该承诺拒绝的react-native fetch方法错误返回的错误。

例如,在AuthAPI.then内,我已经为一个新的常量变量const justAnotherVar = iamNotExist;分配了一个未定义的变量,这样就会在下一个catch中抛出一个错误。

ReferenceError: Can't find variable: iamNotExist

我想要的是让AuthAPI.catch仅获取获取方法错误,并在AuthAPI.then(/***/)

内发生错误时获得指定错误的常规红屏

1 个答案:

答案 0 :(得分:0)

我认为这是打算发生的,请在此处阅读更多内容:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

你可以做的是添加一个try / catch,以便.then语句有自己的错误处理,并且在出现问题时不会触发.catch:

  AuthAPI("token-here")
    .then((response) => {
        try {
          const justAnotherVar = iamNotExist; // this will throw an error in next .catch
          AlertIOS.alert("Your Name: " + response.userFullName);
          this.setState({bodyMessage: 'Fetch is done with a response!'});
        } catch (e) {
          //error handling
        }
    })
    .catch((error) => {
        console.err(error);
    });