6miu盘搜

前端四种请求方式的处理，以及node端如何获取到前端发送的请求（本文借助的fetch来进行交互）

it2024-04-06 51

<body> <button class="item1">fetch get请求</button> <button class="item2">fetch params请求</button> <button class="item3">post请求</button> <button class="item4">formData 请求</button> </body>

四种请求方式描述如下述代码

<script> addEventListener("click",function(e){ var res=e.target.getAttribute("class"); switch(res){ case "item1": fetch('http://localhost:9001/getinfo?username=tom&age=20',{ headers:new Headers({ 'Content-Type': 'application/json' }), method:"get" }).then(res=>{ return res.json();//返回的是一个promise对象 }).then(result=>[ console.log(result)//拿到最终的结果 ]) break; case "item2": fetch('http://localhost:9001/info/tony/13232435',{ method:"get" }).then(res=>{ return res.json();//返回的是一个promise对象 }).then(result=>{ console.log(result)//拿到最终的结果 }) break; case "item3": fetch('http://localhost:9001/pdata',{ //需要设置请求头，否则后端拿不到请求体里面的数据 headers:new Headers({ 'Content-Type': 'application/json' }), body:JSON.stringify({ username:"易洋千玺", password:"123456" }), method:"post" }).then(res=>{ return res.json();//返回的是一个promise对象 }).then(result=>[ console.log(result)//拿到最终的结果 ]) break; case "item4": var form=new FormData(); form.append("skill","flying"); form.append("food","cake"); fetch('http://localhost:9001/formdata',{ body:form, method:"post" }).then(res=>{ return res.json();//返回的是一个promise对象 }).then(result=>[ console.log(result)//拿到最终的结果 ]) break; } }) </script>

后端代码如下：

const express=require("express"); const app=express(); const multiparty=require("multiparty");//解析formData的数据 var bodyParser = require('body-parser');//解析请求体里面的数据对象 app.use(bodyParser.urlencoded({extend:false})); app.use(bodyParser.json()); // 配置跨域： function allowOrigin(req,res,next){ res.header("Access-Control-Allow-Origin","*");//设置请求源 res.header("Access-Control-Allow-Headers", "*"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); next(); } app.use(allowOrigin); app.get("/getinfo",function(req,res){ console.log(req.body,req.query); res.send(JSON.stringify([ "abc" ])); }) app.get("/info/:name/:id",function(req,res){ console.log(req.body,req.query,req.params); res.send(JSON.stringify(["get/paeemas"])); }); app.post("/pdata",function(req,res){ console.log(req.body,req.query); res.send(JSON.stringify(["ppp"])); }) app.post("/formdata",function(req,res){ let form = new multiparty.Form(); //解析form表单，form.parse(req,(err,fields,files) =>{ }) // fields表示用户所提交的表单数据 // files是用户上传的文件对象 form.parse(req,(err,fields,files) =>{ console.log(fields); res.send(JSON.stringify(["formdata"])); }) }) app.listen(9001,function(){ console.log("服务器运行在端口为9001上") })

最新回复(0)