简单的基于promise的ajax封装
Posted lanxiansen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的基于promise的ajax封装相关的知识,希望对你有一定的参考价值。
基于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="+time_str; 75 76 77 let _setHeader = function _setHeader(...res) 78 let [xhr,headers] = res; 79 for(let key in headers) 80 xhr.setRequestHeader(key,headers[key]) 81 82 83 84 //基于promise管理ajax请求 85 let ajaxPrmomise = function ajaxPrmomise(options=) 86 // 这里传递的options包含默认配置信息和用户基于暴露的_default修改后的信息 87 for(let key in _default) 88 if(key in options) 89 options[key] = _default[key] 90 91 92 let 93 url, 94 method, 95 baseURL, 96 data, 97 dataType, 98 headers, 99 cache, 100 params 101 = options; 102 let xhr,send_data; 103 104 return new Promise((resolve,reject)=> 105 xhr = new XMLHttpRequest(); 106 _setHeader(xhr,headers); 107 send_data = method.toLowerCase() == ‘get‘ ? _convertParams(cache,params):(method.toLowerCase() == ‘post‘? data:""); 108 all_url = baseURL + url + send_data; 109 xhr.open(method,all_url); 110 xhr.onreadystatechange = function() 111 if(xhr.readyState == 4) 112 if(/^[23]\\d2$/.test(xhr.status)) 113 dataType = dataType.toUpperCase(); 114 if(dataType == "json") 115 _setResponseMsg(resolve,reject,xhr,_convertJSON) 116 _setResponseMsg(resolve,reject,xhr,_convertString) 117 118 119 120 ajaxPrmomise.xhr = xhr; 121 xhr.send(send_data); 122 ) 123 124 //修改默认配置,可以通过自己设置一些配置来覆盖默认配置 125 ajaxPrmomise.defaults = _default; 126 127 ajaxPrmomise.get = function(url,options) 128 return ajaxPrmomise( 129 url:url, 130 method:‘get‘ 131 ) 132 ; 133 134 ajaxPrmomise.post = function(url,data,options) 135 return ajaxPrmomise( 136 url:url, 137 data:data, 138 method:‘post‘ 139 ) 140 141 window.ajaxPrmomise = ajaxPrmomise; 142 (window))
打印:
以上是关于简单的基于promise的ajax封装的主要内容,如果未能解决你的问题,请参考以下文章
vue axios接口封装Promise封装简单的axios方法封装vue接口方法封装vue postgetpatchput方法封装