我的个人博客

<script>
      // 封装一个函数sendAJAX发送GET请求，参数为url，放回结果为Promise对象
      function sendAJAX(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.responseType = "json";
          xhr.open("GET", url);
          xhr.send();
          //处理结果
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
              //判断成功
              if (xhr.status >= 200 && xhr.status < 300) {
                //成功的结果
                resolve(xhr.response);
              }
              //失败的结果
              reject(xhr.status);
            }
          };
        });
      }

      sendAJAX("http://api.apiopen.top/getJoke").then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
        }
      );
    </script>

//util.promisify方法：将普通函数转变为promise风格的函数

//引入util模块
const util = require("util");

//引入fs模块
const fs = require("fs");

let mineReadFile = util.promisify(fs.readFile);

mineReadFile("./source/1.txt").then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

//读取文件

function mineReadFile(path) {
  return new Promise((resolve, reject) => {
    require("fs").readFile(path, (err, data) => {
      //判断
      if (err) {
        reject(err);
      }
      resolve(data);
    });
  });
}

mineReadFile("./source/1.txt").then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

const fs = require("fs");

//普通形式
// fs.readFile("./source/1.txt", (err, data) => {
//   if (err) {
//     console.log("出错了");
//   }
//   console.log(data.toString());
// });

//Promise形式
let p = new Promise((resolve, reject) => {
  fs.readFile("./source/1.txt", (err, data) => {
    //如果出错
    if (err) reject(err);
    //如果成功
    resolve(data);
  });
});

p.then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

具体表达:

1. 从语法上来说: Promise 是一个构造函数
2. 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

Promise 的状态

实例对象中的一个属性 『PromiseState』

• pending 未决定的
• resolved / fullfilled 成功
• rejected 失败

Promise 对象的值

实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果

• resolve
• reject

优点

1、指定回调函数的方式更加灵活，可以不在异步任务前指定

2、支持链式调用，可以解决回调地狱的问题

//1. 引入express
const express = require("express");

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get("/server", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("HELLO AJAX - 2");
});

//可以接收任意类型的请求
app.all("/server", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //响应头
  response.setHeader("Access-Control-Allow-Headers", "*");
  //设置响应体
  response.send("HELLO AJAX POST");
});

//JSON 响应
app.all("/json-server", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //响应头
  response.setHeader("Access-Control-Allow-Headers", "*");
  //响应一个数据
  const data = {
    name: "atguigu",
  };
  //对对象进行字符串转换
  let str = JSON.stringify(data);
  //设置响应体
  response.send(str);
});

//针对 IE 缓存
app.get("/ie", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("HELLO IE - 5");
});

//延时响应
app.all("/delay", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  setTimeout(() => {
    //设置响应体
    response.send("延时响应");
  }, 1000);
});

//jQuery 服务
app.all("/jquery-server", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  // response.send('Hello jQuery AJAX');
  const data = { name: "尚硅谷" };
  response.send(JSON.stringify(data));
});

//axios 服务
app.all("/axios-server", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  // response.send('Hello jQuery AJAX');
  const data = { name: "尚硅谷" };
  response.send(JSON.stringify(data));
});

//fetch 服务
app.all("/fetch-server", (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  // response.send('Hello jQuery AJAX');
  const data = { name: "尚硅谷" };
  response.send(JSON.stringify(data));
});

//jsonp服务
app.all("/jsonp-server", (request, response) => {
  // response.send('console.log("hello jsonp")');
  const data = {
    name: "尚硅谷atguigu",
  };
  //将数据转化为字符串
  let str = JSON.stringify(data);
  //返回结果
  response.end(`handle(${str})`);
});

//用户名检测是否存在
app.all("/check-username", (request, response) => {
  // response.send('console.log("hello jsonp")');
  const data = {
    exist: 1,
    msg: "用户名已经存在",
  };
  //将数据转化为字符串
  let str = JSON.stringify(data);
  //返回结果
  response.end(`handle(${str})`);
});

//
app.all("/jquery-jsonp-server", (request, response) => {
  // response.send('console.log("hello jsonp")');
  const data = {
    name: "尚硅谷",
    city: ["北京", "上海", "深圳"],
  };
  //将数据转化为字符串
  let str = JSON.stringify(data);
  //接收 callback 参数
  let cb = request.query.callback;

  //返回结果
  response.end(`${cb}(${str})`);
});

app.all("/cors-server", (request, response) => {
  //设置响应头
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  response.setHeader("Access-Control-Allow-Method", "*");
  // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
  response.send("hello CORS");
});

//4. 监听端口启动服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中....");
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 只适用于get请求 -->
    用户名：<input type="text" id="username" />
    <p></p>
    <script>
      //获取input元素
      const input = document.querySelector("#username");
      const p = document.querySelector("p");

      //声明handle函数
      function handle(data) {
        input.style.border = "solid 1px red";
        p.innerHTML = data.msg;
      }

      //绑定事件
      input.onblur = function () {
        //获取用户输入值
        let username = this.value;
        //向服务端发送请求，检测用户名是否已经存在
        //1、创建script标签
        const script = document.createElement("script");
        //2、设置标签的src属性
        script.src = "http://127.0.0.1:8000/check-username";
        //添加script
        document.body.appendChild(script);
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>西南大学</h1>
    <button>点击获取用户数据</button>
    <script>
      const btn = document.querySelector("button");

      btn.onclick = function () {
        const x = new XMLHttpRequest();
        //因为这里满足同源策略，所以url可以简写
        x.open("GET", "/data");
        //发送
        x.send();
        x.onreadystatechange = function () {
          if (x.readyState == 4) {
            if (x.status >= 200 && x.status < 300) {
              console.log(x.response);
            }
          }
        };
      };
    </script>
  </body>
</html>

<script>
      var btns = document.querySelectorAll("button");
      let x;
      let isSending = false; //是否正在发送ajax请求
      btns[0].onclick = function () {
        //如果上一个请求正在发送，则取消这一次的请求
        if (isSending) {
          x.abort();
        }
        x = new XMLHttpRequest();
        //修改标识变量的值
        isSending = true;
        x.open("GET", "http://127.0.0.1:8000/delay");
        x.send();
        x.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            //判断响应状态码 2##表示成功
            if (xhr.status >= 200 && xhr.status < 300) {
              isSending = false;
            }
          }
        };
      };
    </script>

<script>
      var btns = document.querySelectorAll("button");
      let x;
      btns[0].onclick = function () {
        x = new XMLHttpRequest();
        x.open("GET", "http://127.0.0.1:8000/delay");
        x.send();
      };
      btns[1].onclick = function () {
        x.abort();
      };
    </script>