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
- async await 就ajax因果调用解决方案(思路:以同步的思维解决异步的调用)
- async / await:更好的异步解决方案
- 体验异步的终极解决方案-ES7的Async/Await
- 体验异步的终极解决方案-ES7的Async/Await
- 异步的终极解决方案-ES7的Async/Await
- 异步的终极解决方案-ES7的Async/Await
- 体验异步的终极解决方案-ES7的Async/Await
- 体验异步的终极解决方案-ES7的Async/Await
- 体验异步的终极解决方案-ES7的Async/Await
- 体验异步的终极解决方案-ES7的Async/Await
- 异步的终极解决方案-ES7的Async/Await
- ES7的Async/Await 异步
- ES7的Async/Await 异步
- 前端的异步解决方案之Promise和Await-Async
- 前端的异步解决方案之Promise和Await-Async
- silverlight学习之路(2)异步编程趋于同步 利用async和await调用wcf服务
- 解决js异步问题的方法--async和await(ES7)
- ajax 的 async 的同步和 异步
- Kotlin之匿名内部类
- 深度图像与点云区别
- Android音频系统之AudioPolicyService
- weblogic部署问题,Caused by: weblogic.descriptor.BeanAlreadyExistsException: Bean already exists: "weblog
- 清除浮动
- async await 就ajax因果调用解决方案(思路:以同步的思维解决异步的调用)
- Listview选中效果
- android跨线程更新UI的三种方法
- webstorm es6--es5
- python 闭包和修饰器
- JAVA 基础语法(二)——基本数据类型转换以及运算符
- HA集群搭建
- 手机锁机病毒解锁清除教程
- -Warc-performSelector-leaks