axios如何传递参数

在使用axios发送请求时，我们可以通过多种方式来传递参数。最简单直接的解决方案是利用axios的config配置项中的params（用于GET请求）和data（用于POST请求）属性。

一、GET请求传递参数

对于GET请求，我们可以使用params选项来添加查询字符串参数。

javascript
// 引入axios库
import axios from 'axios';</p>

<p>// 定义一个函数来发送GET请求并携带参数
async function fetchData() {
  try {
    // 使用params选项传递参数
    const response = await axios.get('https://api.example.com/data', {
      params: {
        key1: 'value1',
        key2: 'value2'
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}</p>

<p>fetchData();

上面代码中，我们将要传递的参数放在params对象里，axios会自动将这些参数转换成查询字符串附加到URL后面。如果需要动态构建参数或者处理复杂场景，可以考虑使用qs库来序列化参数。

二、POST请求传递参数

对于POST请求，通常使用data选项来传递数据。

1. 发送json格式的数据

javascript
// 发送JSON格式的数据
async function postData() {
try {
const response = await axios.post('https://api.example.com/submit', {
field1: 'content1',
field2: 'content2'
}, {
headers: {
'Content-Type': 'application/json' // 指定内容类型为json
}
});
console.log(response.data);
} catch (error) {
console.error('Error posting data:', error);
}
}


这里通过设置headers中的Content-Type为application/json，告诉服务器我们发送的是json格式的数据，并且直接在第二个参数位置传入要发送的对象。

2. 发送表单形式的数据

有时我们需要模拟表单提交，这时可以使用FormData对象。

javascript
// 使用FormData发送表单数据
async function postForm() {
  try {
    const formData = new FormData();
    formData.append('field1', 'content1');
    formData.append('field2', 'content2');</p>

<pre><code>const response = await axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 根据实际情况指定内容类型
  }
});
console.log(response.data);

} catch (error) {
console.error('Error posting form:', error);
}
}

以上就是axios传递参数的一些常用方法，根据实际需求选择合适的方式即可。

(牛站网络)