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
}
相关推荐
老王以为4 分钟前
Claude Code 的产品哲学:当价值观成为架构
前端·claude·vibecoding
程序员黑豆7 分钟前
AI全栈开发 - Java:变量
java·前端·ai编程
tedcloud12311 分钟前
HyperFrames部署教程:用HTML生成MP4视频
前端·数据库·人工智能·html·音视频
江米小枣tonylua17 分钟前
真多线程!Bun作者要给JS大手术
前端
潘潘潘35 分钟前
Android网络结构分析——有线网络
android
YIAN36 分钟前
# 从入门到封装:一文搞懂 Fetch API 所有用法(新手友好)
前端·javascript
Slice_cy1 小时前
基于node实现服务端内核引擎
前端·后端
踏雪羽翼1 小时前
Android OpenGL实现十几种美颜功能
android
往事随风灬1 小时前
我被 Volta 的“智能”坑了一下午:pnpm 为何无视项目 Node 版本?
前端·vue.js
xiaofeichaichai1 小时前
Tree Shaking
前端·javascript