day05-ES6中的Promise-API&&

作者: 东邪_黄药师 | 来源:发表于2019-01-05 17:22 被阅读4次

day05-ES6中的Promise-API&&
网页设计 - 收藏集 - 掘金
焦点领动【功能升级】2020年4月第一周：新增全站AMP功能
2.2.4如何在AMP页面中添加百度统计代码？
第十二章这火，你得灭
AMP是如何提升性能？
AE表达式名词解释
AE表达式--抖动
配置表解包（一）
AMP vs MIP

回调地狱（callback-hell）：

回调地狱实例图.png

此程序不能保证执行的先后顺序：

fs.readFile('./data/a.txt','utf8',function(err,data){
  if (err) {
    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)
})

解决方式（嵌套）：

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) {
      // return console.log('读取失败')
      // 抛出异常
      //    1. 阻止程序的执行
      //    2. 把错误消息打印到控制台
      throw err
    }
    console.log(data)
    fs.readFile('./data/c.txt', 'utf8', function (err, data) {
      if (err) {
        // return console.log('读取失败')
        // 抛出异常
        //    1. 阻止程序的执行
        //    2. 把错误消息打印到控制台
        throw err
      }
      console.log(data)
    })
  })
})

解决回调地狱（Promise）

promise-基本语法i:

//创建 Promise容器
//Promiser容器一旦创建，就开始执行里面的代码
var p1 = new Promise(function (resolve, reject) {
  console.log(3)
  fs.readFile('./data/a.txt', 'utf8', function (err, data) {
    if (err) {
      //容器任务执行成功了！
      reject(err)
      //把容器的penging 状态变为Rejected
      //这里调用的 reject方法实际相当于调用了then方法的第二个函数参数

    } else {
      
      //容器任务执行失败了了！
      //console.log(data)
      resolve(data)
      //把容器的penging状态改为成功Rwsolved！
      //这里调用的resolve方法实际就是then方法传递的那个function
    }
  })
})
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就是promise容器
//当p1成功了 然后（then）做指定的操作
//that方法接受到的function就是 resolve函数
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')
  })

Peoniseapi图示.png

promise链式调用..png

封装promise-API:

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使用场景：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <form action="00-js中的一等公民函数.js" id="user_form">
  </form>
  <script type="text/template" id="tpl">
    <div>
      <label for="">用户名</label>
      <input type="text" value="{{ user.username }}">
    </div>
    <div>
      <label for="">年龄</label>
      <input type="text" value="{{ user.age }}">
    </div>
    <div>
      <label for="">职业</label>
      <select name="" id="">
        {{ each jobs }} {{ if user.job === $value.id }}
        <option value="{{ $value.id }}" selected>{{ $value.name }}</option>
        {{ else }}
        <option value="{{ $value.id }}">{{ $value.name }}</option>
        {{ /if }} {{ /each }}
      </select>
    </div>
  </script>
  <script src="node_modules/art-template/lib/template-web.js"></script>
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script>
    // 用户表
    //  其中一个接口获取用户数据
    //  职业：2
    // 职业信息表
    //  其中一个接口获取所有的职业信息
    // 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
    //   })
    // })

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

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

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

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


    // 这个 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()
    }
  </script>
</body>

</html>

Promise操作数据库（用户注册）：

// 用户注册
// 1. 判断用户是否存在
//    如果已存在，结束注册
//    如果不存在，注册（保存一条用户信息）
User.find()
  .then(function (data) {
    console.log(data)
  })

User.findOne({ username: 'aaa' }, function (user) {
  if (user) {
    console.log('已存在')
  } else {
    new User({
      username: 'aaa',
      password: '123',
      email: 'dsadas'
    }).save(function () {
      
    })
  }
})

User.findOne({
    username: 'aaa'
  })
  .then(function (user) {
    if (user) {
      // 用户已存在，不能注册
      console.log('用户已存在')
    } else {
      // 用户不存在，可以注册
      return new User({
        username: 'aaa',
        password: '123',
        email: 'dsadas'
      }).save()
    }
  })
  .then(function (ret) {
  })

day05-ES6中的Promise-API&&
回调地狱（callback-hell）：此程序不能保证执行的先后顺序：解决方式（嵌套）：解决回调地狱（Pro...
网页设计 - 收藏集 - 掘金
免费且又精致的 HTML/CSS 站点模板 - 前端 - 掘金&amp;amp;amp;amp;l...
焦点领动【功能升级】2020年4月第一周：新增全站AMP功能
新增全站AMP功能【AMP简介】AMP：Accelerated Mobile Pages，意思是移动页面加速。A...
2.2.4如何在AMP页面中添加百度统计代码？
在 AMP 页面中添加百度统计与MIP同理，AMP 是 google 开发的一种构建网页快速呈现的静态内容的方式...
第十二章这火，你得灭
“Ich bin Schnappi das kleine Krokodil Komm aus &amp...
AMP是如何提升性能？
AMP简介 Google推出移动网页加速项目AMPAMP介绍 AMP是如何提升性能？以下的优化点是AMP页面能被...
AE表达式名词解释
函数: - wiggle(freq, amp, octaves = 1, amp_mult = .5, t = t...
AE表达式--抖动
表达式:wiggle(freq, amp, octaves = 1, amp_mult = .5, t = tim...
配置表解包（一）
content = content.Replace("&", "&"); 因为&写入到xml文件中需要用&...
AMP vs MIP
谷歌AMP https://amp.dev/ 百度MIP https://www.mipengine.org/ 谷...