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
}
相关推荐
程序员码歌2 小时前
【零代码AI编程实战】AI灯塔导航-总结篇
android·前端·后端
用户21411832636023 小时前
免费玩转 AI 编程!Claude Code Router + Qwen3-Code 实战教程
前端
书弋江山3 小时前
flutter 跨平台编码库 protobuf 工具使用
android·flutter
小小愿望4 小时前
前端无法获取响应头(如 Content-Disposition)的原因与解决方案
前端·后端
小小愿望4 小时前
项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?
前端
烛阴4 小时前
精简之道:TypeScript 参数属性 (Parameter Properties) 详解
前端·javascript·typescript
海上彼尚5 小时前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
开发者小天5 小时前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
来来走走6 小时前
Flutter开发 webview_flutter的基本使用
android·flutter
如白驹过隙6 小时前
cloudflare缓存配置
前端·缓存