如何编写一个完美的 vue.js 操作以通过正确的错误处理从服务器获取数据？

Question

export const fetchEnvironmentsData = ({ commit }, params) => {
    Vue.http.get('/environments', { params })
        .then(response => response.json())
        .then(data => {
            if (data) {
                commit('mutateUpdateEnvironmentData', data);
            }
        }).catch(function(error) {
            alert('Could not load data, Please try again later');
        });
};

如何处理内部服务器错误和服务器的空响应？

Answer 1

const error = () => alert('Could not load data, Please try again later');

Vue.http.get('/environments', { params })
  .then(response => {
    const data = response.json();
    if (data) {
      commit('mutateUpdateEnvironmentData', data);
    } else {
      error();
    }
  }, error);

或

Vue.http.get('/environments', { params })
  .then(response => response.json(), () => null)
  .then(data => {
    if (data) {
      commit('mutateUpdateEnvironmentData', data);
    } else {
      alert('Could not load data, Please try again later');
    }
  });

如何编写一个完美的 vue.js 操作以通过正确的错误处理从服务器获取数据？

How do I write a perfect vue.js action to fetch data from server with proper error handling?

vue.js

vuex