fetch的使用

素颜马尾好姑娘i 2021-11-11 12:56 274阅读 0赞

> Fetch API 提供了一个 JavaScript接口，用于访问HTTP，它提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

// 用fetch实现简单的注册：
     //前端页面
        <div class="register">
            <p>欢迎注册</p>
            <label for="txt-name" class="name">用户名：</label><input type="text" id="txt-name"><br/>
            <label for="txt-pwd">密      码：</label><input type="password" id="txt-pwd"><br/>
            <label for="txt-tel">电      话：</label><input type="text" id="txt-tel"><br/>
            <label for="txt-gen">性      别：</label><input type="text" id="txt-gen"><br/>
            <a href="#"><button>注册</button></a><br/>
    
        </div>
        <script>
            let txtName=document.querySelector('#txt-name');
            let txtPwd=document.querySelector('#txt-pwd');
            let txtTel=document.querySelector('#txt-tel');
            let txtGen=document.querySelector('#txt-gen');
    
            let oA=document.querySelector('a');
    
            let url="http://localhost:3000/register";
            document.querySelector('button').onclick=function(){ 
                let username=txtName.value.trim();
                let password=txtPwd.value.trim();
                let telephone=txtTel.value.trim();
                let gender=txtGen.value.trim();
                if(username===''||password===''||telephone===''||gender===''){ 
                    alert('请输入用户名和密码');
                    return;
                }
                fetch(url,{ 
                    method:"POST",
                    body:`username=${ username}&password=${ password}&telephone=${ telephone}&gender=${ gender}`,
                    headers:{ 'Content-Type':"application/x-www-form-urlencoded"}
                }).then(data=>data.json()).then(res=>{ 
                    if(res.code=='200'){ 
                        oA.href='login.html';
                        alert('注册成功！');
                    }else{ 
                        console.log(res);
                    }
                })
            };
       </script>
    //服务器端
    var express = require('express');//导入express
    var router = express.Router();
    var fs=require('fs');
    router.post('/register', function(req, res, next) { 
      let userObj=req.body;
      saveData(userObj,dataObj=>{ 
        res.send(dataObj);
      });
    });
    
    //读取本地数据
    function readData(fn){ 
      let arr=[]; //保存本地数据
      fs.readFile('./data/userData.txt','utf-8',(err,data)=>{ 
          if(!err){ 
              arr=JSON.parse(data);
          }else{ 
              console.log('读取本地数据失败');
          }
          fn(arr);
      });
    }
    
    
    //保存数据
    function saveData(userObj,fn){ 
      let obj={ };//响应给前端的对象
      readData(arr=>{ 
          if(arr.length==0){ 
              arr.push(userObj);
          }else{ 
              for(let i in arr){ 
                  if(arr[i].username==userObj.username){ 
                      return;
                  }else{ 
                      arr.push(userObj);
                  }
              }
          }
          
          fs.writeFile('./data/userData.txt',JSON.stringify(arr),err=>{ 
              if(!err){ 
                  obj.code='200';
                  obj.msg='注册成功！';
              }else{ 
                  obj.code='201';
                  obj.msg='注册失败';
              }
              fn(obj);
          });
      });
      
    }
    
    module.exports = router;//导出路由