promise——使用函数通过promise包装发送ajax请求

1.代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX POST 请求</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <button>点击发送</button>
    <div id="result"></div>
  </body>
  <script>
    const result = document.getElementById("result");
    const btn = document.getElementsByTagName("button")[0];
    function sendAJAX(url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve(xhr.response);
            } else {
              reject(xhr.status);
            }
          }
        };
      });
    }
    btn.addEventListener("click", () => {
      sendAJAX("https://api.apiopen.top/getJoke").then(
        (value) => {
          result.innerHTML = value;
        },
        (reason) => {
          console.log(reason);
        }
      );
    });
  </script>
</html>

2.代码讲解

function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.response);
        } else {
          reject(xhr.status);
        }
      }
    };
  });
}
  1. 自定义一个方法,方法返回一个Promise对象
btn.addEventListener("click", () => {
  sendAJAX("https://api.apiopen.top/getJoke").then(
    (value) => {
      result.innerHTML = value;
    },
    (reason) => {
      console.log(reason);
    }
  );
});
  1. 给按钮添加事件监听程序,当点击的时候,使方法返回的Promise执行then方法,并给promise对象赋值箭头函数,成功发送ajax并返回值

3.运行结果

promise——使用函数通过promise包装发送ajax请求
点击后:
promise——使用函数通过promise包装发送ajax请求

上一篇:python+appium+pytest自动化测试-跳过测试与预期失败的测试【建议收藏】


下一篇:手写promise