12.使用Promise封装Ajax

步骤都差不多,只是新创建了一个Promise对象,成功时调用resolve函数,失败时调用reject函数,然后再将这个promise返回出去

javascript 复制代码
function ajax(options) {
    let promise = new Promise(function (resolve, reject) {
        //创建xhr对象
        const xhr = new XMLHttpRequest();

        //初始化参数的内容
        options = options || {};
        options.type = (options.type || 'GET').toUpperCase();
        options.dataType = options.dataType || 'json';

        //处理参数
        let str = '';
        let params = options.data;
        for (let key in params) {
            str += key + '=' + params[key] + '&'
        }
        //去除最后一个&
        params = str.slice(0, str.length - 1);

        //发起请求
        if (options.type === 'GET') {
            xhr.open('GET', options.url + '?' + params, true);
            xhr.send(null)
        } else if (options.type === 'POST') {
            xhr.open('POST', options.url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(params);
        }

        //接收请求
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let status = xhr.status
                if (status >= 200 && status < 300) {
                    resolve(xhr.responseText)
                } else {
                    reject(new Error(status))
                }
            }
        }
    })
    return promise
}
相关推荐
anyup1 分钟前
借助 Trae 从 0 到 1 实现海外地图渲染(leaflet + OSM)
前端·数据可视化·trae
六边形6665 分钟前
JavaScript 中本地对象、内置对象、宿主对象的区别与作用
前端·javascript
snakeshe10109 分钟前
深入解析React Hooks:useState与useReducer的区别与实现
前端
程序员韩立13 分钟前
现代全栈开发:Next.js与Node.js实战指南
前端·后端
航Hang*16 分钟前
WEBSTORM前端 —— 第2章:CSS —— 第2节:文字控制属性与CSS特性
前端·css·css3·html5·webstorm
小桥风满袖18 分钟前
Three.js-硬要自学系列18 (模型边界线、几何体顶点颜色、网格模型颜色渐变)
前端·css·three.js
JHC00000018 分钟前
DrissionPage 请求一次换一个代理(不重启chrome)
前端·chrome
David凉宸19 分钟前
视频融合 hls流如何对接
前端·音视频开发
萌萌哒草头将军20 分钟前
🚀🚀🚀 神了!RedwoodJS 轻松碾压 NextJS,成了我的最爱❤️
前端·react.js·全栈
CF14年老兵21 分钟前
当 JavaScript 遇上 Rust/Go:一场 “速度诱惑” 下的生态保卫战
前端·javascript·rust