我应该从这个异步函数返回什么？

Question

我是 javascript 中 Promises 的常规用户。现在，我想尝试异步/等待。但是由于对 async/await 的了解一半，我被卡住了。

我有一个使用 Promise 的函数如下：

const asyncRequest = (funcA, b) => {
  // do some syncronous stuff. e. g. console.log
  console.log(b);
  return funcA(b)
    .then((something) => console.log(something))
    .catch((err) => console.log(err))
}

我已尝试将上述基于 Promise 的代码转换为 async/await：

const asyncRequest = async (funcA, b) => {
  // do some syncronous stuff. e. g. console.log
  console.log(b);
  try {
    const something = await funcA(b);
    console.log(something);
  } catch (err) {
    console.log(err);
  }
}

函数转换看起来很简单。但我注意到我的基于 Promise 的代码中有 return 关键字。但是在我的异步/等待代码中，我很困惑。我应该返回什么？

真实例子：

基于 Promise 的示例

const Toast = {};

const createAsyncAction = ({
  asyncRequest, types, loadingPayload = null, showToastOnError = true,
}) => (dispatch) => {
  dispatch({
    type: types.loading,
    payload: loadingPayload,
  });

  return asyncRequest()
    .then((response) => {
      if (response.isMock) { // if mock request
        dispatch({
          type: types.success,
          payload: response.payload,
        });
        return;
      }

      if ([2, 3].includes(String(response.status).substring(0, 1))) { // if request succeeds
        response.json()
          .then((res) => {
            if (res.statusCode === 1000) {
              dispatch({
                type: types.success,
                payload: res.data,
              });
              return;
            }
            dispatch({ // if its a known error by server
              type: types.failure,
              payload: {
                code: res.statusCode,
                message: res.message,
              },
            });
            if (showToastOnError) {
              Toast.error(`${res.statusCode}: ${res.message}`);
            }
          }).catch((error) => { // if response is not convertible to json
            dispatch({
              type: types.failure,
              payload: {
                code: response.status,
                message: error.message,
              },
            });
            if (showToastOnError) {
              Toast.error(`${response.status}: ${error.message}`);
            }
          });
        return;
      }

      dispatch((error) => { // if request fails with some status codes like 404, 500...
        dispatch({
          type: types.failure,
          payload: {
            code: response.status,
            message: error.message,
          },
        });
        if (showToastOnError) {
          Toast.error(`${response.status}: ${error.message}`);
        }
      });
    }).catch(() => { // if request cannot be made due to some internet or connection issue
      dispatch({
        type: types.failure,
        payload: {
          code: 0,
          message: 'Connection issue. Make sure your are connected to the internet and that your API is working',
        },
      });
      if (showToastOnError) {
        Toast.error('Connection issue. Make sure your are connected to the internet and that your API is working');
      }
    });
};

export default createAsyncAction;

异步/等待示例：

const Toast = {};

const createAsyncAction = ({
  asyncRequest, types, loadingPayload = null, showToastOnError = true,
}) => async (dispatch) => {
  dispatch({
    type: types.loading,
    payload: loadingPayload,
  });

  try {
    const response = await asyncRequest();
    if (response.isMock) { // if mock request
      dispatch({
        type: types.success,
        payload: response.payload,
      });
      return;
    }

    if ([2, 3].includes(String(response.status).substring(0, 1))) { // if request succeeds
      try {
        const jsonResponse = await response.json();
        if (jsonResponse.statusCode === 1000) {
          dispatch({
            type: types.success,
            payload: jsonResponse.data,
          });
          return;
        }
        dispatch({ // if its a known error by server
          type: types.failure,
          payload: {
            code: jsonResponse.statusCode,
            message: jsonResponse.message,
          },
        });
        if (showToastOnError) {
          Toast.error(`${jsonResponse.statusCode}: ${jsonResponse.message}`);
        }
      } catch (error) {
        dispatch({
          type: types.failure,
          payload: {
            code: response.status,
            message: error.message,
          },
        });
        if (showToastOnError) {
          Toast.error(`${response.status}: ${error.message}`);
        }
      }
      return;
    }

    dispatch((error) => { // if request fails with some status codes like 404, 500...
      dispatch({
        type: types.failure,
        payload: {
          code: response.status,
          message: error.message,
        },
      });
      if (showToastOnError) {
        Toast.error(`${response.status}: ${error.message}`);
      }
    });
  } catch (_) {
    dispatch({
      type: types.failure,
      payload: {
        code: 0,
        message: 'Connection issue. Make sure your are connected to the internet and that your API is working',
      },
    });
    if (showToastOnError) {
      Toast.error('Connection issue. Make sure your are connected to the internet and that your API is working');
    }
  }
};

export default createAsyncAction;

Answer 1

你不需要一个！

任何标记为async 的函数都会返回一个promise。现在，如果您希望该承诺解决某些问题，那么您需要返回一个值。但是，由于您只是在执行console.log，它的返回值为undefined，这相当于什么都不返回（因为如果没有指定的返回值，JavaScript 将隐式返回undefined）。

来自async docs：

异步函数是异步操作的函数 通过事件循环，使用隐式 Promise 返回其结果。

因此，async 将隐式返回包装在 Promise 中的函数的任何返回值。

Answer 2

您不需要退货。这不是代码差异的原因。在您的示例中，您需要在调用 funcA(b) 时使用await，因为您想让 js 在解析时执行其他操作。

const asyncRequest = async (funcA, b) => {
  // do some syncronous stuff. e. g. console.log
  console.log(b);
  try {
    const something = await funcA(b);
    console.log(something);
  } catch (err) {
    console.log(err);
  }
}

Answer 3

两个函数都返回 Promises。

在第一种情况下，这是因为您要返回一个 Promise 链。在第二种情况下，这是因为根据定义，所有async 函数都返回 Promises。所以“return a Promise”消息隐含在第二个函数中。

当您从async 函数返回一个值时，该值就是用于解析承诺的值。如果您不返回任何内容，则使用值 undefined 解析承诺。在这种情况下，这实际上是函数.then((something) => console.log(something)) 中返回的值。这当然是undefined，所以你不需要返回任何东西。