05——promise封装Ajax请求

最新推荐文章于 2024-04-22 12:15:23 发布

野生小米椒

最新推荐文章于 2024-04-22 12:15:23 发布

阅读量69

点赞数

分类专栏： Promise

本文链接：https://blog.csdn.net/x1037490413/article/details/118578810

版权

Promise 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该博客演示了一个简单的Ajax调用示例，通过封装的sendAjax函数获取'https://api.apiopen.top/getJoke'的JSON数据。当请求成功时，数据在控制台中打印；如果请求失败，错误状态将在控制台中显示。此示例强调了异步请求在前端开发中的应用。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!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>
    <div class="container">
      <button class="btn">点击发送Ajax</button>
    </div>
    <script>
      //封装好的Ajax函数
      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)
              }
            }
          }
        })
      }
      sendAjax('https://api.apiopen.top/getJoke').then(value=>{
        console.log(value);
      },reason=>{
        console.error(reason);
      })
    </script>
  </body>
</html>