当前位置:   article > 正文

es6 封装ajax_支持es6的ajax封装

支持es6的ajax封装
  1. /**
  2. * @Ajax封装
  3. * 执行基本ajax请求,返回XMLHttpRequest
  4. * $Ajax.request({
  5. * url
  6. * async 是否异步 true(默认)
  7. * method 请求方式 POST or GET(默认)
  8. * data 请求参数 (键值对字符串)
  9. * success 请求成功后响应函数,参数为xhr
  10. * error 请求失败后响应函数,参数为xhr 11
  11. * });
  12. */
  13. let $Ajax = function() {
  14. let _onStateChange = (xhr, success, failure) => {
  15. if (xhr.readyState === 4) { // 请求已完成,且响应已就绪
  16. let _s = xhr.status; // 状态码
  17. if (_s >= 200 && _s < 300) {
  18. success(xhr); //
  19. } else {
  20. failure(xhr);
  21. }
  22. } else {}
  23. };
  24. let request = (opt) => {
  25. let _fn = () => {};
  26. let _url = opt.url || ''; // 获得url
  27. let _async = opt.async !== false,
  28. _method = opt.method || 'GET',
  29. _data = opt.data || null,
  30. _success = opt.success || _fn,
  31. _error = opt.failure || _fn;
  32. _method = _method.toUpperCase(); // 默认都转换大写
  33. if (_method === 'GET' && _data) {
  34. let _args = '';
  35. if (typeof _data === 'string') {
  36. _args = _data;
  37. } else if (typeof _data === 'object') {
  38. let _arr = new Array();
  39. for (let _k in _data) {
  40. let _v = _data[_k];
  41. _arr.push(_k + '=' + _v);
  42. }
  43. _args = _arr.join('&');
  44. }
  45. _url += (_url.indexOf('?') === -1 ? '?' : '&') + _args;
  46. _data = null;
  47. }
  48. // var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveObject('Microsoft.XMLHTTP');
  49. let _xhr = window.XMLHttpRequest ? new XMLHttpRequest() : '';
  50. _xhr.onreadystatechange = () => { // 当请求被发送到服务器时,需要执行一些基于响应的任务
  51. _onStateChange(_xhr, _success, _error);
  52. };
  53. _xhr.open(_method, _url, _async); // 创建一个请求,并准备向服务器发送
  54. if (_method === 'POST') { // 如果是POST请求的时候,需要添加个请求消息头
  55. _xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
  56. }
  57. _xhr.send(_data); // 向服务器发送请求
  58. return _xhr;
  59. };
  60. return {
  61. request: request
  62. };
  63. }();

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/148343
推荐阅读
相关标签
  

闽ICP备14008679号