Javascript中的自定义状态更改事件

我有一个异步函数，可以执行各种等待任务。我试图在功能状态更改或某项任务完成时，在React中通知我的UI

const foo = async () => {
    // trigger on load event

    await task1();
    // trigger task1 done event

    await task2();
    // trigger task2 done event

    await task3();
    // trigger on done event
}

我还希望能够为每个事件指定回调，如下所示：

const bar = foo();
foo.on_load(() => {
    // some code goes here
});
foo.on_done(() => {
    // some code goes here
});

另一种选择是这样的：

const bar = foo();
foo.on('status_change', status => {
    // read the status here and do something depending on the status
})

我一直在阅读JS中的自定义事件，但不确定如何使用它们。或者，也许有另一种方法可以做到这一点

任何想法都会有帮助。谢谢

编辑

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

我试图实现上面的代码，取自

到目前为止，我已经做到了：

class Task {
  constructor() {
    this.first = null;
    this.second = null;
  }

  on(keyword, callback) {
    switch (keyword) {
      case "first":
        this.first = callback;
        break;
      case "second":
        this.second = callback;
        break;
      default:
        // throw new error
        break;
    }
  }
}

const timeout = async time => {
  return new Promise(resolve => setTimeout(resolve, time));
};

const foo = () => {
  const task = new Task();

  timeout(2000).then(async () => {
    task.first && task.first();
    await timeout(2000);
    task.second && task.second();
  });

  console.log("returning");
  return task;
};

const taskObject = foo();
taskObject.on("first", () => console.log("executing first callback"));
taskObject.on("second", () => console.log("executing second callback"));

有没有更好的方法来做到这一点-没有嵌套的thens？哪种方法更好？什么时候编辑-删除嵌套的

然后

子句，并替换为

然后

和

等待

---

PS：根据我的要求，回调就足够了。这只是为了让我更好地理解这个概念。谢谢

我将假设您不只是在每个异步步骤完成后调用某个命名方法是有原因的，也就是说，您希望能够为每个事件插入不同的处理程序。这里有一种方法——从提供的小上下文很难判断它是否是最好的：

const foo = async (handlers) => {
  handlers.onLoad && handlers.onLoad();

  await task1();
  handlers.onTask1Complete && handlers.onTask1Complete();

  await task2();
  handlers.onTask2Complete && handlers.onTask2Complete();
}
const myHandlers = {
  onLoad: () => {
    // do stuff
  },
  onTask1Complete: () => {
    // do other stuff
  },
  onTask2Complete: () => {
    // etc
  }
};

foo(myHandlers);

---

请注意，它允许您仅指定所需的处理程序。更灵活的方法是发布-订阅模型，其中订阅方法将函数推送到处理程序数组，所有处理程序都在事件发生时调用。

最好的选择是使用承诺，这意味着每次解决承诺时，您将得到通知，然后级联承诺将得到执行

下面是链接承诺的一个例子

var function3 = function(resolve, reject)
{
   try
   {
     //do some thing
     console.log('function3 called');
     resolve('function3 success');
   }
   catch(err)
   {
      reject(err);
   }
}

var function2 = function(resolve, reject)
{
   try
   {
     //do some thing
     console.log('function2 called');
     resolve('function2 success');
     //return new Promise(function3);
   }
   catch(err)
   {
      reject(err);
   }
}

var function1 = function(resolve, reject)
{
   try
   {
     //do some thing
     console.log('function1 called');
     resolve('function1 success');
   }
   catch(err)
   {
      reject(err);
   }
}






var promise = new Promise(function1);

promise
.then(function(response){
  console.log(response);
   return new Promise(function2);
}, function(error)
{
   console.log(error);
})
.then(function(response)
{
  console.log(response);
  return new Promise(function3);
},
function(err)
{
  console.log(error);
})
.then(function(response)
{
  console.log(response);
},
function(err)
{
  console.log(error);
})

//output
"function1 called"
"function1 success"
"function2 called"
"function2 success"
"function3 called"
"function3 success"

---

在您的示例中，为什么不直接调用方法呢？是的，这适用于我的用例，只是不确定这是否是正确的方法。对于上下文，我尝试上载一个文件（该函数执行多个异步任务），并尝试在特定任务完成时通知UI。更好的是，我可以有一个回调并从那里传递函数的状态。你能看一下编辑过的问题并帮助我理解它吗？谢谢@shubhamrawal7避免嵌套thens的方法是使用wait-这正是它的设计目的。好的，仔细阅读代码，我明白为什么不能使用wait-因为直到foo返回后才设置处理程序。我总是在调用异步函数之前设置我的处理程序，这可以解决这个特殊问题。如果您需要/想要让foo返回任务对象，那么您就必须使用嵌套的thens，或者至少第一个承诺需要通过

然后

来解决。好的，我明白了。我已经更新了我的代码，使之只有一个

，然后

，并将其余的逻辑作为异步函数，以防有人发现这有帮助。谢谢