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

Question

我有一个执行各种等待任务的异步函数。当功能状态发生变化或其中一项任务完成时，我试图在 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 中的自定义事件，但不确定如何使用它们。或者也许在 React 中有另一种方法可以做到这一点。

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

编辑

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);
  });
});

我试图实现类似上面代码的东西，取自 the firebase documentation on uploading files

这是我到目前为止的进展：

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？哪种方法更好，什么时候使用？ EDIT - 删除了嵌套的 then 子句并替换为 then 和 await

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

Answer 1

我假设您有理由不在每个异步步骤完成后简单地调用一些命名方法，即，您希望能够为每个事件插入不同的处理程序。这是解决它的一种方法 - 很难从提供的小上下文中判断它是否是最好的：

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);

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

Answer 2

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

以下链接承诺的示例

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"

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

Custom status change events in Javascript

javascript

custom-events

async-await

reactjs