一种不使用 xhr 对象提交 AJAX 请求、内置的、Pormise风格的 使用 AJAX 的方式，但是你不知道也不影响你成为一个合格的前端开发工程师

使用fetch函数发送请求

fetch | MDN

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>fetch发送AJAX请求</title>
  8. </head>
  9. <body>
  10.     <button>AJAX请求</button>
  11.     <script>
  12.         const btn = document.querySelector("button");
  14.         btn.onclick = function(){
  15.             fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
  16.                 //请求方法
  17.                 method:'POST',
  18.                 //请求头
  19.                 headers:{
  20.                     name:'fetchName',
  21.                 },
  22.                 //请求体
  23.                 body:'username=admin&password=admin'
  24.             }).then(response =>{
  25.                 // console.log(response);
  26.                 // return response.text();
  27.                 return response.json();
  28.             }).then(response=>{
  29.                 console.log(response);
  30.             });
  31.         }
  32.     </script>
  33. </body>
  34. </html>

这里的代码还可以优化许多
类似于这种形式

  1. try {
  2.   let response = await fetch(url);
  3.   let data = response.json();
  4.   console.log(data);
  5. } catch(e) {
  6.   console.log("Oops, error", e);
  7. }
  8. // 注：这段代码如果想运行，外面需要包一个 async function

上一段代码来自 传统 Ajax 已死，Fetch 永生，15年的文章了，可惜至今仍是 xhr 的天下
server.js

  1. //fetch服务
  2. app.all('/fetch-server',(request, response)=>{
  3.     response.setHeader("Access-Control-Allow-Origin","*");
  4.     response.setHeader("Access-Control-Allow-Headers","*");
  5.     const data = {
  6.         name: 'Axiosdataname',
  7.     }
  8.     response.send(JSON.stringify(data));
  9. })

不过很少使用，大多还是使用axios

使用率不高的原因

  • 兼容性：部分老版本浏览器不支持