Vue3 axios get 参数问题

该代码段展示了一个WebAPI控制器方法,用于根据ShelvesNo获取Shelves1Model的ControllerIP。在Vue3应用中,使用Axios进行GET请求来调用这个API,处理响应并返回数据。

 WEBAPI controller代码

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        [HttpGet(Name = "GetShelvesControllerIP")]
        public string GetShelvesControllerIP(string ShelvesNo)
        {
            List<Shelves1Model> shelves1Model = new List<Shelves1Model>();

            shelves1Model = shouhangdb.Shelves1.GetShelves(ShelvesNo);
            if (shelves1Model.Count > 0)
            {
                return shelves1Model.FirstOrDefault().ControllerIP;
            }
            else
            {
                return "--";
            } 
        }

 vue3 axios 代码

let SetShelvesNo = async () => {

	//let pm1 = { ShelvesNo: ShelvesNo.value }
	//console.log(pm1);
	let url = global_const.WEBAPI + `System/GetShelvesControllerIP`
	let s = await axios.get(url, { params: {ShelvesNo: ShelvesNo.value } })
		.then(function (response) {
			console.log('SetShelvesNo ok' + ShelvesNo);
			console.log(response);

			return response.data;
		})
		.catch(function (error) {
			console.log(error);
		});
	console.log("end SetShelvesNo " + s)
	return s;
}

Vue 3 中使用 Axios 进行 GET 请求时,可采用以下几种传参方法: ### 直接拼接参数到 URL 将参数直接拼接到 URL 中,用 `?` 和 `&` 连接。示例代码如下: ```javascript import axios from &#39;axios&#39;; axios.get(&#39;/user?id=12345&name=user&#39;) .then(function (res) { console.log(res); }) .catch(function (err) { console.log(err); }); ``` 这种方式适合参数较少的情况,直观且简单,但当参数较多时,URL 会变得冗长,不易维护 [^3]。 ### 使用 `params` 对象 通过 `params` 对象传递参数Axios 会自动将其转换为查询字符串并附加到 URL 上。示例代码如下: ```javascript import axios from &#39;axios&#39;; axios.get(&#39;url&#39;, { params: { id: &#39;接口配置参数(相当于url?id=xxxx)&#39;, }, }) .then((res) => { console.log(res); // 处理成功的函数 }) .catch((error) => { console.log(error); // 错误处理 }); ``` 这种方式代码更清晰,适合参数较多的情况,便于管理和维护 [^2]。 ### 处理数组参数(使用 `paramsSerializer`) 若参数包含数组,可使用 `paramsSerializer` 来自定义参数序列化方式。示例代码如下: ```javascript import axios from &#39;axios&#39;; import qs from &#39;qs&#39;; const params = { ids: [1, 2, 3] }; axios.get(&#39;url&#39;, { params: params, paramsSerializer: function(params) { return qs.stringify(params, { arrayFormat: "repeat" }); }, }) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); ``` 此方法可确保数组参数以正确的格式传递给服务器 [^5]。 ### Axios 版本差异 在 Axios 0.27.0 版本之前,若在 GET 请求中包含 `data` 属性,Axios 会将这些数据作为查询字符串附加到 URL 上。但从 0.27.0 版本开始,AxiosGET 请求和 `data` 属性的处理有了变化 [^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值