javascript - Async Functions

Question

I have a function

export const setSearchField = text => dispatch => {
  dispatch({ type: REQUEST_GIFS_PENDING });
  fetch(API_URL + (text || DEFAULT_QUERY) + API_KEY + LIMIT)
    .then(response => response.json())
    .then(items =>
      dispatch({ type: REQUEST_GIFS_SUCCESS, payload: items.data })
    )
    .catch(error => dispatch({ type: REQUEST_GIFS_FAILED, payload: error }));
};

Now i want to convert it to an async function, I did like this without try & catch, but its not working

export const setSearchField = text => dispatch => {
  dispatch({ type: REQUEST_GIFS_PENDING });
  async function fetUsers(){
    const response = await fetch(API_URL + (text || DEFAULT_QUERY) + API_KEY + LIMIT);
    const items = await response.json();
    dispatch({ type: REQUEST_GIFS_SUCCESS, payload: items.data })
  }

What am i doing wrong?

Answer 1

The reason your code doesn't work is that you never call the async function you've created. However, there isn't any reason to make an inner async function; just make the one you already have async:

export const setSearchField = text => async (dispatch) => {
  dispatch({ type: REQUEST_GIFS_PENDING });
  try {
    const response = await fetch(API_URL + (text || DEFAULT_QUERY) + API_KEY + LIMIT);
    const items = await response.json();
    dispatch({ type: REQUEST_GIFS_SUCCESS, payload: items.data })
  } catch (error) {
    dispatch({ type: REQUEST_GIFS_FAILED, payload: error })
  }
}