对象迭代和回调中的异步/等待函数

Question

我的对象如下

let obj = [
  {
    "id": "hlahl2c",
    "name": "Media(video) 1",
    "type": "video",
    "placement": {
      "x": 0,
      "y": 0,
      "width": 617.2537313432834,
      "height": 558.7462686567162,
      "rotation": 0,
      "scaleX": 1,
      "scaleY": 1
    },
    "timeFrame": {
      "start": 0,
      "end": 2001.9999999999998
    },
    "properties": {
      "elementId": "video-hlahl2c",
      "src": "blob:http://localhost:3000/68d041d2-0eef-4bf1-ae3b-fd25af555fcd",
      "effect": {
        "type": "none"
      },
      "imageObject": {
        "type": "coverVideo",
        "version": "5.3.0",
        "originX": "left",
        "originY": "top",
        "left": 0,
        "top": 0,
        "width": 617.25,
        "height": 558.75,
        "fill": "rgb(0,0,0)",
        "stroke": null,
        "strokeWidth": 0,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "cropX": 0,
        "cropY": 0,
        "src": "blob:http://localhost:3000/68d041d2-0eef-4bf1-ae3b-fd25af555fcd",
        "crossOrigin": null,
        "filters": []
      }
    },
    "fabricObject": {
      "type": "coverVideo",
      "version": "5.3.0",
      "originX": "left",
      "originY": "top",
      "left": 0,
      "top": 0,
      "width": 617.25,
      "height": 558.75,
      "fill": "rgb(0,0,0)",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 1,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "cropX": 0,
      "cropY": 0,
      "src": "blob:http://localhost:3000/68d041d2-0eef-4bf1-ae3b-fd25af555fcd",
      "crossOrigin": null,
      "filters": []
    }
  }
]

正如你所看到的 src 在 bloburl 中，所以在发送到服务器之前我喜欢将所有源转换为 base64 strng ，为此我需要一个 async/await 函数将该 src 从 blob url 转换为 base64。

首先我使用一个函数来深度搜索所有 src 键，然后计划使用回调函数来转换该 bloburl ，但是该回调函数需要是 async/await ，但是函数没有按预期工作，为了进行深度搜索，我使用了以下内容功能

const deepReplace = (obj, keyName, replacer) => {
    for (const key in obj) {
        if (key === keyName) {
            obj[key] = replacer(obj[key]);
        } else if (Array.isArray(obj[key])) {
            (obj[key] ).forEach(member => deepReplace(member, keyName, replacer));
        } else if (typeof obj[key] === "object") {
            deepReplace(obj[key], keyName, replacer);
        }
    }
};

对于回调，这是以下虚拟函数

replace_value_func=(value)=>{
  return value+" someword appended"
}

当我调用

deepReplace(obj,'src',replace_value_func)

时，只要 Replace_value_func 同步，一切都会按预期进行，但我需要异步使用 Replace_value_func 因为通过该函数我需要将 bloburl 转换为 base64 ，但是当我使用异步 Replace_value_func 时，它只是返回空目的 。如何在循环内使用异步函数作为回调函数？

使用异步函数根据键搜索和替换嵌套对象值

当我使用 Async/Await 时，我正在使用以下

const deepReplace = async(obj, keyName, replacer) => {
    for (const key in obj) {
        if (key === keyName) {
            obj[key] = await replacer(obj[key]);
        } else if (Array.isArray(obj[key])) {
            (obj[key] ).forEach(member => deepReplace(member, keyName, replacer));
        } else if (typeof obj[key] === "object") {
            deepReplace(obj[key], keyName, replacer);
        }
    }
};

replace_value_func_with_promise = (value)=>{
  return new Promise(resolve => {
     res="something"+value
   resolve(res)
    });      
}

deepReplace(Obj,'src',replace_value_func_with_promise)

但是上面的代码不起作用

Answer 1

1. 将

   deepReplace

   声明为异步函数。
2. 如果没有特殊的预防措施，请勿在异步函数中使用

   .forEach

   。请改用标准

   for

   、

   for...of

   或

   for.. in

   （如果适用）循环。

3. await

   潜在的异步结果
4. 以

   deepReplacer

   为前缀调用

   await

   ，或在同步调用代码中返回的 Promise 上使用

   .then

   和

   .catch

   子句。

请注意，您永远无法在从

async

函数返回时立即获得异步操作的结果 - 它们返回一个值的承诺，而不是稍后获得的值。