/
ajax.js
148 lines (139 loc) · 4.5 KB
/
ajax.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import {config} from './config.js';
import {buildUrl, logError, parseUrl} from './utils.js';
export const dep = {
fetch: window.fetch.bind(window),
makeRequest: (r, o) => new Request(r, o),
timeout(timeout, resource) {
const ctl = new AbortController();
let cancelTimer = setTimeout(() => {
ctl.abort();
logError(`Request timeout after ${timeout}ms`, resource);
cancelTimer = null;
}, timeout);
return {
signal: ctl.signal,
done() {
cancelTimer && clearTimeout(cancelTimer)
}
}
}
}
const GET = 'GET';
const POST = 'POST';
const CTYPE = 'Content-Type';
/**
* transform legacy `ajax` parameters into a fetch request.
* @returns {Request}
*/
export function toFetchRequest(url, data, options = {}) {
const method = options.method || (data ? POST : GET);
if (method === GET && data) {
const urlInfo = parseUrl(url, options);
Object.assign(urlInfo.search, data);
url = buildUrl(urlInfo);
}
const headers = new Headers(options.customHeaders);
headers.set(CTYPE, options.contentType || 'text/plain');
const rqOpts = {
method,
headers
}
if (method !== GET && data) {
rqOpts.body = data;
}
if (options.withCredentials) {
rqOpts.credentials = 'include';
}
if (options.browsingTopics && isSecureContext) {
// the Request constructor will throw an exception if the browser supports topics
// but we're not in a secure context
rqOpts.browsingTopics = true;
}
return dep.makeRequest(url, rqOpts);
}
/**
* Return a version of `fetch` that automatically cancels requests after `timeout` milliseconds.
*
* If provided, `request` and `done` should be functions accepting a single argument.
* `request` is invoked at the beginning of each request, and `done` at the end; both are passed its origin.
*
* @returns {function(*, {}?): Promise<Response>}
*/
export function fetcherFactory(timeout = 3000, {request, done} = {}) {
let fetcher = (resource, options) => {
let to;
if (timeout != null && options?.signal == null && !config.getConfig('disableAjaxTimeout')) {
to = dep.timeout(timeout, resource);
options = Object.assign({signal: to.signal}, options);
}
let pm = dep.fetch(resource, options);
if (to?.done != null) pm = pm.finally(to.done);
return pm;
};
if (request != null || done != null) {
fetcher = ((fetch) => function (resource, options) {
const origin = new URL(resource?.url == null ? resource : resource.url, document.location).origin;
let req = fetch(resource, options);
request && request(origin);
if (done) req = req.finally(() => done(origin));
return req;
})(fetcher);
}
return fetcher;
}
function toXHR({status, statusText = '', headers, url}, responseText) {
let xml = 0;
function getXML(onError) {
if (xml === 0) {
try {
xml = new DOMParser().parseFromString(responseText, headers?.get(CTYPE)?.split(';')?.[0])
} catch (e) {
xml = null;
onError && onError(e)
}
}
return xml;
}
return {
readyState: XMLHttpRequest.DONE,
status,
statusText,
responseText,
response: responseText,
responseType: '',
responseURL: url,
get responseXML() {
return getXML(logError);
},
getResponseHeader: (header) => headers?.has(header) ? headers.get(header) : null,
toJSON() {
return Object.assign({responseXML: getXML()}, this)
},
timedOut: false
}
}
/**
* attach legacy `ajax` callbacks to a fetch promise.
*/
export function attachCallbacks(fetchPm, callback) {
const {success, error} = typeof callback === 'object' && callback != null ? callback : {
success: typeof callback === 'function' ? callback : () => null,
error: (e, x) => logError('Network error', e, x)
};
fetchPm.then(response => response.text().then((responseText) => [response, responseText]))
.then(([response, responseText]) => {
const xhr = toXHR(response, responseText);
response.ok || response.status === 304 ? success(responseText, xhr) : error(response.statusText, xhr);
}, (reason) => error('', Object.assign(
toXHR({status: 0}, ''),
{reason, timedOut: reason?.name === 'AbortError'}))
);
}
export function ajaxBuilder(timeout = 3000, {request, done} = {}) {
const fetcher = fetcherFactory(timeout, {request, done});
return function (url, callback, data, options = {}) {
attachCallbacks(fetcher(toFetchRequest(url, data, options)), callback);
};
}
export const ajax = ajaxBuilder();
export const fetch = fetcherFactory();