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

我试图实现类似上述代码的东西，取自关于上传文件的firebase文档

这是我到目前为止得到的地方：

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？哪种方法更好，什么时候更好？编辑- 删除嵌套then子句并替换为thenandawait

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

标签： javascriptreactjsasync-awaitcustom-events

Answer 1

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

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

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"