基于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))
打印：
来源：https://www.cnblogs.com/lanxiansen/p/11025132.html