async await 就ajax因果调用解决方案(思路:以同步的思维解决异步的调用)

来源:互联网 发布:铂金数据 启信宝 编辑:程序博客网 时间:2024/05/19 18:37

解释:async await 是es7中知识点,用babel可以进行转换

-为什么我们要这样做?-

例如,我们要一次调用多个ajax,但是我们知道的是不能保证顺序执行ajax。

聪明的朋友,会在一个ajax成功后再调用下一个ajax,但是如果我要调用多个n个ajax呢,那岂不是就是进入了回调地狱里了?!

因此,我们就用到了async await 以此顺序执行,即使你后一个ajax会用到上一个ajax回调后的参数,都不会影响!

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        };    }();

async await 封装ajax如下:

function $myAjax(url, method, data, successed, failed) {        let p = new Promise(function(resolve, reject) {            $Ajax.request({                url: url,                method: method,                data: data,                success: function(resp) {                    resolve(resp);                    successed(resp);                },                failure: function(xhr) {                    failed(xhr);                    reject();                }            });        });        return p;    }    let $docs = document;    $docs.getElementById('xxx').onclick = async function() {        let resp1 = await $myAjax(url, 'get', { 'memberid': 1920744, 'activeid': 1 }, function(resp) {            console.log(resp);            console.log(2);        }, function() {            console.log('失败2');        });        let resp3 = await $myAjax(url, 'get', { 'memberid': 1920744, 'activeid': 1 }, function(resp) {            console.log(resp);            console.log(3);        }, function() {            console.log('失败3');        });    }


阅读全文
0 0