axios的get和post请求，关于携带参数相关的讲解一下

在使用 Axios 发送 HTTP 请求时，GET 和 POST 请求携带参数的方式有所不同。以下是关于这两种请求方法携带参数的详细讲解：

GET 请求携带参数

对于 GET 请求，参数通常附加在 URL 之后，以查询字符串的形式传递。

1. 直接在 URL 中拼接参数：

   • 可以直接将参数以键值对的形式拼接在 URL 后面。
   • 例如：axios.get('/user?name=Kimi&age=30')。

2. 使用 params 参数：

   • Axios 允许你通过 params 配置项传递一个对象，Axios 会自动将对象序列化为查询字符串并附加到 URL 上。
   • 例如：

     axios.get('/user', {
       params: {
         name: 'Kimi',
         age: 30
       }
     });
     

   • 这将生成一个带有查询参数的请求：/user?name=Kimi&age=30。

3. params 配置项：

   • params 配置项还可以接受一个函数，这个函数会被调用以序列化参数。
   • 例如：

     axios.get('/user', {
       params: {
         name: 'Kimi',
         age: 30,
         // 使用函数来自定义参数序列化
         paramsSerializer: function(params) {
           return Qs.stringify(params, {arrayFormat: 'brackets'});
         }
       }
     });
     

   • 这可以用于更复杂的参数序列化需求。

POST 请求携带参数

对于 POST 请求，参数通常包含在请求体中。

1. 直接在 data 中传递参数：

   • 发送 POST 请求时，可以直接将参数作为对象传递给 data 配置项。
   • 例如：

     axios.post('/user', {
       name: 'Kimi',
       age: 30
     });
     

   • Axios 会自动将对象序列化为 JSON 字符串，并设置 Content-Type 头部为 application/json。

2. 使用 FormData：

   • 如果需要发送表单数据，可以使用 FormData 对象，并将其传递给 data 配置项。
   • 例如：

     let formData = new FormData();
     formData.append('name', 'Kimi');
     formData.append('age', '30');
     axios.post('/user', formData);
     

   • 这将使用 multipart/form-data 编码发送表单数据。

3. 自定义 Content-Type：

   • 如果需要发送其他类型的数据（如 application/x-www-form-urlencoded），可以自定义 transformRequest 配置项来修改请求数据的格式。
   • 例如：

     axios.post('/user', {
       name: 'Kimi',
       age: 30
     }, {
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
       },
       transformRequest: [
         function (data) {
           let ret = '';
           for (let it in data) {
             ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
           }
           return ret;
         }
       ]
     });
     

   • 这将把 JSON 对象转换为 application/x-www-form-urlencoded 格式的字符串。

总结来说，GET 请求通常将参数附加在 URL 上，而 POST 请求将参数放在请求体中。Axios 提供了灵活的配置项来满足不同的参数传递需求。

原文地址：https://blog.csdn.net/u010055960/article/details/144312085

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！