promise主要是用来解决异步回调问题，其实还有好几种比promise更好的方案，后面再说，这节,我们先用promise来改造下，我以前写的一篇文章[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列
中的一道面试题( 页面上有一个按钮，一个ul，点击按钮的时候，每隔1秒钟向ul的后面追加一个li, 一共追加10个，li的内容从0开始计数( 0, 1, 2, ....9 ) ).
promise的小实例:
function next1(){
return new Promise( function( resolve, reject ){
console.log( 'next1' );
resolve( 'jump to next2' );
} );
}
function next2(){
return new Promise( function( resolve, reject ){
console.log( 'next2' );
resolve( 'jump to next3' );
} );
}
next1().then( function( res ){
console.log( res );
return next2();
} ).then( function( res ){
console.log( res );
} );
使用promise的改造方案：
<input type="button" value="添加">
<ul></ul>
<script>
var oUl = document.querySelector("ul");
var oBtn = document.querySelector("input");
var count = 0;
var timer = null;
function createDom() {
var oLi = document.createElement("li");
oLi.innerHTML = count++;
oUl.appendChild(oLi);
}
var addDom = (function () {
return new Promise(function (resolve, reject) {
resolve(createDom);
});
})();
oBtn.onclick = function () {
timer = setInterval(function () {
if (count == 10) {
clearInterval(timer);
} else {
addDom.then(function (fn) {
fn();
});
}
}, 1000);
}
</script>
接下来，我们就用promise结合Node.js+jade+mongodb+mongoose+express来实现一个简单的todolist( 留言板 )
项目结构：
实现的效果:
public: 存放的项目的静态资源，如图片,css,js等
routers: 把不同功能模块分离出不同的路由，如index.js( 首页路由 ), add.js( 发布留言时候的路由 )
views: jade模板目录
db.js: 数据库连接模块
server.js: 启动服务器以及项目入口
server.js:
var express = require('express');
var app = express();
var path = require( 'path' );
var indexRouter = require( './routers/index.js' );
var addRouter = require( './routers/add.js' );
app.use( '/', indexRouter );
app.use( '/add', addRouter );
app.use( express.static( path.join( __dirname, 'public' ) ) );
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.listen( 3000 );
console.log( 'server listening on:' + 3000 );
index.js，渲染首页，取出数据库中的所有留言数据
var express = require('express');
var router = express.Router();
var Message = require('../db');
function getAllMsg(){
return new Promise( function( resolve, reject ){
Message.find( {}, function( err, msgList ){
resolve( msgList );
} );
} );
}
router.get('/', function (req, res) {
getAllMsg().then( function( data ){
res.render( 'index', {
msgList : data
} );
} );
});
module.exports = router;
add.js，处理发布留言的提交流程
var express = require( 'express' );
var router = express.Router();
var Message = require( '../db' ); function addMsg( msgInfo ){
var msgModel = new Message( msgInfo );
msgModel.save(function(err,result){
if( err ){
console.log( err );
}else{
console.log( 'success' );
}
});
}
router.get('/', function( req, res ) {
addMsg( {
title : req.query.msg,
listTime : new Date()
} );
res.redirect( '/' );
}); module.exports = router;
db.js: 数据库连接模块
var mongoose = require('mongoose');
mongoose.Promise = global.Promise;
var DB_URL = 'mongodb://localhost:27017/cms';
var db = mongoose.createConnection(DB_URL);
db.on('connected', function (err) {
if (err) {
console.log(err);
} else {
console.log('db connected success');
}
});
var Schema = mongoose.Schema;
var msgSchema = new Schema({
title: String, //留言信息
listTime: Date //发布时间
});
var Message = db.model( 'Message', msgSchema );
module.exports = Message;
后续的功能：
1，删除
2，编辑
3，分页
...等等