Promise与async await学习笔记

ES6新增Promise概念解决回调地狱问题

1.Promise是一个构造函数

可以创建Promise实例const p = new Promise()

2.new出来的Promise实例对象代表一个异步操作

3.Promise.prototype包含一个.then()方法

故可通过原型链方式访问.then()方法：p.then()

4..then()方法用来预先指定成功和失败的回调函数

p.then(成功的回调函数，失败的回调函数) //成功的回调函数必填，失败的回调函数可选可省略

const p = new Promise();
p.then(result=>{}, error=>{}) // 箭头函数体有大括号默认不返回需要手动return

// 箭头函数体只有一句可省略大括号无大括号默认返回值

5.如果回调函数返回一个Promise实例对象，则可继续.then()操作

const p = new Promise(...);
p.then(result => {
    ... //做其他操作
    return new Promise(...); // 返回一个Promise实例对象后续可接着then()
   }).then(result => {
    ... //做其他操作
    return new Promise(...);
   }).then(result => {
    ... //做其他操作
    
   })

在Promise链式操作中发生错误可使用Promise.prototype.catch()方法进行捕获和处理

const p = new Promise();
p.then(result=>{}, error=>{})
    .catch((err)=>{
        console.log(err);
    }) // 箭头函数体有大括号默认不返回需要手动return

Promise.all()方法

Promise.all()方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才进行下一步的.then操作（等待机制）。

const pArr = [
    new Promise(...),
    new Promise(...),
    new Promise(...),
]; //几个异步操作都只执行完异步操作才执行.then()操作
Promise.all(pArr).then(result=>{
    console.log(result) //result是一个数组包含按顺序返回的返回值
})

Promise.race()方法会发起并行的Promise异步操作，只要一个异步操作完成，就立即执行下一步的.then()操作（赛跑机制）

const pArr = [
    new Promise(...),
    new Promise(...),
    new Promise(...),
]; //几个异步操作有一个执行完异步就立即执行.then()操作
Promise.race(pArr).then(result=>{
    console.log(result) //result是最快执行完pArr异步数组中的一个返回值
}).catch(err=>{})

基于Promise封装特定功能的方法

new Promise()只是创建了形式上的实例对象，并没有指明是什么操作

创建具体的异步操作需要在new Promise()构造函数期间，传递一个function函数，将具体的异步操作定义到function函数内部。

//声明一个方法
function fp(){
    // resolve 形参是调用fp()方法是，通过.then指定的“成功的”回调函数
    // reject 形参是调用fp()方法是，通过.then指定的“失败的”回调函数

    return new Promise(function(resolve , reject){

        fs.readFile(fpath,(err, dataStr)=>{
            
            if(err) return reject(err) //如果数据正常调用“失败的”回调函数reject并传入错误信息err
            resolve(dataStr)           //如果数据正常调用“成功的”回调函数resolve并传入数据
        })
    })
}

// fp('../1.txt').then(成功的回调函数即上面的resolve回调函数 , 失败的回调函数即上面的reject回调函数)
fp('../1.txt').then((result)=>{ console.log(result) }, (err)=>{ console.log(result) }).catch(err=>{ ... }) 
//失败的回调函数可省略，省略后可使用.catch()捕获失败回调函数传的err错误

async/await

async/await 是ES8引入的新的语法，来简化Promise异步的.then()链式操作操作

async/await使用方法：

如果某一方法的返回值是Promise实例对象，可使用await修饰，修饰后就返回值不再是Promise实例对象，变成方法的值

如果在function内部用到了await，那这个function前需要用async进行修饰。

在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行(遇到第一个await后退出async方法执行主函数后续，然后异步执行await后的操作。)视频讲解

同步任务和异步任务：JavaScript是单线程执行的编程语言

同步任务和异步任务执行过程：同步任务非耗时性任务放在JavaScript主线程中的栈区排队执行

异步任务耗时性任务被JavaScript主线程委托在宿主环境中的任务队列中安装异步执行完成时间的快慢排队执行(浏览器or Node.js)，这样不影响主线程中的执行。

当JavaScript主线程中执行栈被清空后(任务执行完毕)，才会读取任务队列中的回调函数，次序执行

JavaScript主线程不断重复上一行的步骤

EventLoop概念、宏任务和微任务