JavaScript将回调函数变成一个promise

255 阅读1分钟

JavaScript中的许多实用程序都可以作为接受回调的函数来使用。把这些变成承诺有多容易呢?

事实证明,在个案的基础上这样做是非常简单的。让我们看看其中一个比较简单的内置函数,它接受一个回调函数:setTimeout 。通常情况下,setTimeout 看起来像这样。

const callback = function () {
  console.log('Just got called!');
};

setTimeout(() => {
  callback();
}, 1000);

(注意:我可以把它写成setTimeout(callback, 1000) ,但认为较长的形式更有利于解释)。

而1000毫秒后我们看到的是记录。

Just got called!

让我们现在就把这个变成一个承诺。我们可以用promise对象来做这件事。

function promiseTimeout(timeout) {
  return new Promise(function (res) {
    setTimeout(function () {
      res();
    }, timeout);
  });
}

而现在我们使用它。

promiseTimeout(1000).then(function () {
  console.log('Just got called');
});

当然,更现实的情况是,你的回调可能出现错误。一个典型的回调流程可能是这样的。

someAsyncFunction(data, function (error, response) {
  if (error) {
    // Handle error here
  }
  // Handle response here
});

我们也可以把它变成一个承诺!Promise 对象的构造函数需要一个处理拒绝的第二个参数。

function someAsyncPromise(data) {
  return new Promise(function (res, rej) {
    someAsyncFunction(data, function (error, response) {
      if (error) {
        rej(err);
        return; // Make sure to return here or `res` will be called too!
      }
      res(response);
    });
  });
}

someAsyncPromise(myData)
  .then(function (response) {
    // Handle response here
  })
  .catch(function (error) {
    // Handle error here
  });

当然,由于我们的函数返回一个Promise,我们可以使用async await!

async function myFunc() {
  try {
    const response = await someAsyncPromise(myData);
  } catch (error) {
    // Handle error here
  }
}

就这样,我们拥有了它。去吧,把你的回调转换为承诺吧