使用Promise封装原生Ajax方法--get-post

曾经终败给现在 2023-02-16 10:56 26阅读 0赞

无论是工作中，还是面试中，感觉都会有需要的。  
**get：**

<script>
        function getRequest(url) { 
            return new Promise((resolve, reject) => { 
                const xhr = new XMLHttpRequest()
                xhr.open('GET', url, true)
                xhr.onreadystatechange = function () { 
                    if(xhr.readyState!=4)return
                    if (xhr.readyState === 4 && xhr.status === 200) { 
                        resolve(this.responseText, xhr)
                    } else { 
                        reject(xhr.responseText);
                    }
                }
                xhr.send(null)
            })
    
        }
    </script>

post:

<script>
        function postJSON(url, data) { 
            return new Promise((resolve, reject) => { 
                var xhr = new XMLHttpRequest()
                xhr.open("POST", url, true)
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function () { 
                    if (xhr.readyState != 4) return
                    if (xhr.readyState === 4 && xhr.status === 200) { 
                        resolve(xhr.responseText)
                    } else { 
                        reject(xhr.responseText)
                    }
                }
                xhr.send(JSON.stringify(data))
            })
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Promise封装Ajax()

封装Ajax let _ajax = ({ method, url, data}) => { return ne

骑猪看日落/ 2023年10月08日 11:14/ 0 赞/ 19 阅读

相关使用Promise封装原生Ajax方法--get-post

无论是工作中，还是面试中，感觉都会有需要的。 get： <script> function getRequest(url) {

曾经终败给现在/ 2023年02月16日 10:56/ 0 赞/ 27 阅读

相关使用Promise封装Ajax操作

请使用Promise封装Ajax操作原始的Ajax操作如下：原型： var onSuccess = function(result){ }; //成功的回调

朴灿烈づ我的快乐病毒、/ 2022年12月21日 02:28/ 0 赞/ 217 阅读

相关使用Promise封装原生ajax与$.ajax()，以及fetch的使用

文章目录 1.如何使用promise封装原生ajax 2.如何使用promise封装$ajax() 3.fetch的使用

水深无声/ 2022年12月20日 12:59/ 0 赞/ 180 阅读

相关 promise封装原生ajax $ajax() 以及fetch？

使用Promise封装原生ajax Get 和 Post Promise是异步编程的一种解决方案。比传统的解决方案——————回调函数和事件，Promise更合理和

客官°小女子只卖身不卖艺/ 2022年12月20日 12:58/ 0 赞/ 303 阅读

相关 Promise封装ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我不是女神ヾ/ 2022年10月11日 00:46/ 0 赞/ 260 阅读

相关原生js封装ajax方法

jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会

绝地灬酷狼/ 2022年09月26日 00:26/ 0 赞/ 239 阅读

相关 promise封装ajax

关于promise使用时的几点： 1. 使用方法：先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败，成功调用resovle(),

水深无声/ 2021年10月23日 21:26/ 0 赞/ 749 阅读

相关原生ajax封装

//参数/ url :地址 obj: 参数 callback 回调 //没做容错有时间在写一

深藏阁楼爱情的钟/ 2021年09月16日 23:42/ 0 赞/ 404 阅读

相关原生JS封装AJAX方法

原生JS封装AJAX方法 Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理 ...

红太狼/ 2020年06月06日 18:35/ 0 赞/ 922 阅读