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
}
相关推荐
砍材农夫几秒前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty
new_dev3 分钟前
Python实现Android自动化打包工具:加固、签名、多渠道一键完成
android·python·自动化
广州华水科技8 分钟前
单北斗GNSS变形监测在基础设施安全中的应用与维护
前端
星栈16 分钟前
Rust 全栈项目里,我写了一个不再重复造轮子的泛型表格组件
前端·前端框架·开源
008爬虫实战录16 分钟前
【码上爬】 题九:webpack调试 堆栈分析
前端·webpack·node.js
QING61836 分钟前
Kotlin inline 实战详解 —— 新手须知
android·kotlin·android jetpack
ElevenS_it18844 分钟前
MySQL慢查询监控与告警实战:从slow_log采集到分钟级定位慢SQL的完整链路配置
android·sql·mysql
Maimai108081 小时前
React 多步骤表单工程化落地:从 Zod Schema、React Hook Form 到 Zustand 持久化
前端·javascript·react.js·前端框架·状态模式
程序员码歌1 小时前
我是怎么部署开源 AI 编程助手 OpenCode,并在两个真实场景使用起来的
前端·人工智能·后端
沐言人生1 小时前
ReactNative 源码分析12——Native View创建流程onBatchComplete
android·react native