我们可以利用Promise对Ajax请求进行简单的封装处理，那么下面就是我所实现的代码
首先新建一个index.html页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <h2>Promise</h2> 10 </body> 11 <script src="./ajax.js"></script> 12 <script> 13 let url='这里可以写你请求的api' 14 15 ajax(url,'GET') 16 //通常成功返回的处理 17 .then(res=>{ 18 console.log('获取数据：：',res) 19 }) 20 //失败处理 21 .catch(error=>{ 22 console.log('失败的处理',error) 23 }) 24 .finally(res=>{ 25 console.log('数据请求完毕！') 26 })
然后我们新建一个ajax.js用来写我们的promise封装，并引入到我们的index.html页面里面
1 //使用promise封装原生的ajax请求 2 function ajax(url, method='get', data) { 3 4 return new Promise((resolve, reject) => { 5 6 //创建ajax对象 7 if (window.XMLHttpRequest) { 8 //w3c标准 9 var xhr = new XMLHttpRequest(); 10 } else { 11 //兼容IE低版本 12 var xhr = new ActiveXObject('microsoft.XMLHttp') 13 } 14 15 //open 16 if (method === 'GET') { 17 xhr.open(method,url) 18 } 19 20 if (method === 'post') { 21 xhr.setRequestHeader('content-type','application/x-form-www-urlencdoed') 22 xhr.open(method,url) 23 } 24 //send 25 xhr.send(); 26 //监听请求，状态处理 27 xhr.onreadystatechange = function () { 28 29 if (xhr.readyState === 4) { 30 if (xhr.status === 200) { 31 32 //成功返回 33 resolve(JSON.parse(xhr.responseText)) 34 35 } else { 36 //失败处理 37 reject('请求有误') 38 } 39 } 40 41 } 42 43 44 45 }); 46 47 }