Promise封装Ajax

   封装ajax (原生Ajax)

        ------------------1、Promise写法-------------------
 1 let httpGet = function(url) {
 2             // return 一个Promise对象
 3             return new Promise((resolve, reject) => {
 4                 let xmlhttp;
 5                 // 兼容写法
 6                 if (window.XMLHttpRequest) {
 7                     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
 8                     xmlhttp = new XMLHttpRequest();
 9                 } else {
10                     // IE6, IE5 浏览器执行代码
11                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
12                 }
13                 xmlhttp.onreadystatechange = function() {
14                     if (xmlhttp.readyState == 4) {
15                         if (xmlhttp.status == 200) {
16                             // 成功
17                             let res = JSON.parse(xmlhttp.responseText)
18                                 // console.log(res);
19                                 // 把成功的数据发送出去
20                             resolve(res)
21                         } else {
22                             // 失败
23                             reject(new Error(‘请求失败!‘))
24                         }
25 
26                     }
27                 }
28                 xmlhttp.open("GET", url, true);
29                 xmlhttp.send();
30             })
31         }
32         // http://musicapi.leanapp.cn/search?keywords=大 网易云音乐api,keywords 关键字
33         httpGet(‘http://musicapi.leanapp.cn/search?keywords=大‘).then(
34             // 请求成功返回数据
35             res => console.log(‘成功!‘, res),
36             // 请求失败抛出错误
37             err => console.error(err)
38         );

 

 

        ------------------2、异步async写法-------------------

 1  function httpGet1(url) {
 2             return new Promise((resolve, reject) => {
 3                 let xmlhttp;
 4                 xmlhttp = new XMLHttpRequest(); // 需要兼容写法跟上面一样
 5                 xmlhttp.onreadystatechange = function() {
 6                     if (xmlhttp.readyState == 4) {
 7                         if (xmlhttp.status == 200) {
 8                             // 成功
 9                             let res = JSON.parse(xmlhttp.responseText)
10                                 // console.log(res);
11                                 // 把成功的数据发送出去
12                             resolve(res)
13                         } else {
14                             // 失败
15                             reject(new Error(‘请求失败!‘))
16                         }
17 
18                     }
19                 }
20                 xmlhttp.open("GET", url, true);
21                 xmlhttp.send();
22             })
23         }
24 
25         async function fn() {
26             let r1 = await httpGet1(‘http://musicapi.leanapp.cn/search?keywords=大‘);
27             console.log(r1);
28         }
29         // 调用
30         fn()

 

Promise封装Ajax

上一篇:Httprunner框架学习


下一篇:HTTP/2、3的特点