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

朴灿烈づ我的快乐病毒、 2022-11-03 15:29 226阅读 0赞

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

实例结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

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

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

[async_await_ https_blog.csdn.net_czj1049561601_article_details_114238733]: https://blog.csdn.net/czj1049561601/article/details/114238733
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221023/a9c1555c5b244db984c3e8743427eaa6.png