9、Promise封装ajax

150 阅读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>Document</title>
</head>
<body>
  <script>
    /**
     * 封装一个函数 sendAJAX 发送 GET Ajax 请求
     * 参数 url
     * 返回结果 Promise 对象
     * 
     */

    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)
            }
          }
        }
      })
    }


  const url = "...."
  sendAJAX(url).then(value=>{
    console.log(value)
  }, reason => {
    console.warn(reason)
  })
  </script>
</body>
</html>