Promise与Async Await详解

 一、什么是promise和async/await？

 1、Promise

• 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

• Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。

• Promise对象，可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

• Promise对象提供统一的接口，使得控制异步操作更加容易。

（1）实例方法

可以使用链式调用：因为这三个方法的返回值都是promise实例

.then()
// promise状态为fulfilled（已成功）
// 参数：函数，函数内部的参数是resolve传过来的实参
.catch()
// promise状态为rejected（已失败） 
// 参数：函数，函数内部的参数是reject传过来的实参
.finally()
// 无论promise状态是成功还是失败，都会执行里面的代码

（2）创建实例

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject,它们是两个函数 ​

（1）resolve作用是将promise对象状态从未完成变为成功，异步操作成功时调用，并将异步操作的结果作为参数传出去。

         reject作用是将promise的状态从未完成变为失败，在异步操作失败时调用，并将异步操作报的错作为参数传递出去

（2）promise对象代表一个异步操作有三个状态：pending初始状态，fulfilled操作成功，rejected操作失败状态

（3）promise的状态一经改变，只有两种可能：从pending变为fulfilled，从pending变为rejected

         状态发生改变之后就不会再变，会一直保持这个结果，这时就称为 resolved（已定型）

let promise = new Promise((resolve, reject) => {
        if(1 > 0) {
          // pending => fulfilled
          resolve('success');
        } else {
          // pending => rejected
          reject('error')
        }
      })
      // 访问promise实例内部的状态
      promise.then(res => {
        console.log(res)
      }).catch(error => {
        console.error(error)
      })

 // 获取列表数据
  getList(){
    getList(this.List)
      .then((res) => {
        if (res.code == 200) {
          this.page.total = res.data.total;
          this.page.pageSize = res.data.size;
          this.tableData = res.data.records;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

（3）静态方法

Promise.all([pro1,pro2])
        // 将pro1和pro2包装成数组作为实参传递进去
        // 返回值：promise对象。结果 =》pro1,pro2都成功才成功，有一个失败就失败
        
   Promise.race([pro1,pro2])
        // 将pro1和pro2包装成数组作为实参传递进去
        // 返回值：promise对象。结果 =》pro1,pro2谁先回来就用谁都结果（无论成功或者失败）
        
   Promise.any([pro1,pro2])
        // 将pro1和pro2包装成数组作为实参传递进去
        // 返回值：promise对象。结果 =》pro1,pro2都失败才失败，有一个成功就成功
        
   Promise.resolve()
        // 参数：任意
        // 返回值：状态为fulfilled的promise对象
        
   Promise.reject()
        // 参数：任意
        // 返回值：状态为rejected的promise对象

2、async

• async函数是generator函数的语法糖，是ES6的异步编程解决方案

• async await是对promise的优化，async await是一种更优雅的写法，将异步的代码优化为了同步的写法

（1）关键字

• function关键字前加上 async（异步） ​ 异步请求之前，加上 await（等待）

（2）实例

async function findAll() {
    let res = await $.get('......');
    console.table(res.data)
  }

//获取项目周报列表数据
async getList() {
    let a = this.obj;
    let res = await getList(a);
    this.Data = res.data.records;
    this.total = res.data.total;
}

二、区别

1、函数的前面多了一个async关键字。await只能在async中使用。await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完，不输出结果，要等最第二个接口执行完，才返回这两个的结果。

2、async生成的结果是promise对象，async是promise的终结版。

三、为什么使用async/await比较好？

async：

• async是ES7

• async语法使得代码简洁清晰，不需要写那么多的箭头函数，避免了代码嵌套

• async在接收上一个返回值为参数时，比较方便

Promise：

• Promise是ES6

• Promise主要用于异步任务，将异步的任务队列化，他主要解决了异步操作不小心就会进入回调地狱模式中，他将回调地狱的嵌套模式改为了链式调用模式，利于代码可读性和维护性。

• promise不能在返回表达式的箭头函数中设置断点。如果你在.then代码块中设置断点，进入下一步的话，调试器不会跳到下一个.then，因为他只会跳过异步代码。

// 比如这样的场景，调用promise1，使用promise1的返回结果去调用promise2，然后使用两者的结果去调用promise3
const maskRequest = () =>{
    return promise1().then(res1=>{
        return promise2(res1).then(res2=>{
            return promise3(res1,res2)
        })
    })
}

这样的操作会导致代码嵌套很多，不易于解读。

使用async/await的话代码就变得异常的简单和直观

const maskRrequest =  async()=>{
    const res1 = await promise1()
    const res2 = await promoise2(res1)
    return await promise( res1 , res2 )    
}