javascript - 正确的 Promise 处理成功和错误回调

Question

我在 TypeScript 中有以下服务可以从后端获取数据。

作为函数 getAllPropertiesByAppId 的参数，我有一个成功和错误回调。

export class PropertyService implements IPropertyService {

/**
 * Get all properties
 */
public getAllPropertiesByAppId(appliactionId: string, success: (properties: Array<IPropertyItem>) => void, error: (error: any) => void): void {              

    //set up createRequestStr and requestInit

    fetch(createRequestStr, requestInit)
        .then<IPropertyItem[]>((response: Response) => {
            if (response.status===401) {
                throw new UnAuthorizedException();
            }
            return response.json<IPropertyItem[]>();
        })
        .then((response: IPropertyItem[]) => {               
            success(response);
        })
        .catch((reason: any) => {
            //error handling
            }
        });
}

然后我在我的 action creator 中使用这个服务:

 initProperties: (appId: string): ActionCreator => (dispatch: Redux.Dispatch, getState: () => IApplicationState) => {
    "use strict";

    console.log("ShoppingCart initProperties - Request all Property");

    var service: IPropertyService = kernel.get<IPropertyService>("IPropertyService");

    service.getAllPropertiesByAppId(appId, (properties: Array<IPropertyItem>): void => {

        dispatch(new ShoppingCartPropertiesLoaded(appId, properties));
        dispatch(new ShoppingCartPropertiesDone(appId, System.Init.Done));            

    }, (error: any): void => {
        console.log("ShoppingCart initProperties - error:" + error);
        dispatch(new ShoppingCartPropertiesDone(appId, System.Init.Error));
    });
}

因此，当我调用 initProperties 操作创建器时，它会调用 getAllPropertiesByAppId，当一切正常时，我将发送操作 ShoppingCartPropertiesLoaded 和 ShoppingCartPropertiesDone。

我有一个连接到存储的简单组件，当执行渲染方法时组件会抛出错误

export default class TotalPriceList extends React.Component<ITotalPriceListProps, void> {

public render(): JSX.Element {

    throw 'SomeError';
}
}

未处理的异常在 fetch 的 catch 语句中结束。

我是否错过了一些事情，比如如何正确退出 promise，或者更好的方法是如何从语句中调用函数/回调并退出 promise，以避免在 fetch 的 catch 语句中从回调中捕获异常？

非常感谢您的帮助

Answer 1

As a parameter of function getAllPropertiesByAppId I have success and error callback.

这就是您的实际问题。您应该始终从异步函数返回一个 promise 。停止使用回调参数!

你的代码应该是这样的

/**
 * Get all properties
 */
public getAllPropertiesByAppId(appliactionId: string): Promise<IPropertyItem[]> {
    //set up createRequestStr and requestInit
    return fetch(createRequestStr, requestInit)
//  ^^^^^^
    .then<IPropertyItem[]>((response: Response) => {
        if (response.status===401) {
            throw new UnAuthorizedException();
        }
        return response.json<IPropertyItem[]>();
    });
}

这将顺便解决您的未处理拒绝问题。通过不结束链条而是返回 promise ，您将处理错误的责任交给了调用者 - 像往常一样。此外，调用者对他在 他的 promise 回调中所做的任何事情隐式负责 - 它们根本不关心 promise 返回方法。

因此你会使用

service.getAllPropertiesByAppId(appId).then((properties: Array<IPropertyItem>): void => {
//                                    ^^^^^
    dispatch(new ShoppingCartPropertiesLoaded(appId, properties));
    dispatch(new ShoppingCartPropertiesDone(appId, System.Init.Done));            
}, (error: any): void => {
    console.log("ShoppingCart initProperties - error:" + error);
    dispatch(new ShoppingCartPropertiesDone(appId, System.Init.Error));
}).catch((reason: any) => {
    // error handling for a failed dispatch
});