如何实现类似jquery的'success'和'failure'函数来链接回调

Question

我是javascript的新手，我需要链接函数执行，但函数对成功和失败的反应不同。函数数组是作为参数得到的，前面的结果是成功时链中的下一个输入参数，在错误情况下我可以定义一些警报/日志行为。我喜欢jquery如何获得GET ajax方法的成功和失败。 如何使内部函数触发这些事件，如何在javascript中实现？

Answer 1

两种解决方案的实时演示 here (click).

承诺现在被认为是最好的方法，而不是回调。我将从回调开始，因为他们更容易开始并在之后谈论承诺。

具有对象参数的基本回调：

//change this to true or false to make the function "succeed" or "fail"
//var flag = false;
var flag = true;

//this is the function that uses "success" and "error"
function foo(params) {
  //some condition to determine success or failure
  if (flag) {
    //call the success function from the passed in object
    params.success();
  }
  else {
    //call the error function from the passed in object
    params.error();
  }
}

//function "foo" is called, passing in an object with success and error functions
foo({
  success: function() {
    console.log('success!');
  },
  error: function() {
    console.log('error!');
  }
});

确保在触发之前传入回调：

对于完整的解决方案，您还需要在调用它们之前确保这些属性存在 - 只有在传入成功和错误函数时才调用它们。

我将如何做到这一点：

if (flag) {
  //the function is only fired if it exists
  params.success && params.success();
}

作为单个参数传递的回调：

您不必在对象中传递它们。您可以让函数接受单个参数：

function foo(success, error) {
  if (flag) {
    success && success();
  }
  else {
    error && error();
  }
}

foo(
  function() {
    console.log('success!');
  }, 
  function() {
    console.log('error!');
  }
);

单独或在对象中传递的回调：

您还可以让函数根据传入的内容使用对象中的单个参数或函数。您只需检查第一个参数是函数还是对象并相应地使用它：

function foo(success, error) {
  if (arguments.length === 1 && typeof arguments[0] === 'object') {
    var params = arguments[0];
    success = params.success;
    error = params.error;
  }
  if(flag) {
    success && success();
  }
  else {
    error && error();
  }
}

foo(function() {
  console.log('success');
});

foo({
  success: function() {
    console.log('success!');
  }
});

承诺！好哇！

正如我所说的，我更喜欢使用promises，它非常适合处理异步函数。这将需要一个promise库或ES6 JavaScript。这就是jQuery的外观。大多数图书馆都是相似的：

function bar() {
  var deferred = new $.Deferred();

  if (flag) {
    //if you resolve then, the first "then" function will fire
    deferred.resolve();
  }
  else {
    //if you reject it, the second "then" function will fire
    deferred.reject();
  }

  return deferred.promise();
}

//since "bar" returns a promise, you can attach a "then" function to it
//the first function will fire when the promise is resolved
//the second function will fire when the promise is rejected
bar().then(function() {
  console.log('bar success!'); 
}, 
function() {
  console.log('bar error!');
});

使用JavaScript ES6承诺：

function bar() {
  return new Promise(function(resolve, reject) {
    if (flag) {
      resolve()
    }
    else {
      reject();
    }
  })
}

首先，承诺很难理解。有很多很好的教程可以帮助你绕过它们。