# 使用 Promise 封装一个 AJAX
# ajax 的 xhr 对象的 7 个事件
- onloadstart
- 开始send触发
- onprogress
- 从服务器上下载数据每50ms触发一次
- onload
- 得到响应
- onerror
- 服务器异常
- onloadend
- 请求结束,无论成功失败
- onreadystatechange
- xhr.readyState改变使触发
- onabort
- 调用xhr.abort时触发
# 实现代码
const ajax = (obj) => {
return new Promise((resolve, reject) => {
let method = obj.method || 'GET'
// 创建 xhr
let xhr
if(window.XMLHTTPRequest) {
xhr = new XMLHTTPRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 超时
xhr.ontimeout = function () {
reject({
errorType: 'timeout_error',
xhr: xhr
});
}
// 报错
xhr.onerror = function () {
reject({
errorType: 'onerror',
xhr: xhr
})
}
// 监听 statuschange
xhr.onreadystatechange = function() {
if(xhr.readState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
resolve(xhr.responseText)
} else {
reject({
errorType: 'onerror',
xhr: xhr
})
}
}
}
// 发送请求
if(method === 'POST') {
xhr.open('POST', obj.url, true);
xhr.responseType = 'json';
xhr.setRequestHeader("Accept", "application/json");
xhr.send(JSON.parse(obj.data));
} else {
let query = ''
for(let key in obj.data) {
query += `&${encodeURIComponent(key)}=${encodeURIComponent(obj.data[key])}`
}
// The substring() method returns the part of the string between the start and end indexes, or to the end of the string.
query.substring(1)
xhr.open('GET', obj.url, + '?' + query, true);
xhr.send()
}
})
}
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
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