Promise封装AJAX

 1         // // 创建对象
 2         // const xhr = new XMLHttpRequest();
 3         // // 初始化访问方式和地址
 4         // xhr.open('get', 'https://api.apiopen.top/getJoke');
 5         // //发送访问请求
 6         // xhr.send();
 7         // //绑定事件接收并处理响应结果
 8         // xhr.onreadystatechange = () => {
 9         //     if(xhr.readyState===4){
10         //         //如果返回的状态码在200-300之间
11         //         if(xhr.status>=200&&xhr.status<300){
12         //             // 表示成功,输入响应结果
13         //             console.log(xhr.response)
14         //         }else{
15         //             // 如果失败，返回错误状态码
16         //             console.log(xhr.status)
17         //         }
18         //     }
19         // }
20 
21         // 使用Promise封装XMLHttpRequest
22         const p = new Promise((reslove, reject) => {
23             setTimeout(() => {
24                 // 创建对象
25                 const xhr = new XMLHttpRequest()
26                 // 声明访问方式和访问地址
27                 xhr.open('get', 'https://api.apiopen.top/getJoke');
28                 // 发送访问请求
29                 xhr.send();
30                 // 接收响应回调
31                 xhr.onreadystatechange = () => {
32                     // 与访问地址连接成功
33                     if (xhr.readyState === 4) {
34                         // 如果返回的状态码在200-300之间，表示成功响应
35                         if (xhr.status >= 200 && xhr.status < 300) {
36                             // 成功之后使用reslove接收返回的数据体
37                             reslove(xhr.response)
38                         } else {
39                             // 否则使用 reject 接收错误码
40                             reject(xhr.status)
41                         }
42                     }
43                 }
44             }, 1000);
45 
46         })
47 
48         // 声明结果的回调 then支持链式调用
49         p.then(
50             // (value)=>{} 成功的回调
51             (value) => {
52                 console.log(value)
53             },
54             // (reason)=>{} 错误的回调
55             (reason) => {
56                 console.log(reason)
57             }
58         )