vue3 + axios params传参 GET请求URL地址拼接问题

Question

vue3 + axios params传参 请求URL地址拼接问题
swagger 后端获取 数据库 数据成功

---

前端 代码如下：

const params = ref({
  name: '',
  page: 1,
  pagesize: 10
})

const getEmpList = async () => {
  // const res = await empGetPageService(params.value)
  console.log(request.get('http://localhost:7777/api/admin/empaccount/emp/page?page=1&pageSize=5'))
  console.log(request.get('/admin/empaccount/emp/page', { params: params }))
  // empList.value = res.data.data.records
  // total.value = res.data.data.total
}

---

Swagger 接口（图片）：

---

期望的：

console.log(request.get('http://localhost:7777/api/admin/empaccount/emp/page?page=1&pageSize=5'))

---

异常的：

console.log(request.get('/admin/empaccount/emp/page', { params: params }))

---

page 后拼接不应该是像 ” 期望的 “ 那样吗？ 这个 ” 异常的 “ 是怎么回事？

Answer 1

引自免费微信小程序：皆我百晓生

在Vue3中，使用axios进行请求时，参数传递通常是通过params对象完成的。如果你遇到URL地址拼接的问题，可能是由于参数处理不当导致的。这里有一个例子来展示如何正确地将参数添加到URL中。

首先，确保你已经安装了axios。如果没有，可以使用npm或yarn安装：

npm install axios
# 或者
yarn add axios

然后，在你的Vue组件中，你可以这样使用axios发送GET请求，并且正确地拼接URL参数：

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const page = ref(1); // 假设这是你要动态改变的页数

    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data', {
          params: {
            page: page.value, // 使用ref的值作为参数
          },
        });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      page,
      fetchData,
    };
  },
};
</script>

<template>
  <button @click="fetchData">Fetch Data</button>
  <!-- 可能你还想显示当前页数 -->
  <p>Current Page: {{ page }}</p>
</template>

在这个例子中，我们创建了一个名为page的reactive变量（使用ref），它用于存储当前的页数。当调用fetchData函数时，我们将这个page.value作为参数传递给axios的GET请求。这样，每次页面更改时，都会正确地更新请求中的page参数。

如果你仍然遇到了问题，可能是因为其他部分的代码影响到了参数的传递。请检查是否有其他地方修改了page变量，或者是否有错误地在URL字符串中手动尝试拼接参数。确保你的axios配置没有问题，以及你的服务器端接受参数的方式与你发送的参数格式一致。如果有任何具体错误信息，请提供以便我能更准确地帮你定位问题。