uniapp中使用axios 将post方法传参改成get传参方式

本文介绍了如何在uniapp中使用axios进行POST请求,并演示了如何将其转换为GET请求,同时展示了axios的封装和在Vue中使用的方法。重点讲解了不同请求方式下参数传递的差异和axios配置文件的创建。

安装axios

npm install axios

封装axios请求 适配uniapp语法

// service.js文件

import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
    withCredentials: true,
    crossDomain: true,
    baseURL:'xxxxxxxxxxxxxxx', //项目调用的后端地址
    timeout: 6000
})

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
    config => {
        // 给请求头添加token
		config.headers["token"] = 'xxxxxxxxxxxxxxxxxx'
        return config;
    },
    error => {
        console.log(error); // for debug
        return Promise.reject(error);
    }
);

//配置成功后的拦截器
service.interceptors.response.use(res => {
    if (res.data.status== 200) {
        return res.data
    } else {
        return Promise.reject(res.data.msg);
    }
}, error => {
    return Promise.reject(error)
})


axios.defaults.adapter = function(config) { //自己定义个适配器,用来适配uniapp的语法
    return new Promise((resolve, reject) => {
        console.log(config)
        var settle = require('axios/lib/core/settle');
        var buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                console.log("执行完成:",response)
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config: config
                };
                settle(resolve, reject, response);
            }
        })
    })
}
export default service

main.js文件中引入

import Vue from 'vue'
import axios from './utils/axios0.js'


Vue.config.productionTip = false

Vue.prototype.$axios = axios

methods中使用

axios会自动将 params 对象里面的数据拼接到 url 后面

	submit(params) {
	  Vue.prototype.$axios({
	    url: '/actTask/pass',
	    method:'post' ,
		header: http.header, //设置请求头
	    params  //axios会自动将 params 对象里面的数据拼接到 url 后面
	  }).then(res=>{
	  	console.log(res,'成功返回值')
	  }).catch(err=>{
		console.log(err,'失败返回值')
	  })
	}

传递参数区别

post传参

post转换成get方式传参

在这里插入图片描述

<think>首先,用户的问题是:“我想确认在使用AxiosGET方法传参是否应该使用params。请问AxiosGET请求传参是否应该使用params参数?”根据系统级指令,我必须:-使用中文回答。-结构清晰,帮助用户逐步解决问题。-回答真实可靠。-在回答中引用的段落末尾自然地添加引用标识,例如[^1]。-生成相关问题。-所有行内数学表达式使用$...$格式,但这里可能不涉及数学表达式,所以注意。-独立公式使用$$...$$,但同样可能不涉及。-LaTeX语法正确。参考提供的引用:-引用[1]:展示了使用Axios发起GET请求并传递参数使用params对象。-引用[2]:解释了GET请求参数通过查询参数传递,使用params或直接URL。-引用[3]:说明GET请求数据通过查询参数传递,而不是请求体。-引用[4]:讨论了GET请求传参问题,使用paramsSerializer处理序列化。-引用[5]:警告在GET请求使用data属性可能导致问题,建议使用params。关键点:-AxiosGET请求应该使用params参数来传递查询参数。-使用data属性在GET请求中可能导致错误或不期望的行为。-参数会被序列化并附加到URL上。我的回答结构:1.**明确回答用户问题**:直接确认是否应该使用params。2.**解释原因**:基于HTTP规范和Axios的设计。3.**提供示例**:参考引用中的代码示例。4.**注意事项**:提到序列化问题等。5.**生成相关问题**:在末尾添加相关问题。最终回答:-开头确认:是的,在使用AxiosGET方法时,应该使用params参数来传递参数。-理由:GET请求参数应通过查询字符串传递,而不是请求体。-示例代码:展示一个简单示例。-引用:在适当地方添加引用标识。-相关问题:生成3-5个相关问题。相关问题生成:基于主题:1.如何处理GET请求中的数组参数?2.Axios中paramsSerializer的作用是什么?3.为什么在GET请求使用data属性可能导致问题?4.如何自定义查询参数的序列化?5.AxiosGET请求与其他请求方法的区别?确保回答真实可靠:基于引用和标准知识。</think>### Axios GET 请求传参的正确方式 是的,在使用 AxiosGET 方法时,**应该使用 `params` 参数来传递参数**。这是 Axios 的标准做法,也是 HTTP 规范的要求。下面我将逐步解释原因、正确用法和注意事项,确保回答清晰可靠。 #### 1. **为什么必须使用 `params` 参数?** - **HTTP 规范要求**:GET 请求参数必须通过 URL 的查询字符串(query string)传递,而不是请求体(request body)。`params` 参数会自动将参数序列化并附加到 URL 上,例如:`?key1=value1&key2=value2`[^3]。 - **避免错误**:在 GET 请求使用 `data` 属性可能导致问题,因为 Axios 会尝试将 `data` 序列化为 FormData(适用于 POST 请求),但 GET 请求不支持请求体传输参数。这可能导致服务器无法解析参数或引发异常[^5]。 - **一致性**:Axios 的设计中,`params` 专为 GET 请求设计,确保参数正确编码和传递,而 `data` 用于 POST、PUT 等方法请求体[^1]。 #### 2. **正确使用 `params` 的示例** 参考引用中的代码,这里是一个完整的 Axios GET 请求示例: ```javascript const axios = require('axios'); // 定义 URL 和参数对象 const url = 'https://example.com/api/data'; const params = { param1: 'value1', param2: 'value2', // 支持数组或复杂对象,但需注意序列化 }; // 发起 GET 请求使用 params 传递参数 axios.get(url, { params: params // 关键:参数对象赋值给 params }) .then(response => { console.log('响应数据:', response.data); }) .catch(error => { console.error('请求错误:', error); }); ``` - **结果**:参数会被自动序列化为 URL 查询字符串,例如 `https://example.com/api/data?param1=value1&param2=value2`[^1]。 - **为什么有效**:Axios 内部使用 `URLSearchParams` 或 `qs` 库(可选)处理序列化,确保参数格式正确[^4]。 #### 3. **注意事项和常见问题** - **序列化特殊参数**:如果参数包含数组或嵌套对象(如 `{ ids: [1, 2, 3] }`),默认序列化可能生成 `ids=1,2,3`。如需自定义格式(例如 `ids=1&ids=2`),可使用 `paramsSerializer`: ```javascript axios.get(url, { params: params, paramsSerializer: function(params) { return qs.stringify(params, { arrayFormat: 'repeat' }); // 使用 qs 库处理 } }); ``` 这需要安装 `qs` 库(`npm install qs`)[^4]。 - **参数名一致性**:服务器端接收时,参数名应与 `params` 对象中的键名匹配。如果名称不一致,需在服务器端使用注解(如 Spring Boot 的 `@RequestParam`)[^2]。 - **避免 `data` 属性**:在 Axios 0.27.0 及以上版本,GET 请求使用 `data` 会触发 `toFormData` 序列化,可能导致 URL 污染或错误响应[^5]。始终优先使用 `params`。 - **性能影响**:GET 请求参数暴露在 URL 中,不适合传输敏感数据(如密码)。此时应改用 POST 请求[^3]。 #### 总结 在 Axios GET 请求中,使用 `params` 参数是正确且安全的方式,符合 HTTP 标准和库设计。避免使用 `data` 属性,除非处理特定边缘情况(需自定义序列化)。如有复杂需求,参考 Axios 文档或社区解决方案。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值