原生ajax封装成Promise

function ajax(options) {
            const { url, data, type, success, error, timeout, header } = options;
            let xhr = null;
            //1、创建XMLHttpRequest
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject();
            }
            //2、判断是get还是post请求
            if (type.toLowerCase() === 'get') {
                xhr.open('get', `${url}?${formatData(data)}`, true);
                xhr.send();
            } else if (type.toLowerCase() === 'post') {
                xhr.open('post', url, true);
                xhr.send(data);
                xhr.setRequestHeader(header)
            }
			//3、监听事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    success && success(xhr.responseText);
                } else {
                    error && error(xhr);
                }
            }
            //请求时间限制
            setTimeout(() => {
                xhr.abort();
            }, timeout);
        }
        //data的处理
        function formatData(data) {
            let res = '';
            for (let key in data) {
                res += key + '=' + encodeURI(data[key]) + '&'
            }
            res += 'time=' + new Date().getTime();
            console.log(res);
            return res;
        }

        function request(options) {
            return new Promise((resolve, reject) => {
                ajax({
                    ...options,
                    success: resolve,
                    // error: reject,
                });
            })
        }

        request({
            url: './data.json',
            data: {
                a: 1,
                b: '中文'
            },
            type: 'GET',
            timeout: 5000,
            header: {
                'content-type': 'application/json'
            }
        }).then(res=>{
            console.log('res::',res);
        }).catch(req=>{
            console.log('req::',req);
        }) 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值