如何在JavaScript的Fetch调用中包含URL的ID查询参数？

Question

我有一个网页，在url链接(?id=videoID)中包含视频ID。我的网页的一个例子。

我想在Azure Logic应用的请求中包含相同的videoID作为查询参数。我不太清楚，如何将其包含在我在网页中进行的Fetch调用中（在下面的代码中）（类似于 "语言"）。基本上，在表单提交时，我们如何在fetch调用的URL中包含videoID查询参数？

我试图做的是。

Answer 1

更新了 handleSubmit() 检索到的 videoId 传给 fetchForLanguage():

function handleSubmit(event) {
  event.preventDefault()
  const data = new FormData(event.currentTarget)
  const languages = data.getAll('language')
  console.info('languages selected:', languages)

  let params = new URLSearchParams(document.location.search.substring(1));
  let videoId = params.get("id"); // Video ID

  fetchForLanguages(languages, videoId)
    .then((result) => console.log('got result:', result))
}

更新 fetchForLanguage() 包括 videoId 在POSTed数据中。

function fetchForLanguages(languages, videoId) {
  console.info('starting fetch for', languages)
  return fetch("https://prod-00.westus2.logic.azure.com:443/workflows/366b73ac2f354e2799b87db3c0241adc/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=FdEthGEqPF7UUYf4pB69Q--ZxnZRKngXhFZnVjPxyc4", { // this is my azure  provided endpoint instead
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      languages: languages,
      videoID: videoId
    })
  }).then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
    }
    return response.json()
  })
}

请注意 videoID (大写 "ID")是我假设您要发送给Azure的密钥，基于您的原始请求，不要和 videoId，这是我存储它的Javascript变量的名称。我还假设原始传入参数的名称是 id 但你可以在 handleSubmit().

Answer 2

您可以使用 URL 和 URLSearchParams 类来操作参数。

videoId = new URLSearchParams(window.location.search).get('id')

azure = new URL("https://prod-00.westus2.logic.azure.com:443/workflows/366b73ac2f354e2799b87db3c0241adc/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=FdEthGEqPF7UUYf4pB69Q--ZxnZRKngXhFZnVjPxyc4")

params = azure.searchParams
params.append('videoId', videoId)

azure.searchParams = params
fetch(azure.toString(),
   // Other parameters
)