网站首页编程语言正文

promise封装ajax请求

作者：顽强的小豆子更新时间： 2022-07-10 编程语言

promise是es6语法，直接使用即可。

XMLHttpRequest是浏览器实现的api接口，用于向后台请求数据的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封装AJAX操作</title>
</head>
<body>
    <script>
        /**
         * 封装一个函数 sendAJAX 发送 GET AJAX 请求
         * 参数   URL
         * 返回结果 Promise 对象
         */
        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);
                        }
                    }
                }
            });
        }
		//第一个箭头函数，处理成功的返回结果（跟xhr.response一致），第二个箭头函数处理失败的结果（跟xhr.status一致）
        sendAJAX('http://localhost:3000/showblog')
        .then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        });
    </script>
</body>
</html>

原文链接：https://blog.csdn.net/qiuyushuofeng/article/details/123435236

上一篇：同时启动两个项目，产生的跨域问题
下一篇：所有文章标题显示为彩色，自定义指令v-rainbow

网站首页 编程语言 正文

promise封装ajax请求

相关推荐

网站首页编程语言正文