fetch的使用

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">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="txt-pwd"><br/>
        <label for="txt-tel">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</label><input type="text" id="txt-tel"><br/>
        <label for="txt-gen">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</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;//导出路由