基于promise的ajax封装
1 //调用方式: 2 /* 3 ajaxPrmomise({ 4 url:, 5 method:, 6 headers:{} 7 }).then(res=>{}) 8 */ 9 10 ;(function(window){ 11 //设置默认的参数配置项 12 let _default = { 13 url:'', 14 baseURL:'', 15 method:'GET', 16 params:null, //get请求基于问号传参方式传递给服务器的内容 17 headers:{}, 18 timeout:500, 19 dataType:'json', 20 data:null, //post请求基于请求主体传参方式传递给服务器的内容 21 cache:true //是否缓存数据 22 }; 23 //resolve,reject,response,fn 24 let _setResponseMsg = function _setResponseMsg(...rest){ 25 let [ 26 resolve, 27 reject, 28 xhr, 29 fn 30 ] = rest, 31 res = null, 32 response = xhr; 33 res.data = fn(response.responseText); 34 res.status = response.status; 35 res.statusText = response.statusText; 36 res.xhr = response; 37 res.headers = response.getAllResponseHeaders(); 38 resolve(res) 39 } 40 41 let _convertJSON = function _convertJSON(result){ 42 let data = ""; 43 try { 44 data = JSON.parse(result); 45 } catch (e) { 46 reject(e) 47 } 48 return data 49 } 50 51 let _convertString = function _convertString(result){ 52 return result; 53 } 54 55 let _array_to_str = function _array_to_str(key,arr){ 56 let params = ""; 57 for(let i0;i<arr.length;i++){ 58 params += `${key}=${arr[i]}&`; 59 } 60 return params.slice(0,-1) 61 } 62 63 let _convertParams = function _convertParams(cache,params){ 64 let str = "?", 65 time_str = cache ? "":(+(new Date())+""); 66 if(typeof params == 'object' && Object.keys(params).length > 0){ 67 for(let key in params){ 68 if(typeof params[key] == 'object' && (length in params[key])){ 69 str += _array_to_str(key,params[key]) 70 } 71 str += `${key}=${params[key]}`; 72 } 73 } 74 return str+"&_="+time_str; 75 } 76 77 let _setHeader = function _setHeader(...res){ 78 let [xhr,headers] = res; 79 for(let key in headers){ 80 if(headers.hasOwnProperty(key)) 81 xhr.setRequestHeader(key,headers[key]) 82 } 83 } 84 85 //基于promise管理ajax请求 86 let ajaxPrmomise = function ajaxPrmomise(options={}){ 87 // 这里传递的options包含默认配置信息和用户基于暴露的_default修改后的信息 88 for(let key in _default){ 89 if(key in options && _default.hasOwnProperty(key)){ 90 options[key] = _default[key] 91 } 92 } 93 //=>这里可以写成 94 options = {..._default,...options}; 95 let { 96 url, 97 method, 98 baseURL, 99 data, 100 dataType, 101 headers, 102 cache, 103 params 104 } = options; 105 let xhr,send_data; 106 107 return new Promise((resolve,reject)=>{ 108 xhr = new XMLHttpRequest(); 109 _setHeader(xhr,headers); 110 send_data = method.toLowerCase() == 'get' ? _convertParams(cache,params):(method.toLowerCase() == 'post'? data:""); 111 all_url = baseURL + url + send_data; 112 xhr.open(method,all_url); 113 xhr.onreadystatechange = function(){ 114 if(xhr.readyState == 4){ 115 if(/^[23]d{2}$/.test(xhr.status)){ 116 dataType = dataType.toUpperCase(); 117 if(dataType == "json") 118 _setResponseMsg(resolve,reject,xhr,_convertJSON) 119 _setResponseMsg(resolve,reject,xhr,_convertString) 120 } 121 } 122 } 123 ajaxPrmomise.xhr = xhr; 124 xhr.send(send_data); 125 }) 126 } 127 //修改默认配置，可以通过自己设置一些配置来覆盖默认配置 128 ajaxPrmomise.defaults = _default; 129 130 ["get","head","options",""].forEach((method,indexs)=>{ 131 ajaxPrmomise[method] = function(url,options){ 132 return ajaxPrmomise({ 133 ...options, 134 url:url, 135 method:method 136 }) 137 } 138 }); 139 ["post","put"].forEach((method,index)=>{ 140 ajaxPrmomise[method] = function(url,data,options){ 141 return ajaxPrmomise({ 142 ...options, 143 url:url, 144 data:data, 145 method:method 146 }) 147 } 148 }) 149 window.ajaxPrmomise = ajaxPrmomise; 150 }(window))
打印：
