封装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()