Альтернативный способ обработки неопределенных данных ajax

Sølve Tornøe спросил: 03 ноября 2018 в 08:15 в: javascript

Что-то, чего я никогда не понимал в Vue, так это то, как следует решать проблему с неопределенными "сетевыми / асинхронными ключами".

Приведите приведенный ниже пример:

<template>
  <div>
    <h1>{{row.something_undefined_before_ajax_returns.name}}</h1>
  </div>
</template><script>
export default {
  data() {
    return {
      row: {}
    }
  },
  created() {
    axios.get('.../row/12')
      .then(response => {
        // response = {data: {something_undefined_before_ajax_returns: {name: 'John Doe'}}}
        this.row = response.data
     })
  }
}
</script>

Это вернет консольное предупреждение: [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined". Тем не менее, h1 будет, наконец, отображать John Doe после того, как Vue зарегистрировал асинхронные изменения.

Однако способ, которым я справился с этим, пока заключается в простом определении ожидаемый ключ в js примерно так:

<script>
export default {
  data() {
    return {
      row: {
        something_undefined_before_ajax_returns: {}
      }
    }
  },
  ...
}
</script>

При этом Vue не выдает предупреждение, как ожидалось. Тем не менее, это работает в краткосрочной перспективе, но как только возвращаемые данные из HTTP-вызовов становятся немного более сложными и вложенными, возникает ощущение бессмысленности необходимости определять все возможные результаты.

Есть ли способ сказать Vue игнорировать такие предупреждения до тех пор, пока не будет получен вызов?

0 ответов