將promises轉換為async / await - Javascript

Question

我在React中有一個dataService函數來執行我的API獲取。 我嘗試轉換為async / await塊，但似乎遇到了障礙。

使用承諾：

const dataService = (url, options, dataToPost) => {

    return (dispatch, getState) => {
        const { requestAction, successAction, failureAction } = options.actions;

        if (options.shouldRequest(getState())) {
            dispatch(requestAction());
            const promise = axios.get(url, { withCredentials: true });
            return promise
                .then(response => {
                    if (response.status === 200) {
                        return dispatch(successAction(response, dispatch));
                    }
                    return Promise.reject(response);
                })
                .catch(error => {
                    if (error.response.status === 302) {
                        window.location = '/view';
                    }
                    dispatch(openErrorDialog());
                    return dispatch(failureAction(error));
                });
        }
        return Promise.reject(new Error('FETCHING'));
    };
};

使用async / await：

  const dataService = async (url, options, dataToPost) => { return async (dispatch, getState) => { let url; const {requestAction, successAction, failureAction} = options.actions; if (options.shouldRequest(getState())) { dispatch(requestAction()); const promise = axios.get(url, {withCredentials: true}); try { const response = await promise; if (response.status === 200) { return dispatch(successAction(response, dispatch)); } return Promise.reject(response); } catch (error) { return dispatch(failureAction(error)); } } return Promise.reject(new Error('FETCHING')); }; }; 

錯誤是“操作必須是普通對象。使用自定義中間件進行異步操作。”。 承諾代碼完美無缺。 我已經在使用thunk了。 請指教。

Answer 1

await axios.post(url, data, { withCredentials: true })不返回promise，它返回請求的真實響應。

使用async-await時不要使用then-catch，而是使用try-catch。 這是修復

try {
    const response = dataToPost
        ? await axios.post(url, data, { withCredentials: true })
        : await axios.get(url, { withCredentials: true });
    if (response.status === 200) {
        return dispatch(successAction(response, dispatch));
    }
    return Promise.reject(response);
} catch (err) {
    if (error.response.status === 302) {
        window.location = '/view';
    }
    dispatch(openErrorDialog());
    return dispatch(failureAction(error));
}

Answer 2

如果你真的想要改變Promise - > async / await，那么更改如下：

首先，你不希望dataService async因為它意味着它返回一個Promise，它改變了它需要被調用的方式 - 你不會那么想

其次，改變

  const promise = axios.get ...
  promise.then(response ....

至

  const promise = await axios.get ...
  promise.then(response ....

不會工作......

它需要

const response = await axios.get ...

不需要promise變量

即便如此，你仍然在你轉換的代碼中使用promises ...現在只有不同的async關鍵字才有所不同

以下是您的（原始）代碼應轉換為異步/等待的方式

請注意以下內容中Promise一詞的總LACK：

const dataService = (url, options, dataToPost) => {

    return async (dispatch, getState) => {
        const { requestAction, successAction, failureAction } = options.actions;

        if (options.shouldRequest(getState())) {
            const data = typeof dataToPost === 'string' ? { data: dataToPost } : dataToPost;
            dispatch(requestAction());
            try {
                const response = dataToPost
                    ? await axios.post(url, data, { withCredentials: true })
                    : await axios.get(url, { withCredentials: true });
                if (response.status === 200) {
                    return dispatch(successAction(response, dispatch));
                }
                throw response;
            } catch(error) {
                if (error.response.status === 302) {
                    window.location = '/view';
                }
                dispatch(openErrorDialog());
                return dispatch(failureAction(error));
            }
        }
        throw new Error('FETCHING');
    };
};