在 React 中捕获后端返回的错误答案

【问题标题】：Catch the backend returned error in React在 React 中捕获后端返回的错误
【发布时间】：2023-08-15 01:58:01
【问题描述】：

大家好，我正在使用带有 typescript 的 react redux。所以，当后端返回错误时，我不想它，因为它是从后端返回的错误消息。在我的 Api 失败时返回此错误。

这是我的 api 调用，功能 ,

   /**
 * @function createSalesContact
 * @export
 * @param {Array<ISalesContact>} salesContact
 * @returns {Promise<ISalesContactListItem[]>}
 */
export function createSalesContact(salesContact: Array<ISalesContact>): Promise<ISalesContactListItem[]> {
    return contactBookApiCalls.createSalesContacts(salesContact);
}

这是我的行动，

/**
 * @function crateSalesContact
 * action of create new sales contact
 * @param {Array<ISalesContact>} salesContact
 * @returns
 */
export const crateSalesContact = (salesContact: Array<ISalesContact>) => {
    return (dispatch: Dispatch, states: () => ISalesContactStoreState) => {
        dispatch(requestAddNewContact());

        createSalesContact(salesContact)
            .then(onSuccess)
            .catch(onError);

        function onSuccess(response: ISalesContactListItem[]) {
            dispatch(addToast("success", { text: "Sales Contact Created successfully" }))
            dispatch(addNewContactSuccess());
            dispatch(togglePage({ page: 'salesContact', action: 'View', 
            editId: response[0].Data.SalesContactId }));

        }

        function onError(error: any) {
            dispatch(addNewContactError(error));
        }
    };
};

所以我不想捕获“需要名字”错误。那么有什么可能的方法来做到这一点

【问题讨论】：

标签： reactjs typescript redux redux-thunk

【解决方案1】：

我为此找到了一些解决方法。这是我的解决方案。

我像这样更改我的操作错误方法。

function onError(response: Response) {
        if (response.status === 500) {
            return response.json() 
                .then((json) => {

                    dispatch(addToast("error", { text: json.Message }));
                    dispatch(recieveSalesContactUpdateError(json.Message));

                    console.log(json.Message)
                });
        } else {
            return response.json();
        }
    }

【讨论】：