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
}
相关推荐
ANYOUZHEN6 小时前
bugku shell
android
a1117766 小时前
医院挂号预约系统(开源 Fastapi+vue2)
前端·vue.js·python·html5·fastapi
0思必得06 小时前
[Web自动化] Selenium处理iframe和frame
前端·爬虫·python·selenium·自动化·web自动化
行走的陀螺仪8 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
南宫码农9 小时前
我的电视 - Android原生电视直播软件 完整使用教程
android·开发语言·windows·电视盒子
道亦无名9 小时前
音频数据特征值提取 方法和步骤
android·音视频
We་ct9 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript
Lancker9 小时前
定制侠 一个国产纯血鸿蒙APP的诞生过程
android·华为·智能手机·鸿蒙·国产操作系统·纯血鸿蒙·华为鸿蒙
2301_8127314110 小时前
CSS3笔记
前端·笔记·css3
ziblog10 小时前
CSS3白云飘动动画特效
前端·css·css3