10慕课网《进击Node.js基础（一）》初识promise
首先用最简单的方式实现一个动画效果
<!doctype>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
} .ball1 {
background: red;
}
.ball2 {
background: yellow;
}
.ball3 {
background: green;
} </style>
</head> <body>
<div class="ball ball1" style="margin-left: 0"></div>
<div class="ball ball2" style="margin-left: 0"></div>
<div class="ball ball3" style="margin-left: 0"></div>
<script type="text/javascript">
//定义三个球
var ball1 = document.querySelector('.ball1')
var ball2 = document.querySelector('.ball2')
var ball3 = document.querySelector('.ball3')
//球，移动距离，回调函数
function animate(ball, distance, cd){
//每13毫秒改变一次圆球的位置，直到到达指定位置
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft,10)
//球达到预期位置
if(marginLeft === distance){
cd && cd()
}else{
//球在左侧
if(marginLeft < distance){
marginLeft++
}else{
//球在右侧
marginLeft--
}
//调整球的位置
ball.style.marginLeft = marginLeft
animate(ball, distance, cd)
}
},13)
}
//控制动画
animate(ball1, 100,function(){
animate(ball2, 200, function(){
animate(ball3, 150, function(){
animate(ball2, 150, function(){
animate(ball1, 150, function(){ })
})
})
})
}) </script>
</body>
</html>
使用promise实现相同功能
<!doctype>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
} .ball1 {
background: red;
}
.ball2 {
background: yellow;
}
.ball3 {
background: green;
}
</style> <script src="./node_modules/bluebird/js/browser/bluebird.js" type="text/javascript"></script> </head> <body>
<div class="ball ball1" style="margin-left: 0"></div>
<div class="ball ball2" style="margin-left: 0"></div>
<div class="ball ball3" style="margin-left: 0"></div>
<script type="text/javascript">
//定义三个球
var ball1 = document.querySelector('.ball1')
var ball2 = document.querySelector('.ball2')
var ball3 = document.querySelector('.ball3') var Promise = window.Promise function promiseAnimate(ball, distance){
return new Promise(function(resolve, reject){
//球，移动距离，回调函数
function _animate(){
//每13毫秒改变一次圆球的位置，直到到达指定位置
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft,10)
//球达到预期位置
if(marginLeft === distance){
resolve()
}else{
//球在左侧
if(marginLeft < distance){
marginLeft++
}else{
//球在右侧
marginLeft--
}
//调整球的位置
ball.style.marginLeft = marginLeft + 'px'
_animate()
}
},13)
}
_animate()
})
} promiseAnimate(ball1, 100)
.then(function(){
return promiseAnimate(ball2, 200)
})
.then(function(){
return promiseAnimate(ball3, 150)
})
.then(function(){
return promiseAnimate(ball2, 150)
})
.then(function(){
return promiseAnimate(ball1, 150)
})
</script>
</body>
</html>
promise对象三种状态：
- -未完成（pending）
- -已完成（fulfiled）
- -失败（rejected）
promiseA与promiseA+不同点：
- -A+规范通过属于thenable来区分promise对象
- -A+定义onFulfilled/onRejected必须是作为函数来调用，而且调用过程必须是异步的
- -A+严格定义了then方法链式调用时onFulfilled/onRejected的调用顺序
promise then 方法
将异步执行的回调函数放入then方法中，规范链式书写
promiseObj.then(onFunction, onRejected)
onFulfilled = function(value){
return promiseObj2
}
onRejected = function(err){}
promise库有很多
- bluebird
- Q
- then.js
- es6-promise
- ypromise
- async
- native-promise-only
使用promise重写爬虫
对比：07慕课网《进击Node.js基础（一）》HTTP小爬虫
var http = require('http')
var Promise = require('bluebird')
var cheerio = require('cheerio') //使用模块
var baseUrl = 'http://www.imooc.com/learn/'
var videoIds = [728,637,348]
function filterChapters(html){
//可以像jQuery一样使用
var $ = cheerio.load(html)
var chapters = $('.chapter')
var title = $('.clearfix h2').text()
var number = $('.js-learn-num').text()
// courseData = {
// title : title,
// number : 0,
// videos : [{
// chapterTitle:'',
// videos:[{
// title:'',
// id:''
// }]
// }
var courseData = {
title : title,
number : number,
videos : []
}
chapters.each(function(item){
var chapter = $(this)
var chapterTitle = chapter.find('h3').text()
var videos = chapter.find('.video').children('li')
var chapterData = {
chapterTitle :chapterTitle.trim(),
videos:[]
}
videos.each(function(item){
var video = $(this).find('a')
var videoTile = video.text()
var id = video.attr('href').split('video/')[1]
chapterData.videos.push({
title: videoTile.trim(),
id : id
})
})
courseData.videos.push(chapterData)
})
return courseData
}
function printCourseInfo(coursesData){
coursesData.forEach(function(courseData){
console.log(courseData.number + ' 人学过 ' + courseData.title + '\n')
})
coursesData.forEach(function(courseData){
console.log('###' + courseData.title + '\n')
courseData.videos.forEach(function(item){
var chapterTitle = item.chapterTitle
item.videos.forEach(function(video){
console.log(' 【' + video.id + '】' + video.title + '\n')
})
})
})
}
function getPageAsync(url){
return new Promise(function(resolve,reject){
console.log('正则爬取'+ url)
http.get(url,function(res){
var html = ''
res.on('data',function(data){
html += data
})
res.on('end',function(){
resolve(html)
//var courseData = filterChapters(html)
//printCourseInfo(courseData)
})
}).on('errer',function(e){
reject(e)
//console.log('出错')
})
})
}
var fetchCourseArray = []
videoIds.forEach(function(id){
fetchCourseArray.push(getPageAsync(baseUrl + id))
})
Promise
.all(fetchCourseArray)
.then(function(pages){
//对多个数据处理
var coursesData = []
pages.forEach(function(html){
var curses = filterChapters(html)
coursesData.push(curses)
})
coursesData.sort(function(a,b){
return a.number < b.number
})
printCourseInfo(coursesData)
})
HTTP和HTTPS
HTTPS在http的基础上进行了加密
运行HTTPS服务，.pem文件还需要另外的方式创建
var https = require('https')
var fs = require('fs')
var options = {
key: fs.readFileSync('ssh_key.pem'),//ssl 文件
key: fs.readFileSync('ssh_cert.pem'),//证书文件
}
//运行HTTPS服务器
https.createServer(options, function(req,res){
res.writeHead(200)
res.end('hello world'+ req)
}).listen(8090)
10慕课网《进击Node.js基础（一）》初识promise的更多相关文章
- 01慕课网《进击Node.js基础（一）》Node.js安装，创建例子
版本:偶数位为稳定版本,基数为非稳定版本 - 0.6.x - 0.7.x - 0.8.x -0.9.x -0.10.x -0.11.x 概念:Node.js采用谷歌浏览器的V8引擎,用C ...
- 03慕课网《进击Node.js基础（一）》API-URL网址解析
url url.parse(url,query,host);解析域名 url必须,地址字符串 query可选 host 可选:在不清楚协议时正确解析 querystring 字符串和对象之间互相解析 ...
- 07慕课网《进击Node.js基础（一）》HTTP小爬虫
获取HTML页面 var http = require('http') var url='http://www.imooc.com/learn/348' http.get(url,function(r ...
- 进击Node.js基础（二）
一.一个牛逼闪闪的知识点Promise npm install bluebird 二.Promise实例 ball.html <!doctype> <!DOCTYPE html> ...
- 02慕课网《进击Node.js基础（一）》——CommonJs标准
是一套规范管理模块 每个js 为一个模块,多个模块作为一个包 node.js和Couchdb是对其的实现: 不同于jQuery 模块:定义.标识.引用(地址/模块名称) 模块类型: 核心模块http ...
- 进击Node.js基础（一）
一.前言 1:Node.js本质上是用chrome浏览器 v8引擎 使用c++编写的JS运行环境 2:相比于JS没有浏览器安全级的限制,额外提供了一些系统级的API:文件读写,进程管理,网络通信等. ...
- 11慕课网《进击Node.js基础（一）》Buffer和Stream
Buffer 用来保存原始数据 (logo.png) 以下代码读取logo.png为buffer类型 然后将buffer转化为string,新建png 可以将字符串配置: data:image/png ...
- 09慕课网《进击Node.js基础（一）》HTTP-get/request
get是对request封装 可以在后台发起http请求,获取远程资源,更新或者同步远程资源 http.request(options[,callback]) 以下代码灌水失败: var http = ...
- 08慕课网《进击Node.js基础（一）》事件events
引用events模块中的EventEmitter 事件的监听和发射 相同的事件发射数量有限,可以通过setMaxListeners设置峰值 var EventEmitter = require('ev ...
随机推荐
- jQuery 使用ajax，并刷新页面
<script> function del_product_information(id) { $.ajax({ url: "{% url 'del_product_inform ...
- JavaScript定时器的工作原理（翻译）
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- android 7.0以上共享文件（解决调用系统照相和图片剪切出现的FileUriExposedException崩溃问题）
在android7.0开始试共享“file://”URI 将会导致引发 FileUriExposedException. 如果应用需要与其他应用共享私有文件,则应该使用 FileProvider, F ...
- 数据同步canal客户端
1.增量订阅.消费设计 get/ack/rollback协议介绍: ① Message getWithoutAck(int batchSize),允许指定batchSize,一次可以获取多条,每次返回 ...
- jq中each的中断
最近在做项目中,遇到jq的each方法中的回调函数里面的break不生效,即通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环,我们经常会习惯JS中的break和cont ...
- jqgrid 获取选中行主键集合
如何获取选中行的主键集合呢? 使用 getGridParam(selarrrow) 方法可获取所有选中行的主键集合. 注意:此处的主键集合是指-设置为主键的列(key: true).再次提醒:一个j ...
- 第39章 ETH—Lwip以太网通信
第39章 ETH—Lwip以太网通信 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...
- 基于Python自动发送QQ群消息
1.准备工作 此次测试基于python3,需要安装qqbot.bs4.requests库. qqbot项目地址:https://github.com/pandolia/qqbot.git pip qq ...
- FFT&NTT
https://winniechen.cn/?p=377 内容有些多,我就不复制了...
- # 20155319 Exp3 免杀原理与实践
20155319 Exp3 免杀原理与实践 基础问题 (1)杀软是如何检测出恶意代码的? 基于特征码的检测 启发式的恶意软件检测 基于行为的恶意软件检测 (2)免杀是做什么? 免杀,从字面进行理解,避 ...