基础回顾
阻塞代码实例
首先,我们新建一个 test.txt 文件,内容如下:
111
然后,我们来编写一个 main.js 文件,代码如下:
var fs = require('fs')
var str = fs.readFileSync('./test.txt')
console.log(str.toString())
console.log("程序结束了")
运行结果如下:
可以看到,程序是按顺序执行的。也就是说 阻塞是按顺序执行的
按顺序执行程序 逻辑控制起来的确是好,但是,如果这个文件很大,那代码就只能阻塞在读取文件这里了。于是,就有了下面 非阻塞代码实例
非阻塞代码实例
我们接着上面的代码 修改一下 main.js 即可,代码如下:
var fs = require('fs')
fs.readFile('./test.txt',(err,data)=>{
if(err) return console.error(err)
console.log(data.toString())
})
console.log("程序结束了")
运行结果如下:
可以看到,文件读取操作并没有阻塞代码的执行。也就是说 非阻塞是不需要按顺序的,所以如果需要处理回调函数的参数,我们就需要写在回调函数内。
在实际开发中,像读取文件这样的异步操作是十分常见的,也就是说 回调函数 的使用是必不可少的。
回调函数 的 多层嵌套 会导致 传说中的 ”回调地狱“,见下图:
这种代码 虽然也能实现该有的功能,可是你自己说说,他的可读性和日后的维护是不是很差。所以,在ES6中,官方统一了 Promise各种开源实现。
Promise
明确知识点
- Promise 是 js 中的一个内置对象,所以,我们可以通过 new 创建。
- Promise 有三种状态 Pending(进行中,初始状态,既不是成功,也不是失败状态。)、Resolved(已完成)、Rejected(已失败)
- Promise 两种变化:Pending -》 Resolved ; Pending -》 Rejected
使用方法
//第一步:创建 Promise 对象
const p = new Promise((resolve,reject) => {
//生成一个随机数 [0,2]
const num = Math.random*2
//使用定时模仿异步操作
setTimeout(function(){
if(num < 1){
//调用 resolve
resolve("sucess")
}else{
//调用 reject
reject("fail")
}
},1000)
})
console.log("程序结束了")
// then 匿名函数对应着 resolve回调;catch 匿名函数对应着 reject回调
p.then((value) => {
console.log(value)
}).catch((err) => {
console.log(err)
})
运行结果
可以很明显的看到 Promise 是为异步编程解决”回调地狱“的一种方案。他和传统回调函数的区别在于:
Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了
易错点点拨
我想在 setTimeout() 前面加上这么一句话 console.log("哈哈哈,你知道我什么时候执行吗"),代码如下:
//第一步:创建 Promise 对象
const p = new Promise((resolve,reject) => {
//生成一个随机数 [0,2]
const num = Math.random*2
console.log("哈哈哈,你知道我什么时候执行吗")
//使用定时模仿异步操作
setTimeout(function(){
if(num < 1){
//调用 resolve
resolve("sucess")
}else{
//调用 reject
reject("fail")
}
},1000)
})
console.log("程序结束了")
// then 匿名函数对应着 resolve回调;catch 匿名函数对应着 reject回调
p.then((value) => {
console.log(value)
}).catch((err) => {
console.log(err)
})
运行结果:
看到结果,聪明的同学应该知道我想表达什么了,也就是说 Promise 是 异步编程 的一种解决方法,他自身不是异步的,所以,才有上面的结果,而 setTimeout() 这里相当于是一个异步操作,所以,后执行,并且,resolve() 和reject() 回调也是等同步操作执行完之后再调用
更多用法
一、多 then 连用(串行执行)
经过上面简单的实例,相信大家对 Promise 的作用和基本使用已无大的障碍。下面,我再给大伙讲讲他的其他用法。
比如,有若干个异步任务,需要先做任务1,如果成功后再做任务2,任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务,不用Promise需要写一层一层的嵌套代码。有了Promise,我们只需要简单地写:
job1.then(job2).then(job3).catch(handleError);
其中,job1
、job2
和job3
都是Promise对象。
为了让大家更清晰的理解多 then 连用,我就没写异步操作:
//第一步:创建多个 Promise 对象
const job1 = new Promise((resolve,reject) => {
console.log("程序开始了")
resolve("起床")
})
const job2 = new Promise((resolve,reject) => {
resolve("穿衣服")
})
const job3 = new Promise((resolve,reject) => {
resolve("洗脸")
})
// then 匿名函数对应着 resolve回调;catch 匿名函数对应着 reject回调
job1.then((value) => {
console.log(value)
return job2
}).then((value) => {
console.log(value)
return job3
}).then((value) => {
console.log(value)
}).catch((err) => {
console.log("err",err)
})
console.log("程序结束了")
运行结果:
简单分析:
- 一个 then 对应处理一个 Promise
- “并且,resolve() 和reject() 回调也是等同步操作执行完之后再调用”,这句话希望大家能对着运行结果 和 代码好好理解一下。
- 执行 catch 就是
job1
、job2
和job3 中任意一个
Promise 调用了 reject()。案例如下
二、all的使用(并行执行)
//第一步:创建多个 Promise 对象
const job1 = new Promise((resolve,reject) => {
console.log("程序开始了")
resolve("起床")
})
const job2 = new Promise((resolve,reject) => {
//由于这个 导致进入
resolve("穿衣服")
})
const job3 = new Promise((resolve,reject) => {
resolve("洗脸")
})
// 同时执行job1、job2、job3,并在它们都完成后执行then:
Promise.all([job1,job2,job3]).then(value => {
console.log(value) // 获得一个Array: ['job1', 'job2','job3']
})
console.log("程序结束了")
执行结果:
三、race()的使用
//第一步:创建多个 Promise 对象
const job1 = new Promise((resolve,reject) => {
console.log("程序开始了")
resolve("起床")
})
const job2 = new Promise((resolve,reject) => {
//由于这个 导致进入
resolve("穿衣服")
})
const job3 = new Promise((resolve,reject) => {
resolve("洗脸")
})
Promise.race([job1,job2,job3]).then(value => {
console.log(value)
})
console.log("程序结束了")
执行结果:
由于job1执行较快,Promise的then()
将获得结果'起床'
。job2、job3
仍在继续执行,但执行结果将被丢弃。
到此为止 Promise 相关知识点我们已经全部熟悉了一遍。
尽管 Promise 设计有效解决了 回调地狱 的问题,但是,他反复 then 、all 和 race 也不是很符合我们人自上而下的编程习惯,确切的说是他也嵌套了一层,所以,es7诞生了async和await写法。
async和await
async和await 也是 异步编程 的一种解决方法,是 更趋向同步编程
用法
//第一步:创建多个 Promise 对象
const job1 = new Promise((resolve,reject) => {
console.log("程序开始了")
resolve("起床")
})
async function demo(){
console.log("111")
var val = await job3 //这句话是一个分水岭 这句话后面的代码要等这句话执行完了才能执行
console.log("222")
console.log(val)
}
demo()
console.log("程序结束了")
执行结果:
- await 只能存在于 async之中。
- await 强行将异步操作转为同步,及await 后面的代码 得 await 执行完之后才能执行、
- await 后面得是个promise对象,获取的值就是 resolve函数参数值
- async 隐式返回一个 promise 对象
promise与async和await的区别
从 时间节点 和 语法 上总结:见 promise与async和await的区别。