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

最新推荐文章于 2024-04-20 10:43:52 发布

Kratial

最新推荐文章于 2024-04-20 10:43:52 发布

阅读量583

点赞数 2

分类专栏： nodejs js

本文链接：https://blog.csdn.net/Kratial/article/details/109197669

版权

js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

nodejs

6 篇文章 0 订阅

订阅专栏

<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上")
})