ajax改成promise教程,简单的基于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,fn24 let _setResponseMsg = function _setResponseMsg(...rest){25 let [26 resolve,27 reject,28 xhr,29 fn30 ] = 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 data49 }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

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 params101 } = 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]\d{2}$/.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))