js用Promise封装原生ajax

最新推荐文章于 2024-01-16 18:05:03 发布

yaojie.yao

最新推荐文章于 2024-01-16 18:05:03 发布

阅读量258

点赞数

分类专栏： JavaScript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/listStyleScript/article/details/106073536

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用Promise来封装原生的AJAX请求，通过导入和简单的JS代码实现异步操作的更优雅处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise简单封装原生ajax

导入使用处

    <script type="module"> 
       
        import ajax from './js/ajax.js'
         // 使用import type="module"必须得加

        ajax("https://api.it120.cc/yaojie/shop/goods/detail","get",{id:400537}).then(res=>{
           console.log(res) //成功后的数据
        }).catch(res=>{
            console.log(res)  //请求失败的返回
        })

    </script>

js代码

const ajax = (url,method="get",data={})=>{
   return new Promise((resove, reject)=>{
      
      let str = "?"
      for(let i in data){
          str += i + '=' + data[i] + "&"
      }  //处理参数


        url = url+str  
    
        //创建异步对象
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        //设置请求行open()
        xhr.open(method,url)
        //用post方法的话，一定要加这句设置请求头的
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //发送请求
        xhr.send()
     
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if(xhr.status == 200){
                    resove(JSON.parse(xhr.responseText))
                }else{
                    reject('请求失败')
                }
               
            }

        }
    })
}

export default ajax