起因

最近在网上跟着学习axios在vue中的使用，包含axios的基本数据请求，实例配置。在视频教学中，讲师分享了现成的可在本地运行的api进行基本数据请求，并以其中“content-type:application/json”类型的post请求作为例子讲解，实际还有“content-type:form-data”类型的api，于是本人想试试换个类型如何进行post请求。（应该算是准入门，可能有些用词不太专业望海涵，多多指教。）

先分享下成功的案例
首先是接口文档，
post请求成功的是第三个，"/contact/new/json"

然后是vue中的代码


//		创建axios实例（写在created(){}中）this.instance = axios.create({baseURL: "http://localhost:9000/api",timeout: 1000, // 默认1000});
//		将post请求写在某个按钮的响应函数中onSubmit(evt) {evt.preventDefault(); //    阻止submit默认事件的发生
//		this.form是submit按钮响应后获取的实时表单内容console.log(evt);console.log("这是form" + this.form);
//      将获取的表单内容上传this.instance.post("/contact/new/json", this.form).then((res) => {console.log(res);console.log("Submit success");this.getList(); //     获取更新后的内容console.log("getList again success");this.onReset(); //    刷新表单中的控件console.log("Reset again success");}).catch(() => {console.log("提交请求失败");

//		这是接口文档中json类型的post请求方法
router.post('/contact/new/json', async(ctx) => {let newData = ctx.request.bodyconsole.log(newData)id++newData.id = iddata.push(newData)ctx.body = {code: 200,data: newData}
});

改进&报错

现在对form-data类型进行post请求。
首先是直接修改post请求的url为"/contact/new/form"，意料之中，显示请求失败。上论坛查了一下，大概原因是form-data类型不同，需要进行格式转化，于是，有了下面一段代码，源自csdn某位老哥（ps：代码是正确的）。

 //    主要为了尝试form请求，于是将下列代码直接放入created(){}let name = 1;let tel = 666;this.instance({url: "/contact/new/form", //接口路径method: "post",data: { name, tel },headers: {"Content-Type": "application/x-www-form-urlencoded",},transformRequest: [function (data) {let ret = {};for (let it in data) {ret +=encodeURIComponent(it) +"=" +encodeURIComponent(data[it]) +"&";}console.log("transform success");return ret;},],}).then((res) => {console.log(res);});

发现&解决问题

意料之中，请求还是失败了，不过status中显示的是canceled
在这里插入图片描述
讲真，这个问题困扰了我两天，都没有解决，论坛上基本没有解决方式（可能是我查询的问题不太对，axios小白，很多东西也不了解），然后也问了不少网友老哥，最后删除一个参数解决了问题。
问题大概就出现在koaBody这个参数，删除这个参数即可。

const koaBody = require('koa-body')({multipart: true, // 允许上传多个文件
});
//form-data  
router.post('/contact/new/form', koaBody, async(ctx) => {let newData = ctx.request.body// console.log(ctx)console.log(ctx.request)console.log(newData)id++newData.id = iddata.push(newData)ctx.body = {code: 200,data: newData}
});

原因好像是： koa-body与koa-bodyparser一定不要同时使用！会报错！（链接）
目前还没有接触过koabody，所以。。。。。。（能跑就行了）
后来，我再回到原来的函数进行post请求，发现好像也可以直接进行请球，根本不需要header和transformRequest

//		将post请求写在某个按钮的响应函数中onSubmit(evt) {evt.preventDefault(); //    阻止submit默认事件的发生
//		this.form是submit按钮响应后获取的实时表单内容console.log(evt);console.log("这是form" + this.form);
//      将获取的表单内容上传this.instance.post("/contact/new/json", this.form).then((res) => {console.log(res);console.log("Submit success");this.getList(); //     获取更新后的内容console.log("getList again success");this.onReset(); //    刷新表单中的控件console.log("Reset again success");}).catch(() => {console.log("提交请求失败");