ES6 very important Promise

Promise

Hell callback (callback hell)

• callbackhell.js

var fs = require('fs')

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

    fs.readFile('./data/b.txt', 'utf8', function (err, da){
        if(err){
            throw err
        }
        console.log(da)
        var fs = require('fs')

        fs.readFile('./data/c.txt', 'utf8', function (err, da){
            if(err){
                throw err
            }
            console.log(da)
        })
    })
})

//为了保证读取顺序，必须嵌套

Promise

In order to solve the problems caused by the above encoding (nested callback hell), so a new API in EcmaScript 6: Promise.

• Promise is a constructor

• container
  • Asynchronous tasks (pending)
  • resolve
  • reject
• then to get the result container (successful, failed)
• then chained method calls support
• May then return a peomise object method, and then obtaining a promise object is then returned back method in a state results

//创建 Promise 容器
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/a.txt', 'utf8', function (err, data) {
        if (err) {
        //失败了，承诺容器中的任务失败了
        reject(err)
        } else {
        //承诺中的任务成功了
        resolve(data)
        }
    })
})

p1
    .then(function (data) {
        console.log(data)
        //当前函数中 return 的结果就可以在后面的 then 中 function 接收到
        //没有 return 就接收到 undefined
        //当 return 一个 Promise 对象的时候，后续的 then 中的方法的第一个参数有会作为 p2 的 resolve
        return p2
    }, function (err) {
        console.log(err)
    })
    .then(function (data) {
        console.log(data)
        return p3
    }, function (err) {
        console.log(err)
    })

• Promise itself is not asynchronous, but often are packaged inside an asynchronous task

Promise package version readFile

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(function (data) {
    console.log(data)
  })

Promise scenarios

Multiple scene asynchronous request

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
         })

Method Promise package version ajax

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()
      })
    }