前端异步方案async/await和Promise(resolve与reject)含义、区别、案例、总结（带源码）

promise定义

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

为什么会有promise？

为了避免界面冻结（任务）

promise三种状态
(1)pending: 等待 (进行中) promise一创建出来，就是pending进行中
(2)fulfilled: 成功 (已完成), 调用 resolve, 就会将状态从pending改成fulfilled, 且将来就会执行.then
(3)rejected: 失败 (已拒绝), 调用 reject, 就会将状态从pending改成rejected, 且将来就会执行.catch

• 一个promise的状态只可能从等待转到完成态或者拒绝态，不能逆向转换，同时完成态和拒绝态不能相互转换
• promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
• then方法接受两个参数，第一个参数是成功时的回调(resolve)，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调(reject)，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。

JavaScript中分为同步任务和异步任务，而异步任务中又分为宏任务和微任务两种;

同步任务：
会立即执行的任务。
就是多个任务在同一个主干线上,必须按顺序,从第一个执行到最后一个，按顺序先后执行到最后一个。
同步实例:比如 for 循环，console.log（）

异步任务：
不会立即执行的任务(异步任务又分为宏任务与微任务)。
不能立即执行的任务，异步任务又分为微任务和宏任务，同一队列中，微任务（Promise）会先于宏任务 (事件、计时器、Ajax、script整体代码）执行。
异步实例:Ajax,Dom事件操作,setTimeOut,promise的then方法,Node读取文件

宏任务:是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。Promise相关任务,MutationObserver等等。
宏任务: 宿主环境提供的方法是宏任务，例如setTimeout, setInterval。这些都是浏览器或者Node环境实现的。
常见的定时器,用户交互事件(setTimeout,setInterval,requestAnimationFrame,setImmediate)等等

案例:
由浏览器（多线程）提供，解决阻塞，异步任务始终在同步任务全部执行完毕后才执行，像回调函数，ajax、setTimeout。提高了执行效率，节省时间，但是会占用更多资源，不利于对进程控制。

总结:

• 在js执行中，代码从第一行开始被解释的时候（事件循环）便会进行任务队列的执行机制，此时会出现宏任务队列每个宏任务下有若干个微任务，称为微任务队列 当第一个宏任务执行完成之后才会执行下一个宏任务 每一个宏任务中的微任务依次执行。
• 也就是说:每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他的宏任务，或渲染，或进行其他任何操作。
• 同步任务 > 异步(微任务 > 宏任务)
• 同步任务先执行,然后异步任务在执行:同步任务>异步任务

async、await含义

概述：
异步编程的最高境界就是不关心它是否是异步。async、await很好的解决了这一点，将异步强行转换为同步处理。
async/await与promise不存在谁代替谁的说法，因为async/await是寄生于Promise，Generater的语法糖。

async： 是一个修饰符，async 被修饰的函数会默认的返回一个Promise对像

await ：也是一个修饰符，但是必须放在 async 函数内部使用， await关键字的作用 就是获取 Promise中返回的内容，resolve或者reject的值。

用法：
async用于申明一个function是异步的，而await可以认为是async wait的简写，等待一个异步方法执行完成。
规则：
1 async和await是配对使用的，await存在于async的内部。否则会报错
2 await表示在这里等待一个promise返回，再接下来执行
3 await后面跟着的应该是一个promise对象

promise和async/await区别

1 async以及await是ES7中的标准，是为优化Promise而开发出来的 可以说async/await是异步编程终级解决方案

2 async/await相对于promise来讲，写法更加优雅

3 reject状态：

（1）promise错误可以通过catch来捕捉，建议尾部捕获错误，
（2）async/await既可以用.then又可以用try-catch捕捉
4 Promise可以避免异步种的回调地狱 使异步变得更加简单清新，更可控

new Promise和async、await关系

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

阮一峰大佬详解

实例

function changeListChOrgInfo({commit}) {//返回一个Promise对象
      return new Promise((resolve, reject) => {
        changelistChOrgInfo({})//一个ajax请求
        .then(response => {
          if(!response.body){
           
          }
          else{
            
          }  
          resolve()
        })
        .catch(error => {
          console.log(error);
          reject();
        });
      })
 }
 
 async function update(data) {
      
    await this.changeListChOrgInfo();//当changeListChOrgInfo()执行完成之后，才执行下方操作
      
    this.iscompany = true;
 }

总结

通过阮一峰大佬,我的理解就是,先执行async函数,当async函数返回await的值遇到Promise值或者所在的函数,就会立即执行,然后,再执行函数体内后面的语句(然后在执行剩下的语句)。

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！