- then的链式使用(promise)
var fs = require('fs')
var p1 = new Promise(function (resolve, reject) {
fs.readFile('./data/a.txt', 'utf8', function (err, data) {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
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
.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')
})
- 封装promise
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使用场景
html
<body>
<form action="USER.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>
USER.js
{
"users": [{
"id": 1,
"username": "admin",
"age": 18,
"job": 2
},
{
"id": 2,
"username": "admin2",
"age": 18,
"job": 4
},
{
"id": 3,
"username": "admin3",
"age": 18,
"job": 2
},
{
"id": 4,
"username": "admin3",
"age": 18,
"job": 3
}
],
"jobs": [{
"id": 1,
"name": "学生sheng"
},
{
"id": 2,
"name": "老师"
},
{
"id": 3,
"name": "司机"
},
{
"id": 4,
"name": "画家"
},
{
"id": 5,
"name": "演员"
},
{
"id": 6,
"name": "电竞人"
}
]
}
- 两个find方法
-
EcmaScript 6 对数组新增了很多方法
-
find
-
findIndex
-
find 接收一个方法作为参数,方法内部返回一个条件
-
find 会遍历所有的元素,执行你给定的带有条件返回值的函数
-
符合该条件的元素会作为 find 方法的返回值
-
如果遍历结束还没有符合该条件的元素,则返回 undefined
var users = [{
id: 1,
name: '张三'
},
{
id: 2,
name: '张三'
},
{
id: 3,
name: '张三'
},
{
id: 4,
name: '张三'
}
]
Array.prototype.myFind = function (conditionFunc) {
// var conditionFunc = function (item, index) { return item.id === 4 }
for (var i = 0; i < this.length; i++) {
if (conditionFunc(this[i], i)) {
return this[i]
}
}
}
var ret = users.myFind(function (item, index) {
return item.id === 2
})
console.log(ret)
- 回调函数
- 异步编程
- 如果需要得到一个函数内部异步操作的结果,这是时候必须通过回调函数来获取
- 在调用的位置传递一个函数进来
- 在封装的函数内部调用传递进来的函数
- find、findIndex、forEach
- 数组的遍历方法,都是对函数作为参数一种运用
- every
- some
- includes
- map
- reduce
resolve
then 方法获取容器的结果(成功的,失败的)
then 方法支持链式调用
可以在 then 方法中返回一个 promise 对象,然后在后面的 then 方法中获取上一个 then 返回的 promise 对象的状态结果