目录
回调函数
回调函数概念
JavaScript 回调函数
示例:封装原生的 ajax 操作
示例:实现拷贝方法
示例:读取文件中的 todos 列表数据
示例:把任务持久化保存到文件中
异常处理
try-catch 处理异常
Callback 处理异常
Promise 对象
回调地狱
Promise 概念
Promise 基本用法
几个例子
错误处理
Promise.all()
Promise.race()
async 函数
你寻求一个陌生人的帮助。
你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。回答完毕。 作者:常溪玲链接:https://www.zhihu.com/question/19801131/answer/13005983来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
我勒个去,一句话搞定的事,非得啰嗦那么多?
简单举例来说就是,我打电话找你帮忙办事,但是不确定什么时间办完,我让你办完了再电话通知我。我让你通知我就是我设定的回调函数!一般用于异步通信场景。如果我不挂电话,非等你办完了知道结果了再挂这就不属于异步通信,也无需回调!作者:柳明军链接:https://www.zhihu.com/question/19801131/answer/43799125来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
获取普通方法的返回值(方式一 return):
function add (x, y) {
return x + y
}
const ret = fn() // => 123
获取普通方法的返回值(方式二 函数):
// 是不是傻?同步回调,闲的蛋疼!
function add (x, y, callback) {
callback(x + y)
}
add(10, 20, function (ret) {
console.log(ret)
})
对于上面的代码我们肯定会有疑问,是不是傻?干嘛搞这么麻烦,第一种明显就 OK 了,难道第二种只是一种方式问题吗,聪明人肯定会选择第一种。
那大家姑且就先把它当作一种方式吧,在这里是先让大家明白一个道理:在 JavaScript 中函数也是一种数据类型,函数也可以当作参数进行传递 。
那我们到底什么时候需要使用回调函数呢?
请记住: 当需要得到一个函数中的异步操作结果的时候,我们就必须使用回调函数了(上面的第二种方式)。
- 定时器
- ajax
- readFile、writeFile
请看下面的例子:
例如,获取一个函数中异步操作的结果:
function fn () {
setTimeout(function () {
// 我想调用 fn 得到这里的 num
const num = 123
}, 1000)
}
想法一(行不通):
function fn () {
console.log(1)
setTimeout(function () {
console.log(2)
// 我想调用 fn 得到这里的 num
const num = 123
// 从返回值角度来讲,这里的 return 也只是返回给了当前的函数,而非外部的 fn 函数
return num
}, 1000)
// 到这里 fn 函数就执行结束了,所以不可能得到里面 return 的结果
console.log(3)
}
想法二(行不通):
function fn () {
console.log(1, '函数开始执行')
let num
// 定时器是异步的,所以遇到定时器不会等待,函数会继续往后执行
setTimeout(function () {
console.log(2)
// 我想调用 fn 得到这里的 num
num = 123
}, 1000)
// 到这里 fn 函数就执行结束了(定时器还没有被调用),所以你拿到的 num 就是 undefined
console.log(3)
}
正确的方式(通过函数来接收异步操作结果,这就是回调函数,因为不是立即调用,而是回头再调用):
// 2. 在 fn 函数中通过形参 callback 接收了 handler 函数
function fn (callback) {
// var callback = handler
// callback 就是我们的 handler
console.log(1, '函数开始执行')
// 定时器是异步的,所以遇到定时器不会等待,函数会继续往后执行
setTimeout(function () {
console.log(2)
// 我想调用 fn 得到这里的 num
const num = 123
// 定时器操作结束,我们就可以在这里调用 callback(也就是我们的 handler)函数,把结果 num 传递给了该函数
// 我们这里调用 callback 也就是在调用 handler
callback(num)
}, 1000)
// 到这里 fn 函数就执行结束了(定时器还没有被调用),所以你拿到的 num 就是 undefined
console.log(3)
}
function handler = function (data) {
console.log('handler 函数被调用了:', data)
}
// 1. 这里把 handler 传递到了 fn 函数中
fn(handler)
上面的方式比较繁琐,我们没必要单独定义一个全局函数,我们可以可以在调用的时候直接传递一个匿名函数即可:
function fn (callback) {
setTimeout(function () {
const num = 123
callback(num)
})
}
fn(function (data) {
console.log('回调函数被执行了:', data)
})
ajax
操作MDN - Using XMLHttpRequest
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();
已知 fs.readFile
可以读取文件,fs.writeFile
可以写文件。请帮我封装一个方法:copy
。要求调用方式如下:
copy('被复制文件', '复制到的目标文件', function (err) {
// err 成功是 null 错误是一个 错误对象
})
已知一个 json 文件内容如下:
{
"todos": ["吃饭", "睡觉", "打豆豆"]
}
请帮我写一个方法,调用该方法得到的结果就是 todos 数组 。
已知有一个 json 文件内容如下:
{
"todos": ["吃饭", "睡觉", "打豆豆"]
}
请帮我写一个方法,调用该方法可以帮我把指定的数据存储到 json 文件中的 todos 中。例如:
// 该方法肯定是异步的,所以无论操作成功与否你都必须告诉我
// err 是错误的标志,如果有错你就告诉我,如果没错就给我一个 null
// 那调用者就可以通过 err 参数来判定 addTodo 的操作结果到底成功与否
addTodo('写代码', function (err) {
})
const fs = require('fs')
fs.readFile('./data/a.txt', 'utf8', (err, dataA) => {
if (err) {
throw err
}
fs.readFile('./data/b.txt', 'utf8', (err, dataB) => {
if (err) {
throw err
}
fs.readFile('./data/c.txt', 'utf8', (err, dataC) => {
if (err) {
throw err
}
fs.writeFile('./data/d.txt', dataA + dataB + dataC, err => {
if (err) {
throw err
}
console.log('success')
})
})
})
})
实例一:Promise 版本的定时器
function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve()
}, time)
})
}
sleep(1000)
.then(() => {
console.log('吃饭')
return sleep(2000)
})
.then(() => {
console.log('睡觉')
return sleep(3000)
})
.then(() => {
console.log('坐火车回家')
})
封装 Promise 版本的 readFile
:
function readFile(...args) {
return new Promise((resolve, reject) => {
fs.readFile(...args, (err, data) => {
err ? reject(err) : resolve(data)
})
})
}
readFile('./data/a.txt', 'utf8')
.then(data => {
console.log(data)
})
另一个例子:读取文件
function readFile(...args) {
return new Promise((resolve, reject) => {
fs.readFile(...args, (err, data) => {
err ? reject(err) : resolve(data)
})
})
}
function writeFile(...args) {
return new Promise((resolve, reject) => {
fs.writeFile(...args, err => {
err ? reject(err) : resolve()
})
})
}
let ret = ''
readFile('./data/a.txt', 'utf8')
.then(data => {
ret += data
return readFile('./data/b.txt', 'utf8')
})
.then(data => {
ret += data
return readFile('./data/c.txt', 'utf8')
})
.then(data => {
ret += data
// fs.writeFile('./data/e.txt', ret, err => {
// })
return writeFile('./data/e.txt', ret)
})
.then(() => {
console.log('success')
})
示例:封装 Promise 版本的 ajax
var ajax = {}
ajax.get = function (url) {
return new Promise((resolve, reject) => {
var oReq = new XMLHttpRequest();
oReq.onload = function () {
resolve(this.responseText)
}
oReq.open("get", url, true);
oReq.send()
})
}
带有业务的封装:
var ajax = {}
ajax.get = function (url) {
return new Promise((resolve, reject) => {
var oReq = new XMLHttpRequest();
oReq.onload = function () {
// callback(this.responseText)
resolve(this.responseText)
}
oReq.open("get", url, true);
oReq.send()
})
}
function duquabc() {
return new Promise((resolve, reject) => {
let ret = ''
ajax.get('./data/a.txt')
.then(data => {
ret += data
return ajax.get('./data/b.txt')
})
.then(data => {
ret += data
return ajax.get('./data/c.txt')
})
.then(data => {
ret += data
resolve(ret)
})
})
}
duquabc().then(ret => {
console.log(ret)
})
异步串行:
const fs = require('fs')
const util = require('util')
// Node 通过核心模块 util 提供了一个非常便利的方法:promisify
const readFile = util.promisify(fs.readFile)
const writeFile = util.promisify(fs.writeFile)
// async function main() {
// // 异步串行
// // 小明
// // 打酱油
// // 买鱼
// const dataA = await readFile('./data/a.txt', 'utf8')
// const dataB = await readFile('./data/b.txt', 'utf8')
// console.log(dataA, dataB)
// }
// main()
异步并行:
// async function main() {
// // 异步并行
// // 不要加 await 关键字
// // 得到的结果是 Promise 对象
// const aTask = readFile('./data/a.txt', 'utf8')
// const bTack = readFile('./data/b.txt', 'utf8')
// const dataA = await aTask
// const dataB = await bTack
// console.log(dataA, dataB)
// }
// main()