1. 封装 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)
})
2. 封装 ajax 请求
封装
// get 是 callback 方式的 API
function get(url, callback) {
var oReq = new XMLHttpRequest()
// 当请求加载成功之后要调用指定的函数
oReq.onload = function () {
// 我现在需要得到这里的 oReq.responseText
callback(oReq.responseText)
}
oReq.open("get", url, true)
oReq.send()
}
使用
get('http://127.0.0.1:3000/student/1', function (userData) {
get('http://127.0.0.1:3000/class', function (jobsData) {
var htmlStr = template('tpl', {
user: JSON.parse(userData),
jobs: JSON.parse(jobsData)
})
console.log(htmlStr)
document.querySelector('#user_form').innerHTML = htmlStr
})
})
3. Promise 封装案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="from.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>
// 方法1 ：jquery
/*********************************************/
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
})
/*********************************************/
/**
* 方法2 ：Promise封装
*/
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()
})
}
</script>
</body>
</html>
