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

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

0 голосов
/ 23 ноября 2018

Например, для сравнения двух приведенных ниже кодов: первый использует async / await, а другой вызывает axios с помощью .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
    })
  )
}

1 Ответ

0 голосов
/ 23 ноября 2018

Они оба по сути идентичны.Единственное, к чему это сводится, это чистые предпочтения.Лично я предпочитаю синтаксис 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() в два отдельных обработчика ошибок.

...