可以等待然后混合在一个实现中吗？

Question

我想知道 await 和 .then 是否可以在同一个异步函数中使用？ 这是我的功能：

uploadImageToImgur: async function (file) {
return new Promise(function(resolve, reject) {
  const url = 'https://api.imgur.com/3/image',
  reader  = new FileReader();

  if (file) {
    reader.readAsDataURL(file);
  }

  reader.onloadend = async function () {
    let { result } = reader;

    try {
      const request = await fetch(url, {
        method: 'POST',
        headers: {
          "Authorization": 'my auth',
        },
        body: result.replace(/^data:image\/(png|jpg|jpeg|gif);base64,/, "")
      })
      .then((response) => {
        response.json()
        .then(data => {
          resolve(data.data.link)
        })
      });
    } catch (e) {
      reject(e);
    }
  }
});
},

然后我在另一个函数中调用此函数，在其中我使用从 imgur API 获得的链接将对象保存到 indexedDb。

this.uploadImageToImgur(image)
  .then((image) => {
    let db = this.dbOpen.result,
        tx = db.transaction('EventsStore', 'readwrite'),
        store = tx.objectStore('EventsStore');

    event = store.put({ title, location, description, summary, date, time, image });
    //rest of the code
  });

我为什么选择这种方法？因为当我只使用 await 关键字（没有 promise 构造函数）时，数据会在 promise 被解决之前添加到数据库中；/ 什么不是我想要的（可能我在某个地方犯了一个错误.. idk）。

我的问题是，如果上面的代码是正确的方法（它按预期工作）还是我应该重构它？如果是这样，请告诉我如何。这个问题对我来说信息量很大，而不是与特定问题有关。 谢谢。

Answer 1

是的，您可以混合使用 await 和 then 语法 - 它们都适用于承诺 - 但 you shouldn't do so in the same function。

但这不是您代码中的主要问题。问题在于Promise constructor antipattern 在uploadImageToImgur 函数中的使用。不要使用async functions 作为回调。不要在没有 return 的情况下在 then 回调中创建承诺 - 拒绝 response.json() 不会被您的代码捕获。

是的，您将需要Promise 构造函数到promisify 读者，但仅此而已。将它分解到它自己的功能中，这样你就不会陷入诱惑。执行器内部的 if (file) 条件导致您的承诺在某些情况下永远无法解决！

清理完毕：

function readDataUrl(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function() {
      resolve(this.result);
    };
    reader.onerror = reader.onabort = reject; // don't forget this!
    reader.readAsDataURL(file);
  });
}

uploadImageToImgur: async function(file) {
  const url = 'https://api.imgur.com/3/image',
  if (file) {
    const result = await readDataUrl(file);
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        "Authorization": 'my auth',
      },
      body: result.replace(/^data:image\/(png|jpg|jpeg|gif);base64,/, "")
    });
    const data = await response.json();
    return data.data.link;
  }
}