js callback-hell处理

1. js callback描述

   var   fs = require('fs');
   fs.readFile('./data/a.txt',  'utf8', function (err,data) {
         if (err)  {
                //  return  console.log('读取失败')
                //  抛出异常
                //     1.阻止程序的执行
                //     2.把错误消息打印到控制台
                throw  err
          }
          console.log(data)
          fs.readFile('./data/b.txt',  'utf8',  function (err, data) {
                  if (err) {
                          throw   err
                  }
                  console.log(data)
                  fs.readFile('./data/c.txt',  'utf8',  function (err,  data)  {
                      if (err) {
                                 throw  err
                       }
                           console.log(data)
                  })
          })
   })

2. promise解决处理

var   fs = require('fs')
var   p1 = new  Promise(function (resolve, reject) {
        fs.readFile('./data/a.txt',  'utf8',  function (err, data) {
                if (err) {
                     reject(err)
                } else {
                     resolve(data)
                }
        })
})
var  p2 = new Promise(function (resolve, reject) {
      fs.readFile('./data/b.txt', 'utf8', function (err, data) {
      if (err) {
            reject(err)
       } else {
            resolve(data)
       }
  })
})
var  p3 = new Promise(function (resolve, reject) {
      fs.readFile('./data/c.txt', 'utf8', function (err, data) {
            if (err) {
                 reject(err)
            } else {
                resolve(data)
            }
      })
})

p1
    .then(function(data){
        console.log(data)
        //当p1读取成功的时候
        //当前函数中return的结果就可以在后面的then中function接受到
        //当你return  123后面就接收到123
        //       return  'hello'  后面就接收到  'hello'
         //      没有  return  后面收到的就是  undefined
         //上面那些return的数据没有什么用
         //真正有用的是:我们可以return 一个Promise对象
         //当return  一个Promise对象的时候,后续的then中的方法 的一个参数会作为P2的resolve
         return   p2
    }, function(err){
         console.log('读取文件失败了', err)
    })
    .then(function(data){
          console.log(data)
          return  p3
    })
    .then(function(data){
           console.log(data)
           console.log('end')
    })

#### 3. 上面promise封装一下
```javascript
var   fs = require('fs')

function pReadFile(filePath) {
      return   new  Promise(function (resolve, reject) {
            fs.readFile(filePath, 'utf8', function(err, data) {
                    if (err) {
                         reject(err)
                    } else {
                         resolve(data)
                    }
            })
      });
}

pReadFile('./data/a.txt')
    .then(function(data){
         console.log(data)
         return pReadFile('./data/b.txt')
    })
    .then(function(data){
           console.log(data)
           return  pReadFile('./data/c.txt')
    })
    .then(fucntion(data){
          console.log(data)
    })

3. 实战应用

原代码

    get('http://127.0.0.1:3000/users/4', function (userData) {
        get('http://127.0.0.1:3000/jobs', function (jobsData) {
             var htmlStr = template('tpl', {
                 user: JSON.parse(userData),
                 jobs: JSON.parse(jobsData)
              })
              console.log(htmlStr)
              document.querySelector('#user_form').innerHTML = htmlStr
       })
     })

    // 这个 get 是 callback 方式的 API
    // 可以使用 Promise 来解决这个问题
    function get(url, callback) {
      var oReq = new XMLHttpRequest()
      // 当请求加载成功之后要调用指定的函数
      oReq.onload = function () {
        // 我现在需要得到这里的 oReq.responseText
        callback(oReq.responseText)
      }
      oReq.open("get", url, true)
      oReq.send()
    }

jquery代码实现

     var data = {}
     $.get('http://127.0.0.1:3000/users/4')
       .then(function (user) {
           data.user = user
           return $.get('http://127.0.0.1:3000/jobs')
       })
       .then(function (jobs) {
           data.jobs = jobs
           var htmlStr = template('tpl', data)
           document.querySelector('#user_form').innerHTML = htmlStr
     })

promise实现

 pGet('http://127.0.0.1:3000/users/4')
      .then(function (data) {
        console.log(data)
      })

    function pGet(url, callback) {
      return new Promise(function (resolve, reject) {
        var oReq = new XMLHttpRequest()
        // 当请求加载成功之后要调用指定的函数
        oReq.onload = function () {
          // 我现在需要得到这里的 oReq.responseText
          callback && callback(JSON.parse(oReq.responseText))
          resolve(JSON.parse(oReq.responseText))
        }
        oReq.onerror = function (err) {
          reject(err)
        }
        oReq.open("get", url, true)
        oReq.send()
      })
    }

     var data = {}
     pGet('http://127.0.0.1:3000/users/4')
       .then(function (user) {
         data.user = user
         return pGet('http://127.0.0.1:3000/jobs')
      })
       .then(function (jobs) {
         data.jobs = jobs
         var htmlStr = template('tpl', data)
         document.querySelector('#user_form').innerHTML = htmlStr
    })