axios的params传参 string

和 object 都可以，根据需要选择合适的方式传参。

如果使用 string 传参，可以在请求的 URL 后面拼接查询字符串，例如：

axios.get('/api/user?id=123&name=John')

这种方式的好处是简单易懂，直接在 URL 中看到传递的参数，但是如果参数较多，拼接起来比较麻烦。

如果使用 object 传参，可以直接将参数作为一个对象传递给 params 属性，例如：

axios.get('/api/user', { params: { id: 123, name: 'John' }})

这种方式的好处是传递的参数更清晰，而且不需要手动拼接查询字符串，但是需要使用对象的方式传递参数。

相关问题

axios get 传参 json

使用axios进行GET请求并传递JSON参数，可以使用以下方式：

import axios from 'axios';

// 创建一个JSON对象作为参数
const params = {
  key1: 'value1',
  key2: 'value2'
};

// 将参数对象转换为JSON字符串
const jsonData = JSON.stringify(params);

// 发送GET请求，并将参数作为query string传递
axios.get('https://example.com/api', {
  params: {
    data: jsonData
  }
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});

在上面的示例中，我们首先创建一个JSON对象作为参数，然后使用`JSON.stringify()`将其转换为JSON字符串。接下来，在axios的GET请求中，我们使用`params`选项将参数作为query string传递，将参数名设置为`data`，值为之前转换的JSON字符串。最后，通过`.then()`处理成功的响应和`.catch()`处理错误。

请注意，这种方式会将JSON参数作为query string的一部分发送到服务器。如果服务器端需要通过请求主体（request body）接收JSON参数，请改用POST请求或其他适当的HTTP方法。

使用vue3写一个表格传参示例，使用axios传参

好的，下面是一个使用 Vue 3 和 Axios 发起 HTTP 请求来获取表格数据的示例：

<template>
  <div>
    <h2>{{ tableName }}</h2>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td v-for="column in columns" :key="column">{{ row[column] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  props: {
    tableName: {
      type: String,
      required: true
    },
    headers: {
      type: Array,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      rows: []
    };
  },
  computed: {
    columns() {
      // 获取所有列名
      return Object.keys(this.rows[0] || {});
    }
  },
  async created() {
    try {
      const response = await axios.get(this.url, { params: this.params });
      this.rows = response.data;
    } catch (error) {
      console.error(error);
    }
  }
};
</script>

在父组件中，可以这样使用这个表格组件：

<template>
  <div>
    <my-table
      :table-name="'用户列表'"
      :headers="['ID', '姓名', '年龄']"
      url="/api/users"
      :params="{ page: 1, pageSize: 10 }"
    />
  </div>
</template>

<script>
import MyTable from "@/components/MyTable.vue";

export default {
  components: {
    MyTable
  }
};
</script>

这样就可以在页面中显示一个名为“用户列表”的表格，表格的表头为“ID”、“姓名”、“年龄”，表格的数据来自服务器端的 `/api/users` 接口，请求参数为 `{ page: 1, pageSize: 10 }`。