苦海学说

Personal Blog
Exchange Learning

关于axios请求方式get、post、put、delete和请求体body的问题记录

在vue项目中我们通常会使用axios来二次封装我们的统一请求服务。

后端同事会使用各种方式来接收参数,我最近开发的项目中,我发现最新版本0.20.0的axios,在使用delete传参body存在问题,不能正常工作,查看以前的项目发现使用的是0.19.0版本,引用后,果然没问题了。

正常情况下规范使用get、post、put、delete不会存在问题,第一个参数是url;
post和put的第二个参数直接为data,第三个参数为config;
get和delete则没有data参数,第二个参数直接就是config,所以我们如果不想自己拼接url,就需要使用config中params传参。

下面我说说特殊的几种传参方式:

一、postForm和putForm

const setFormData = params => {
   const formData = new FormData();
   Object.keys(params).forEach(item => {
       formData.append(item, params[item]);
   });
   return formData;
};
http.postForm = (url, data) => {
   axios.post(url, setFormData(data)).then((res) => {
   console.log(res);
});
};
http.putForm = (url, data) => {
  axios.put(url, setFormData(data)).then((res) => {
    console.log(res);
  });
};

二、delete拼接url或者使用json方式通过body传参, 需要借助第二个参数config中data或者params字段携带

1、参数当做url参数接收,du第二个参数使用{params: data},请求的url将变为http:blog.chenlong.cc?userId=1&sex=2...

http.delete = (url, data) => {
  axios.delete(url, { params: data }).then(res => {
    console.log(res);
  });
};

2、参数使用json当做body对象来接收,第二个参数使用{data: data}

http.delete = (url, data) => {
  axios.delete(url, { data: data }).then(res => {
    console.log(res);
  });
};

本原创文章未经允许不得转载 | 当前页面:苦海学说 » 关于axios请求方式get、post、put、delete和请求体body的问题记录

评论