转换为本机 javascript 返回解构错误 [重复]答案

【问题标题】：Conversion to native javascript returns destructuring error [duplicate]转换为本机 javascript 返回解构错误 [重复]
【发布时间】：2022-01-21 20:03:55
【问题描述】：

以下脚本是将 TypeScript 转换为原生 Javascript，以便它可以内联运行。
它从属于通过importmaps加载的zxing库

    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    [...]
    "@zxing/library": "https://ga.jspm.io/npm:@zxing/library@0.19.1/esm/index.js",
    "ts-custom-error": "https://ga.jspm.io/npm:ts-custom-error@3.2.0/dist/custom-error.js",
    [...]
}

它返回错误：Uncaught SyntaxError: Invalid destructuring assignment target
对于指示：
url: "http://localhost:3000/articlephotos/barcode_section_update",

的行

进行了一项额外的编辑以将 jQuery 函数转换为独立于 jQuery 运行：
$.ajax({。给function ajax({

这个脚本有什么错误？

window.addEventListener("turbo:load", function() {
  let selectedDeviceId
  const codeReader = new ZXing.BrowserMultiFormatReader()
  console.log("ZXing code reader initialized")
  codeReader
    .getVideoInputDevices()
    .then(videoInputDevices => {
      const sourceSelect = document.getElementById("sourceSelect")
      selectedDeviceId = videoInputDevices[0].deviceId
      if (videoInputDevices.length >= 1) {
        videoInputDevices.forEach(element => {
          const sourceOption = document.createElement("option")
          sourceOption.text = element.label
          sourceOption.value = element.deviceId
          sourceSelect.appendChild(sourceOption)
        })

        sourceSelect.onchange = () => {
          selectedDeviceId = sourceSelect.value
        }

        const sourceSelectPanel = document.getElementById("sourceSelectPanel")
        sourceSelectPanel.style.display = "block"
      }

      document.getElementById("startButton").addEventListener("click", () => {
        codeReader.decodeFromVideoDevice(
          selectedDeviceId,
          "video",
          (result, err) => {
            if (result) {
              console.log(result)
              document.getElementById("result").textContent = result.text
              let formData = new FormData()
              let CodeParams = {
                code_data: result.text
              }
              formData.append("code_json_data", JSON.stringify(CodeParams))
              function ajax({
                url: "http://localhost:3000/articlephotos/barcode_section_update",
                type: "post",
                data: formData,
                processData: false,
                contentType: false
              })
            }
            if (err && !(err instanceof ZXing.NotFoundException)) {
              console.error(err)
              document.getElementById("result").textContent = err
            }
          }
        )
        console.log(
          `Started continous decode from camera with id ${selectedDeviceId}`
        )
      })

      document.getElementById("resetButton").addEventListener("click", () => {
        codeReader.reset()
        document.getElementById("result").textContent = ""
        console.log("Reset.")
      })
    })
    .catch(err => {
      console.error(err)
    })
})

【问题讨论】：

function ajax({ url: "...", ... }) 应该做什么？ o.O
它旨在将扫描结果作为 XHR 发布发送
现在是语法错误...
鉴于 jQuery 的“不依赖”，我假设了很多。这就是我提出这个问题的原因。
@PeterKrebs 是的，该链接可能会回答我的问题；我将调查 axios，因为我不知道（我的 JS - 显然 - 非常有限）。 fetch()。当我打算发帖时，API 总是让我感到好奇

标签： javascript zxing

【解决方案1】：

在此处发布答案以了解谁来解决它。

@PeterKrebs 提出的使用axios 的建议是中肯的。但是请注意一些语法精度，因为following the links 可能会在需要this.axios.post(...) 时使用axios.post。

脚本最终与 jQuery AJAX 表示法非常相似：

window.addEventListener("turbo:load", function() {
  let selectedDeviceId
  const codeReader = new ZXing.BrowserMultiFormatReader()
  console.log("ZXing code reader initialized")
  codeReader
    .getVideoInputDevices()
    .then(videoInputDevices => {
      const sourceSelect = document.getElementById("sourceSelect")
      selectedDeviceId = videoInputDevices[0].deviceId
      if (videoInputDevices.length >= 1) {
        videoInputDevices.forEach(element => {
          const sourceOption = document.createElement("option")
          sourceOption.text = element.label
          sourceOption.value = element.deviceId
          sourceSelect.appendChild(sourceOption)
        })

        sourceSelect.onchange = () => {
          selectedDeviceId = sourceSelect.value
        }

        const sourceSelectPanel = document.getElementById("sourceSelectPanel")
        sourceSelectPanel.style.display = "block"
      }

      document.getElementById("startButton").addEventListener("click", () => {
        codeReader.decodeFromVideoDevice(
          selectedDeviceId,
          "video",
          (result, err) => {
            if (result) {
              console.log(result)
              document.getElementById("result").textContent = result.text
              let formData = new FormData()
              let CodeParams = {
                code_data: result.text
              }
              formData.append("code_json_data", JSON.stringify(CodeParams))
              this.axios.post('<%= barcode_section_update_articlephotos_url %>', {
                data: formData,
                processData: false,
                contentType: false
              })
            }
            if (err && !(err instanceof ZXing.NotFoundException)) {
              console.error(err)
              document.getElementById("result").textContent = err
            }
          }
        )
        console.log(
          `Started continous decode from camera with id ${selectedDeviceId}`
        )
      })

      document.getElementById("resetButton").addEventListener("click", () => {
        codeReader.reset()
        document.getElementById("result").textContent = ""
        console.log("Reset.")
      })
    })
    .catch(err => {
      console.error(err)
    })
})

【讨论】：