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
}
相关推荐
初出茅庐的12 分钟前
hooks&&状态管理&&业务管理
前端·javascript·vue.js
三掌柜66616 分钟前
2025三掌柜赠书活动第三十五期 AI辅助React Web应用开发实践:基于React 19和GitHub Copilot
前端·人工智能·react.js
YH丶浩16 分钟前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
阿民_armin17 分钟前
Canvas 冷暖色分析工具
前端·javascript·vue.js
小岛前端18 分钟前
大小仅 1KB!超级好用!计算无敌!
前端·javascript·开源
遇见你的那天29 分钟前
反编译查看源码
android
没有鸡汤吃不下饭30 分钟前
Git将某个分支合并到开发(dev)、测试(test)后突然想撤销该分支的功能,怎么处理?
前端·git·github
文心快码BaiduComate31 分钟前
Comate分饰多角:全栈开发一个Python学习网站
前端·后端·python
90后的晨仔38 分钟前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js
我是日安41 分钟前
从零到一打造 Vue3 响应式系统 Day 20 - Reactive:reactive 极端案例
前端·vue.js