get拼接参数两种方式

本文探讨了两种使用GET方法传递参数的方式。第一种是在URL路径中直接拼接参数,如/sc/payReceipt/56。第二种是通过params对象将参数放在URL查询字符串中,如/sc/subscribePuwarehouse/getOne?id=13。这两种方法各有应用场景,理解其差异对于前端开发至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Get两种传参
一:/sc/payReceipt/56

export function startEnd(id) {
    // 查看详细内容
    return request({
        url: '/sc/payReceipt/' + id,
        method: 'get',
    })
}

二:sc/subscribePuwarehouse/getOne?id=13

export function startEnd(data) {
    // 查看详细内容
    return request({
        url: '/sc/subscribePuwarehouse/getOne',
        method: 'get',
        params: {
            id: data
        }
    })
}
<think>好的,用户的问题是关于在React中使用GET请求携带参数方法,具体想了解axios和fetch的实现示例。我需要先回忆一下相关知识,然后结合提供的引用内容,确保回答准确。 首先,用户提到了两种方法:axios和fetch。我需要分别说明这两种方式如何添加参数。对于GET请求,参数通常是通过URL的查询字符串传递的,或者在配置中指定params(对于axios)。 对于axios的GET请求,我记得有两种方式:一种是直接在URL后面拼接参数,另一种是使用params对象,这样axios会自动将其转换为查询字符串。需要确认是否正确,比如在引用[3]中提到了axios的简单使用,但未具体说明参数传递,可能需要结合通用知识来回答。 然后是fetch,用户需要知道如何拼接参数。引用[2]中提到在create-react-app中请求本地JSON文件需要放在public下,但这里的问题是关于参数拼接。通常,fetch需要手动将参数添加到URL,或者使用URLSearchParams对象。可能需要给出这两种方法的示例。 接下来,检查是否有其他需要注意的地方,比如编码问题。手动拼接时,空格等特殊字符需要处理,而URLSearchParams会自动处理,这点需要提醒用户。 另外,引用[1]提到在React中使用Fetch和Axios的重要性,所以回答时需要结合这点,强调这两种方法的适用性。引用[3]中的示例代码可能没有直接展示参数传递,但可以引用作为axios使用的上下文。 最后,要确保回答结构清晰,分点说明,并给出代码示例。同时,用户可能需要知道哪种方法更推荐,比如axios的params更简洁,而fetch需要手动处理。可能还需要提到兼容性,但现代浏览器基本都支持URLSearchParams。 现在组织回答结构:先介绍axios的两种方法,再介绍fetch的两种方法,然后对比推荐,最后总结。需要确保代码正确,比如在axios中使用params是否正确,以及模板字符串的使用是否正确。同时,注意使用中文,正确格式化代码块,并添加相关引用标记。</think>在 React 中通过 GET 请求携带参数,可以通过以下两种主流方式实现(分别使用 Axios 和 Fetch): --- ### 一、使用 Axios 发送 GET 请求 #### 方法 1:URL 直接拼接参数 ```javascript axios.get(`https://api.example.com/data?name=${name}&age=${age}`) .then(response => console.log(response.data)) .catch(error => console.error(error)); ``` #### 方法 2:通过 `params` 对象传递(推荐) ```javascript axios.get('https://api.example.com/data', { params: { // axios 会自动将对象转为 URL 查询参数 name: 'John', age: 25, timestamp: Date.now() } }) .then(response => console.log(response.data)); ``` --- ### 二、使用 Fetch 发送 GET 请求 #### 方法 1:手动拼接 URL ```javascript const query = `name=${encodeURIComponent(name)}&age=${age}`; fetch(`https://api.example.com/data?${query}`) .then(response => response.json()) .then(data => console.log(data)); ``` #### 方法 2:通过 URLSearchParams 对象 ```javascript const params = new URLSearchParams({ name: 'John', age: 25, isActive: true }); fetch(`https://api.example.com/data?${params}`) .then(response => response.json()) .then(data => console.log(data)); ``` --- ### 对比说明 1. **Axios** 的 `params` 配置会自动处理参数编码和拼接,更简洁安全[^3] 2. **Fetch** 需要手动处理参数编码,建议使用 `URLSearchParams` 或 `encodeURIComponent` 避免特殊字符问题[^2] 3. 参数值为 `null`/`undefined` 时,Axios 会过滤该参数,而 Fetch 需要自行处理 --- ### 最佳实践 - 推荐使用 Axios 的 `params` 方式,可避免手动拼接错误 - 对复杂参数结构,可用 `qs` 库处理嵌套对象 - 本地开发时注意将测试数据文件放在 `public` 目录下(如 mock API 场景)[^2] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值