es6 封装ajax

/**
     * @Ajax封装
     * 执行基本ajax请求,返回XMLHttpRequest
     *  $Ajax.request({
     *      url
     *      async 是否异步 true(默认)
     *      method 请求方式 POST or GET(默认)
     *      data 请求参数 (键值对字符串)
     *      success 请求成功后响应函数,参数为xhr
     *      error 请求失败后响应函数,参数为xhr 11
     *  });
     */
    let $Ajax = function() {
        let _onStateChange = (xhr, success, failure) => {
            if (xhr.readyState === 4) { //    请求已完成,且响应已就绪
                let _s = xhr.status; //   状态码
                if (_s >= 200 && _s < 300) {
                    success(xhr); //
                } else {
                    failure(xhr);
                }
            } else {}
        };
        let request = (opt) => {
            let _fn = () => {};
            let _url = opt.url || ''; //    获得url
            let _async = opt.async !== false,
                _method = opt.method || 'GET',
                _data = opt.data || null,
                _success = opt.success || _fn,
                _error = opt.failure || _fn;
            _method = _method.toUpperCase(); //  默认都转换大写
            if (_method === 'GET' && _data) {
                let _args = '';
                if (typeof _data === 'string') {
                    _args = _data;
                } else if (typeof _data === 'object') {
                    let _arr = new Array();
                    for (let _k in _data) {
                        let _v = _data[_k];
                        _arr.push(_k + '=' + _v);
                    }
                    _args = _arr.join('&');
                }
                _url += (_url.indexOf('?') === -1 ? '?' : '&') + _args;
                _data = null;
            }
            // var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveObject('Microsoft.XMLHTTP');
            let _xhr = window.XMLHttpRequest ? new XMLHttpRequest() : '';
            _xhr.onreadystatechange = () => { // 当请求被发送到服务器时,需要执行一些基于响应的任务
                _onStateChange(_xhr, _success, _error);
            };
            _xhr.open(_method, _url, _async); // 创建一个请求,并准备向服务器发送
            if (_method === 'POST') { //   如果是POST请求的时候,需要添加个请求消息头
                _xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
            }
            _xhr.send(_data); //   向服务器发送请求
            return _xhr;
        };
        return {
            request: request
        };
    }();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用ES6中的Promise对象来封装ajax请求方法,具体步骤如下: 1. 创建一个Promise对象,该对象接受一个函数作为参数,该函数包含两个参数resolve和reject。 2. 在该函数中,使用XMLHttpRequest对象发起ajax请求,并在请求成功或失败时调用resolve和reject方法。 3. 将XMLHttpRequest对象的open、send和onreadystatechange方法封装到一个函数中,该函数返回一个Promise对象。 4. 在调用该函数时,使用then方法来处理请求成功或失败的情况。 下面是一个简单的封装ajax请求方法的示例代码: ```javascript function ajax(url, method, data) { return new Promise(function(resolve, reject) { const xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.status); } } }; xhr.send(JSON.stringify(data)); }); } ``` 在调用该方法时,可以使用then方法来处理请求成功或失败的情况: ```javascript ajax('/api/user', 'POST', {name: 'John', age: 30}) .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); ``` 以上代码中,ajax函数返回一个Promise对象,当请求成功时,resolve方法会返回响应数据;当请求失败时,reject方法会返回错误状态码。在调用ajax函数时,使用then方法来处理请求成功的情况,使用catch方法来处理请求失败的情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值