ajax的用法——基于fetch

fetch是用来取代XMLHttpRequest 基于promise的设计！
简单用法如下：

    fetch("/fetch1", {
        method:"post",
        headers:{
          "content-type": "application/json"
        },
        body:JSON.stringify({name:"scy"})
      }).then(res => res.text()).then(result => p.innerText = result);

第一个参数是url
第二个参数可以这样写：

var head = new Headers();
head.append("Content-Type", "text/plain");
...

var mInit = {
method: "POST",
headers: head
};

fetch("url", mInit)...

有诸多属性：

method 请求的方法POST/GET等
url 请求的地址
headers 请求头（可以是Headers对象，也可是JSON对象）
context 请求的上下文
referrer 指定请求源地址
mode 请求的模式（是跨域cors还是正常请求no-cors）
credentials 跨域请求时，是否携带cookie信息（omit跨域携带/same-origin同源携带）
redirect 重定向
integrity 一个散列值，用于检验请求资源的完整性MDN
cache 是否缓存这个请求

例子
前端fetch.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>fetch的用法</title>
    <style media="screen">
      .container{
        width:800px;
        height:600px;
        margin: 0 auto;
      }
      span{
        display: inline;
        color: red;
      }
    </style>
  </head>
  <body>
    <form class="container"  method="post">
      <input type="text" name="name" value="13699999999" placeholder="请输入手机号"><span class="name_error"></span><br>
      <input type="text" name="password" value="" placeholder="请输入6-12位的密码"><span class="pwd_error"></span><br>
      <input type="submit" name="" value="注册" style="width:180px; background-color:SkyBlue;height:32px">
    </form>
    <script type="text/javascript" src="javascripts/validate.js"></script>
    <script type="text/javascript">
      const form = document.querySelector("form");
      const name_error = form.querySelector(".name_error");
      const pwd_error = form.querySelector(".pwd_error");
      form.onsubmit = function (event) {
        event.preventDefault();
        name_error.innerText = "";
        pwd_error.innerText = "";
        let n = form.querySelector("input[name=name]");
        var name =n .value;
        let ps = form.querySelector("input[name=password]");
        var password = ps.value;
        let errors = validate(name, password);
        if (errors) {
          showError(JSON.stringify(errors));
        }else {
          request(name, password);
        }
      }

      function request(name, password) {
        fetch("/re",{
          method:"POST",
          body:JSON.stringify({name, password}),
          headers:{
            "Content-Type":"application/json"
          }
        })
          .then(res => res.text())
          .then(errors => {
            showError(errors)
          })
      }

      function showError(errors) {
        if (errors) {
          errors = JSON.parse(errors);
          if (errors.name) {
            name_error.innerText = errors.name;
          }
          if (errors.password) {
            pwd_error.innerText = errors.password;
          }
        }
        else {
          alert("SUCCESS！！！")
        }
      }
    </script>
  </body>
</html>

后台fetch.js

const router = require("express").Router();
const validate = require("../public/javascripts/validate");
router.post("/re", function (req, res) {
  const {name, password} = req.body;
  console.log("validate(name, password)", validate(name, password));
  res.send(validate(name, password));
});

module.exports = router;

两端通用的一段验证代码validate.js

function validate(name, password) {
  let errors = "";
  if (!(/(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/.test(name))) {
    errors = errors || {};
    errors.name = "手机格式不正确";
  }
  if (password.length < 6 || password.length > 12) {
    errors = errors || {};
    errors.password = "请输入最小6位、最大12位的密码";
  }
  console.log(errors);
  return errors;
}
//确保只有后台才会调用这段代码
if(typeof window === "undefined")
    module.exports = validate;

ajax的用法——基于fetch

猜你喜欢