Promise

我们可以利用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 }

这样呢在我们html页面就可以使用ajax请求我们的api，并且可以在.then方法处理我们拿到的数据，当然，我这里只是简单的模拟一下，真实的项目中比这要麻烦，而且我们请求的api也很多，我们也可以把我们所有api封装成方法引入，这样也方便我们后期维护，在这里我就不进行封装了，感兴趣的小伙伴可以自己尝试一下

posted @ 2020-05-12 19:40  无你旅行  阅读(201)  评论(0)  编辑  收藏  举报