React中提取URL参数保存为变量/状态用于fetch请求的方法

直接使用浏览器原生提供的URL对象解析地址即可，不需要手写复杂的正则匹配，逻辑稳定且写法简洁：

• 基础提取逻辑

// 初始化URL实例，传入待解析的目标地址
const parseUrl = new URL('http://localhost:3000/transaction?transactionId=72U8ALPE')
// 通过searchParams.get()方法读取指定参数的值
const transactionId = parseUrl.searchParams.get('transactionId')
// 拿到的transactionId就是你需要的72U8ALPE

• 如果要解析的是当前打开页面的URL，不需要手动传入完整地址，直接读取window.location即可：

const parseUrl = new URL(window.location.href)
const transactionId = parseUrl.searchParams.get('transactionId')

拿到参数值之后，不管是存在普通变量还是组件状态里都可以，后续拼接fetch请求地址直接用模板字符串嵌入就行：

// 拼接后的请求地址示例
const requestUrl = `https://google.com/${transactionId}`
// 直接传入fetch调用即可
fetch(requestUrl).then(res => res.json()).then(data => {
  // 你的响应处理逻辑
})

如果是在React/Vue这类前端框架中需要存为组件状态，只需要在组件初始化的生命周期里执行参数提取逻辑，再把值赋值给状态变量即可，以React为例：

import { useState, useEffect } from 'react'

function TransactionPage() {
  const [transactionId, setTransactionId] = useState('')

  // 组件挂载时提取参数
  useEffect(() => {
    const parseUrl = new URL(window.location.href)
    const id = parseUrl.searchParams.get('transactionId')
    if (id) setTransactionId(id)
  }, [])

  // 后续请求直接使用状态里的transactionId即可
  const loadDetail = async () => {
    if (!transactionId) return
    const res = await fetch(`https://google.com/${transactionId}`)
    // 处理后续逻辑
  }
}

兜底兼容方案：如果需要兼容IE这类不支持URL API的老旧浏览器，可以用正则匹配做降级处理

function getQueryParam(url, paramKey) {
  const reg = new RegExp(`[?&]${paramKey}=([^&]+)`)
  const matchResult = url.match(reg)
  return matchResult ? decodeURIComponent(matchResult[1]) : null
}
// 用法
const transactionId = getQueryParam('http://localhost:3000/transaction?transactionId=72U8ALPE', 'transactionId')

内容的提问来源于stack exchange，提问作者Manasseh Codes