Какой лучший подход для Redux Action Creator: .then или синтаксис async / await?

Например, сравнивая два кода ниже, первый использует async / await, а другой вызывает аксиомы с .then.

Какой код рекомендуется?

const BASE_URL = "https://jsonplaceholder.typicode.com"

// async await syntax
export const fetchPosts = () => async dispatch => {
  const response = await axios.get(BASE_URL + "/posts")
  dispatch({ type: "FETCH_POSTS", payload: response })
}

// using .then instead
export const fetchPosts2 = () => dispatch => {
  axios.get(BASE_URL + "/posts").then(response =>
    dispatch({
      type: "FETCH_POSTS",
      payload: response
    })
  )
}
10 вопросов на собеседовании по React js
10 вопросов на собеседовании по React js
Вопрос: Что такое React JS? Каковы преимущества использования React?
0
0
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Они оба по сути идентичны. Все сводится к чистому предпочтению. Я лично предпочитаю синтаксис async / await, потому что он может избавить вас от некоторых потенциальных головных болей при выполнении нескольких вызовов, избегая некоторых особенно неприятных вложенных вызовов:

// async await syntax
export const fetchPosts = () => async dispatch => {
  const posts = await axios.get(BASE_URL + "/posts")
  const users = await axios.get(BASE_URL + "/users", {
    params: posts.map(p => p.author_id)
  })
  dispatch({ type: "FETCH_POSTS", payload: {
      posts, users
  }})
}

против:

// async await syntax
export const fetchPosts = () => dispatch => {
  axios.get(BASE_URL + "/posts").then(posts =>
    axios.get(BASE_URL + "/users", {
      params: posts.map(p => p.author_id)
    }).then(users => {
      dispatch({ type: "FETCH_POSTS", payload: {
          posts, users
      }})
    })
  )
}

Не забывайте также о синтаксисе try / catch. Вы можете попробовать / перехватить целые блоки кода, а затем также отправить сообщение об ошибке. В последнем случае (без использования async / await) вам нужно будет связать .then() в 2 отдельных обработчика ошибок.

Другие вопросы по теме