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

Posted 2023-03-11

【中文标题】.catch() 甚至通过 fetch() 从另一个承诺中捕获所有错误

【英文标题】：.catch() is catching all errors even from another promise by fetch()

【发布时间】：2018-06-29 03:12:57

【问题描述】：

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

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(/***/) 内部出现错误时获得带有指定错误的常规红屏

【问题讨论】：

您可以检查您的 catch 中的错误是否是 ApiError 的实例，否则抛出剩余的错误

谢谢@ShubhamKhatri，只是您的评论有点难以理解。Matt Aft 的回答非常适合我的情况

【参考方案1】：

我相信这是有意为之，请在此处阅读更多内容：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);
    );