promise与async和await的使用

基础回顾

阻塞代码实例

首先，我们新建一个 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的区别。