ES6 解决callback hell的Promise对象

1 初体验

 1 var fs = require('fs')
 2 
 3 //ES6新增API Promise 它是一个构造函数 
 4 
 5 //1  创建Promise容器
 6 //  给别人一个承诺 I promise you
 7 //  Promise 容器一旦创建 就开始执行里面的代码
 8 var p1 = new Promise(function (resolve, reject) {
 9   fs.readFile('./data/a.txt', 'utf8', function (err, data) {
10     if (err) { //承诺容器中的任务失败了
11       //把容器的Pending状态改为rejected
12       //也就是说这里调用的reject方法实际上就是调用then方法第二个function
13       reject(err)
14     } else {//承诺容器中的任务成功了
15 
16       //把容器的Pending状态改为成功 resolved
17       //也就是说这里调用的resolve方法实际上就是调用then方法传递的第一个function
18       resolve(data) 
19     }
20   })
21 })
22 
23 var p2 = new Promise(function (resolve, reject) {
24   fs.readFile('./data/b.txt', 'utf8', function (err, data) {
25     if (err) {
26       reject(err)
27     } else {
28       resolve(data)
29     }
30   })
31 })
32 
33 var p3 = new Promise(function (resolve, reject) {
34   fs.readFile('./data/c.txt', 'utf8', function (err, data) {
35     if (err) {
36       reject(err)
37     } else {
38       resolve(data)
39     }
40   })
41 })
42 //怎么获取 reject(失败) resolve(成功) 后的数据 通过Promise实例对象的then方法 两个参数(function())都是可选的
43 p1//p1 就是那个承诺 当p1成功 了 然后(then)做指定的操作 then方法里面接收的function就是resolve函数
44   .then(function (data) { //function ==resolve data==data
45     console.log(data)
46 
47 
48     // 当 p1 读取成功的时候
49     // 当前函数中 return 的结果就可以在后面的 then 中 function 接收到
50     // 当你 return 123 后面就接收到 123
51     //      return 'hello' 后面就接收到 'hello'
52     //      没有 return 后面收到的就是 undefined
53     // 上面那些 例子 return 的数据没什么用
54     // 真正有用的是：我们可以 return 一个 Promise 对象
55     // 当 return 一个 Promise 对象的时候，后续的 then 中的 方法的第一个参数function会作为 p2 的 resolve 
56     return p2
57   }, function (err) { //err错误对象 
58      console.log('读取文件失败了', err)
59   })
60   .then(function (data) {
61     console.log(data)
62     return p3
63   })
64   .then(function (data) {
65     console.log(data)
66     console.log('end')
67   })

 

2 封装Promise-API

 1 var fs = require('fs')
 2 
 3 function pReadFile(filePath) {
 4   return new Promise(function (resolve, reject) {
 5     fs.readFile(filePath, 'utf8', function (err, data) {
 6       if (err) {
 7         reject(err)
 8       } else {
 9         resolve(data)
10       }
11     })
12   })
13 }
14 // 如果 ，前面的 Promise 执行失败，我们不想让后续的Promise 操作被终止，可以为 每个 promise 指定 失败的回调
15 pReadFile('./data/a.txt')
16   .then(function (data) {
17     console.log(data)
18     return pReadFile('./data/b.txt')
19   }, function (err) {
20     console.log('这是失败的结果：' + err.message)
21     // return 一个 新的 Promise
22     return pReadFile('./data/b.txt')
23   })
24   .then(function (data) {
25     console.log(data)
26     return pReadFile('./data/c.txt')
27   })
28   .then(function (data) {
29     console.log(data)
30   })
31 // 有时候，我们有这样的需求，和上面的需求刚好相反：如果 后续的Promise 执行，依赖于 前面 Promise 执行的结果，如果前面的失败了，则后面的就没有继续执行下去的意义了，此时，我们想要实现，一旦有报错，则立即终止所有 Promise的执行；
32 pReadFile('./data/axxx.txt')
33   .then(function (data) {
34     console.log(data)
35 
36     return pReadFile('./data/b.txt')
37   })
38   .then(function (data) {
39     console.log(data)
40 
41     return pReadFile('./data/c.txt')
42   })
43   .then(function (data) {
44     console.log(data)
45   })
46   .catch(function (err) { // catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常；
47     console.log('这是自己的处理方式：' + err.message)
48   })
View Code

3 jq方式(无兼容性问题)

3.1 get | post方式

 1     var data = {} // 因为拿不到上一个then数据 用data组织在一起
 2     $.get('http://127.0.0.1:3000/users/4')
 3       .then(function (user) {
 4         data.user = user
 5         return $.get('http://127.0.0.1:3000/jobs')
 6       })
 7       .then(function (jobs) {
 8         data.jobs = jobs
 9         var htmlStr = template('tpl', data)
10         document.querySelector('#user_form').innerHTML = htmlStr
11       })
View Code

 3.2 ajax方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9 </head>
10 
11 <body>
12 
13   <input type="button" value="获取数据" id="btn">
14 
15   <script src="./node_modules/jquery/dist/jquery.min.js"></script>
16 
17   <script>
18     $(function () {
19       $('#btn').on('click', function () {
20         $.ajax({
21           url: './data.json',
22           type: 'get',
23           dataType: 'json'
24         })
25           .then(function (data) {
26             console.log(data)
27           })
28       })
29     });
30   </script>
31 </body>
32 
33 </html>
View Code
posted @ 2019-04-03 13:00  xx_sprog  阅读(296)  评论(0)    收藏  举报