Question

我有一个ajax调用，只要有错误就会在响应中添加属性errorCode。属性errorCode中的值由各种用例确定。调用可以返回10个代码，即5010,5020,5030 ...... 600。

我们在页面中有两个div

 ...rest of the page    
 <div id="unsupported">
 <p>equipment is unsupported</p>
 </div>
 <div id="notFound">
 <p>equipment could not be found</p>
 </div>
 ...rest of the page

现在我想以下列方式处理错误

1 - 如果errorCode是5020,5030或5090 隐藏除了两个div之外的所有其他div（

）

1（a） - 如果errorCode为5020或5030，则仅显示#unsupported div

1（b） - 如果errorCode为5090，则仅显示#notFound div

2 - 如果errorCode不是5020,5030或5090 只需显示带有错误消息的祝酒词

这是处理ajax调用错误的回调函数

function(error) {
  // The normal way of doing it
  if (error.errorCode === 5010 || error.errorCode === 5020 || error.errorCode === 5090) {
    hideBackground();
    if (error.errorCode === 5010 || error.errorCode === 5020) {
      showUnsupported();
    } else if (error.errorCode === 5090) {
      showNotFound();
    }
  } else {
    toast(error.message);
  }
}

我知道它非常简单，但我认为必须有一种优化的方法，通过编写较少的代码，使用javascript / ES6 / ES7功能。寻找开箱即用的想法来缩短代码。

Answer 1

如果条件在这种情况下完全正常，我的代码不会有太大变化，但我会删除if (error.errorCode === 5010 || error.errorCode === 5020 || error.errorCode === 5090) {并移动hideBackground，以便代码看起来像这样： / p>

function(error) {
  if (error.errorCode === 5010 || error.errorCode === 5020) {
    hideBackground();
    showUnsupported();
  } else if (error.errorCode === 5090) {
    hideBackground();
    showNotFound();
  } else {
    toast(error.message);
  }
}

如果您编写这样的代码，那么每次调用hideBackground / showUnsupported时都必须调用showNotFound时会自动出现问题，如果是这种情况，则可能会出现这种情况是必须被转移到这些功能的东西。

或者你写一个这样的帮手：

function showError(callback) {
  hideBackground()
  callback()
}

function(error) {
  if (error.errorCode === 5010 || error.errorCode === 5020) {
    showError(showUnsupported)
  } else if (error.errorCode === 5090) {
    showError(showNotFound)
  } else {
    toast(error.message);
  }
}

Answer 2

这个怎么样？如果您需要添加新的错误处理程序，只需创建一个函数并将其添加到errors对象。如果多个错误正在执行相同的操作（例如5010和5020正在执行相同的操作），这是很好的。我有两种方法可以做到这一点。

＆＃13;

const error5010 = () => {
  // hideBackground();
  // showUnsupported();
};

const error5020 = error5010;

const error5090 = () => {
  // hideBackground();
  // showNotFound();
};

const errors = {
  error5010,
  error5020,
  error5090,
};

const otherError = () => {
  console.log('Unknown error...');
};

const errorHandler = code =>
  typeof errors['error' + code] === 'function'
    ? errors['error' + code]()
    : otherError()
    ;

errorHandler(5010);
errorHandler(5090);
errorHandler(2000);

＆＃13;

如果你讨厌创建10个函数，你可以改用它。

＆＃13;

const apply = (fn, cond) => cond ? fn() : null;

const hideBackground = () => {
  console.log('hideBackground');
};

const showNotFound = () => {
  console.log('showNotFound');
};

const showUnsupported = () => {
  console.log('showUnsupported');
};

function errorHandler(code) {
  apply(hideBackground, [5010, 5020, 5090].includes(code));
  apply(showNotFound, [5010, 5020].includes(code));
  apply(showUnsupported,[5090].includes(code));
}

errorHandler(5010);

＆＃13;

什么是通过HTTP响应应用条件的最优化方法＆＃39; errorCode

2 个答案: