回调地狱和Promise

最新推荐文章于 2023-08-26 17:44:29 发布

漂流の少年

最新推荐文章于 2023-08-26 17:44:29 发布

阅读量198

点赞数 1

分类专栏： node.js+Express 文章标签： javascript 前端 es6 promise 回调地狱

本文链接：https://blog.csdn.net/YINZHE__/article/details/120899844

版权

node.js+Express 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.回调地狱callback-hell

由于fs.readFile是异步操作，所以你不能判断下面三个文件的执行顺序

var fs = require('fs')

fs.readFile('./data/a.txt','utf-8',function(err, data) {
	if(err) {
		throw err
	}
	console.log(data)
})

fs.readFile('./data/b.txt','utf-8',function(err, data) {
	if(err) {
		throw err
	}
	console.log(data)
})

fs.readFile('./data/c.txt','utf-8',function(err, data) {
	if(err) {
		throw err
	}
	console.log(data)
})

通过回调嵌套的方式可以保证执行顺序
所谓回调嵌套，就是一个异步请求的回调函数中含有另一个异步请求

var fs = require('fs')

fs.readFile('./data/a.txt','utf-8',function(err, data) {
	if(err) {
		throw err
	}
	console.log(data)
	fs.readFile('./data/b.txt','utf-8',function(err, data) {
		if(err) {
			throw err
		}
		console.log(data)
		fs.readFile('./data/c.txt','utf-8',function(err, data) {
			if(err) {
				throw err
			}
			console.log(data)
		})
	})
})

嵌套多了，就成了回调地狱(callback hell)，缺点就是代码丑，而且不方便维护

2.Promise

为了解决上面这种回调地狱，ES6语法新增了一个API：Promise

Promise本身是一个容器，里面往往封装一个异步任务

promise有三种状态：Pending、Resolved、Rejected

对上面的例子用Promise改造一下

const fs = require('fs')

function pReadFile(filePath) {
	return new Promise(function(resolve, reject) {
		fs.readFile(filePath, 'utf-8', 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)
	})

3.应用场景举例

有时候我们需要拿到多个接口的数据来渲染页面

安装json-server: npm install --g json-server
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API，并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

执行命令：json-server --watch data.json（默认端口是3000，也可以自己指定端口）
通过启动json-server服务并侦听data.json，就可以将data.json文件托管成一个 web 服务，此时data.json就充当了数据库服务器的作用。

安装art-template: npm i art-template

demo.html(传统写法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="user_form">
		</form>
		<script src="node_modules/art-template/lib/template-web.js"></script>
		<script type="text/template" id="tpl">
				<div>
					<label for="">用户名</label>
					<input type="text" name="" value="{{ user.username }}">
				</div>
				<div>
					<label for="">年龄</label>
					<input type="text" name="" value="{{ user.age }}">
				</div>
				<div>
					<label for="">职业</label>
					<select>
						{{ each jobs }}
						{{ if user.job === $value.id }}
							<option selected>{{ $value.name }}</option>
						{{ else }}
							<option>{{ $value.name }}</option>
						{{ /if }}
						{{ /each }}
					</select>
				</div>
			</script>
			<script>
				get('http://127.0.0.1:3000/users/1', function(userData) {
					get('http://127.0.0.1:3000/jobs', function (jobsData) {
						var htmlStr = template('tpl', {
							user: JSON.parse(userData),
							jobs: JSON.parse(jobsData)
						})
						document.querySelector('#user_form').innerHTML = htmlStr
					})				
				})

				function get(url, callback) {
					var oReq = new XMLHttpRequest()
					oReq.onload = function() {
						callback(oReq.responseText)
					}
					oReq.open("get", url, true)
					oReq.send()
				}
			</script>
	</body>
</html>

demo.html(使用jQuery，安装jquery:npm i jquery)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="user_form">
		</form>
		<script src="node_modules/art-template/lib/template-web.js"></script>
		<script src="node_modules/jquery/dist/jquery.js"></script>
		<script type="text/template" id="tpl">
				... // 原代码不变
			</script>
			<script>
				var data = {}
				$.get('http://127.0.0.1:3000/users/1')
					.then(function(usersData) {
						data.user = usersData
						return $.get('http://127.0.0.1:3000/jobs')
					})
					.then(function(jobsData) {
						data.jobs = jobsData
						var htmlStr = template('tpl', data)
						document.querySelector('#user_form').innerHTML = htmlStr
					})
			</script>
	</body>
</html>

demo.html(使用Promise封装ajax方法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="user_form">
		</form>
		<script src="node_modules/art-template/lib/template-web.js"></script>
		<script src="node_modules/jquery/dist/jquery.js"></script>
		<script type="text/template" id="tpl">
				... //原代码不变
			</script>
			<script>
				var data = {}
				get('http://127.0.0.1:3000/users/1')
					.then(function(usersData) {
						data.user = usersData
						return get('http://127.0.0.1:3000/jobs')
					})
					.then(function(jobsData) {
						data.jobs = jobsData
						var htmlStr = template('tpl', data)
						document.querySelector('#user_form').innerHTML = htmlStr
				})

				function get(url) {
					return new Promise(function(resolve, reject) {
						var oReq = new XMLHttpRequest()
						oReq.onload = function() {
							resolve(JSON.parse(oReq.responseText))
						}
						oReq.onerror = function(err) {
							reject(err)
						}
						oReq.open("get", url, true)
						oReq.send()
					})
				}
			</script>
	</body>
</html>

data.json

{
	"users": [
		{
			"id": 1,
			"username": "admin",
			"age": 18,
			"job": 3
		},
		{
			"id": 2,
			"username": "admin2",
			"age": 17,
			"job": 2
		},
		{
			"id": 3,
			"username": "admin3",
			"age": 19,
			"job": 3
		}
	],
	"jobs": [
		{
			"id": 1,
			"name": "学生"
		},
		{
			"id": 2,
			"name": "教师"
		},
		{
			"id": 3,
			"name": "医生"
		},
		{
			"id": 4,
			"name": "程序员"
		}
	]
}

4.操作数据库使用Promise

下面是mongoose操作数据库时使用promise的例子

const mongoose = require('mongoose')
var Schema = mongoose.Schema

mongoose.connect('mongodb://localhost/test')

var userSchema = new Schema({
	username: {
		type: String,
		required: true
	},
	password: {
		type: String,
		required: true
	},
	email: {
		type: String
	}
})

var User = mongoose.model('User', userSchema)

// 注册用户
User.findOne({
	username: 'zs'
}).then(function(user) {
		if(user) {
			console.log('用户已存在')
		} else {
			return new User({
				username: 'zs',
				password: '123456',
				email: 'admin@admin.com'
			})
		}
	}).catch()

漂流の少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
回调地狱和Promise

目录1.回调地狱callback-hell由于fs.readFile是异步操作，所以你不能判断下面三个文件的执行顺序var fs = require('fs')fs.readFile('./data/a.txt','utf-8',function(err, data) { if(err) { throw err } console.log(data)})fs.readFile('./data/b.txt','utf-8',function(err, data) { if(
复制链接

扫一扫