axios举行get跟post哀求的时候，参数封装的不同

在 axios 中，GET 和 POST 哀求的参数通报方式有所不同。详细来说：

• GET 哀求的参数：通常是通过 URL 的查询字符串来通报参数。
  
• POST 哀求的参数：通常是通过哀求体（body）来通报数据。
  

以下是怎样在 axios 中编写 GET 和 POST 哀求并通报参数的示例：
1. GET 哀求参数

在 GET 哀求中，参数是通过 URL 查询字符串来通报的，axios 会自动将参数格式化为 URL 查询字符串。
示例：

1. // 使用 GET 请求
2. axios.get('https://api.example.com/data', {
3.   params: {
4.     id: 123,
5.     name: 'John Doe',
6.   }
7. })
8.   .then(response => {
9.     console.log('GET 请求成功', response.data);
10.   })
11.   .catch(error => {
12.     console.error('GET 请求失败', error);
13.   });

复制代码

解析：

• axios.get 中的第二个参数是一个包罗 params 的设置对象。
  
• params 对象中的键值对会被自动转换成查询字符串（例如 id=123&name=John%20Doe），并附加到 URL 上。
  

最终哀求的 URL 会是：
https://api.example.com/data?id=123&name=John%20Doe
2. POST 哀求参数

在 POST 哀求中，参数是通过哀求体（body）来通报的。可以通过 data 字段来通报。
示例：

1. // 使用 POST 请求
2. axios.post('https://api.example.com/data', {
3.   id: 123,
4.   name: 'John Doe',
5. })
6.   .then(response => {
7.     console.log('POST 请求成功', response.data);
8.   })
9.   .catch(error => {
10.     console.error('POST 请求失败', error);
11.   });

复制代码

解析：

• axios.post 的第二个参数是要发送的哀求体（数据），它将作为哀求的主体通报到服务器。
  
• 在这个例子中，{ id: 123, name: 'John Doe' } 会作为 JSON 数据放到哀求体中发送。
  

3. 带 headers 的 GET 和 POST 哀求

假如你须要通报一些额外的头信息（例如 Authorization、Content-Type 等），可以在 axios 的设置对象中添加 headers 字段。
示例：带 headers 的 GET 哀求

1. axios.get('https://api.example.com/data', {
2.   params: {
3.     id: 123,
4.     name: 'John Doe',
5.   },
6.   headers: {
7.     'Authorization': 'Bearer your-token',
8.     'Custom-Header': 'CustomHeaderValue',
9.   }
10. })
11.   .then(response => {
12.     console.log('GET 请求成功', response.data);
13.   })
14.   .catch(error => {
15.     console.error('GET 请求失败', error);
16.   });

复制代码

示例：带 headers 的 POST 哀求

1. axios.post('https://api.example.com/data', {
2.   id: 123,
3.   name: 'John Doe',
4. }, {
5.   headers: {
6.     'Authorization': 'Bearer your-token',
7.     'Content-Type': 'application/json',
8.   }
9. })
10.   .then(response => {
11.     console.log('POST 请求成功', response.data);
12.   })
13.   .catch(error => {
14.     console.error('POST 请求失败', error);
15.   });

复制代码

4. 其他常见用法

• GET 哀求发送查询字符串：当你须要在 URL 中直接拼接参数时，可以这样做：
  

1. axios.get('https://api.example.com/data?id=123&name=John Doe')
2.   .then(response => {
3.     console.log('GET 请求成功', response.data);
4.   })
5.   .catch(error => {
6.     console.error('GET 请求失败', error);
7.   });

复制代码

• POST 哀求发送 form-data 数据：假如你须要发送文件或表单数据，可以使用 FormData 对象。
  

        

1. const formData = new FormData();
2. formData.append('file', fileInput.files[0]);
3. formData.append('id', 123);
5. axios.post('https://api.example.com/upload', formData, {
6.   headers: {
7.     'Content-Type': 'multipart/form-data',
8.   }
9. })
10.   .then(response => {
11.     console.log('文件上传成功', response.data);
12.   })
13.   .catch(error => {
14.     console.error('文件上传失败', error);
15.   });

复制代码

总结

• GET 哀求：参数通过 params 通报，axios 会自动将其转化为查询字符串，附加在 URL 后面。
  
• POST 哀求：参数通过哀求体（data）通报，通常是 JSON 格式的数据。
  
• 假如须要自定义哀求头或其他设置，可以在哀求设置中添加 headers 字段。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。