async与await结合发送AJAX请求小案例

发布时间：2022-10-07 12:00

为熟悉async与await的使用，本文通过小案例来进行AJAX的发送！具体原理见如下博文！
async函数与await函数基本原理介绍 https://blog.csdn.net/czj1049561601/article/details/114238733

案例内容：
	通过点击屏幕上的按钮来过去接口中的笑话，并进行打印！

完整代码如下：

<!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>Document</title>
</head>

<body>
  <button id="btn">点击获取段子</button>
  <script>
    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);
            } else {
              reject(xhr.status);
            }
          }
        }
      })
    }
    let btn = document.querySelector('#btn');
    btn.addEventListener('click', async function () {
      // 获取段子信息
      console.log('TEST');
      let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
      console.log(duanzi);
    })
  </script>
</body>

</html>

实例结果：

可以看到，使用async与await结合来发送请求，非常的简单方便！

1：在错误处理这方面，async和await结合方式，用try catch包裹就可以，比原来使用纯回调函数要方便的多！不需要一层层判断。
2：在async和await的使用过程中，我们是看不到回调函数的！
3：在promise的then方法和catch方法中，可以看到有回调函数。
4：非常简洁，就类似于我们写同步函数调用的方式，只不过在前面多了个await，但是他的内部的执行确是异步的。

async与await结合发送AJAX请求小案例

可以看到，使用async与await结合来发送请求，非常的简单方便！

相关推荐