Promise封装ajax请求

ES6逐渐流行,用Promise对象封装一个ajax请求,代码如下:

复制代码

//地址,请求方式,参数,是否异步,头部信息[待续]
function ajax(url,type,param,async,header) {
                return new Promise(function(resolve, reject) {
                    var req = new XMLHttpRequest();
                    req.onload = function() { 
                        if(req.status == 200 || req.status == 304) {
                            resolve(JSON.parse(req.response));
                        } else {
                            reject(Error(req.statusText));
                        }
                    };
                    req.onerror = function() {
                        reject(Error("Network Error"));
                    };
                    type == null || type.toUpperCase() == 'GET'?type='get':type='post';
                    param = formatParams(param);
                    param == null || param == ''?url:url=url+'?'+param;
                    async == null || async == true?async=true:async=false;
                    //设置表单提交时的内容类型,未完
                    //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    req.open(type,url,async);
                    req.send();
                });
                function formatParams(data) {
                    var _fpArr = [];
                    for (var _fpName in data) {
                  _fpArr.push(_fpName + "=" + data[_fpName]);
                    }
                    return _fpArr.join("&");
                };
            };
//调用
ajax('http://wthrcdn.etouch.cn/weather_mini','get',{citykey:101010100},true).then(function(response) {
                console.log('请求成功~');
                console.log(JSON.stringify(response));
            }, function(error) {
                console.error("Failed!", error);
            });

上面的例子只需创建一个Promise对象,调用它的resolve()和reject()以及then()方法,then()里面也可以写箭头函数;

【注】如果大家要单独封装指定请求的方法,如get()和post(),只需把改下传参和指定req.open(type,url,async)中的type类型即可

复制代码

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值