action异步返回json

在前端开发中，有很多时候我们需要从后端获取数据，这时我们就需要使用 AJAX 技术来异步请求数据。而 Action 异步返回 JSON 数据，就是一种常见的 AJAX 请求方式。

export const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_DATA_START' });

  try {
    const response = await fetch('/api/data');
    const data = await response.json();

    dispatch({ type: 'FETCH_DATA_SUCCESS',payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAIL',payload: error });
  }
};

上面的代码是一个使用 Redux Thunk 中间件的 Action，它通过异步请求后端接口的方式获取数据，并将数据分别在请求开始、请求成功和请求失败时分别触发不同的 Action，从而更新组件的状态。

在这个 Action 中，我们首先分别触发了请求开始和请求成功的 Action，然后通过 fetch 函数发起了异步请求，获取到后端返回的 JSON 数据，并将其解析为 JavaScript 对象类型的数据，最后再触发请求成功的 Action，并将获取到的数据作为参数传入。如果在请求过程中出现了异常，我们则会触发请求失败的 Action，并将异常信息作为参数传入。

通过这种方式，我们可以方便地在组件中使用 Action 来请求数据，并根据不同情况进行相应的状态更新，从而实现一个更加灵活的前端应用。