异步解决方案之promise、async/await（详解）@zj-zhangjie

promise和async/await都是es6的新增特性，都是处理异步问题的好办法。

Promise是干什么的？

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

3、可以在对象之间传递和操作promise，帮助我们处理队列

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.

先用代码简单实现一下：

    function waiting() {

        return new Promise((resolve, reject) => {
            //这里用定时器模拟我请求ajax/axios数据的延迟，模拟异步操作
            setTimeout(function () {

                resolve('2')  //数据处理成功
				//reject('2') //数据处理错误
            }, 2000)
        })

    }
    console.log(1)
    console.log(3)
    //成功返回
    waiting().then(res => {
        console.log('res:', res)
        
    })
    //失败返回
    //.catch(error=>{
   	//	console.log('error:',error)
	//})
    

打印结果：

可以看见，先打印的1和3，两秒之后打印的2,这不是我们要的结果，我要的是依次打印1，2，3

function waiting() {

        return new Promise((resolve, reject) => {
            //这里用定时器模拟我请求ajax/axios数据的延迟
            setTimeout(function () {

                resolve('2')

            }, 2000)
        })

    }
    
    waiting().then(res => {
        console.log(1)
        console.log('res:', res)
        console.log(3)
    })
    

打印结果：

这样一打印，出来的就是1，2，3 这样就处理了异步的问题。

Promise 语法结构：

new Promise( function(resolve, reject) {...} /* executor */  );

它里面有两个参数 一个是resolve,一个是reject

resolve是成功返回 reject是失败返回。

Promise的其他方法：

Promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功返回', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败返回， 'error'
})

Promise.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all就可以解决这个问题。

Promise.race

Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

看代码展示：

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('error')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'error'
})

async/await

首先有两个条件

1.await后面接一个会return new promise的函数并执行它

2.await只能放在async函数里

看代码实现：

串行执行：必须先执行第一个异步，将第一个异步的结果返回传递给第二个异步函数，再执行第二个异步的操作过程

//第一个函数
function waiting() {
    return new Promise((resolve,reject)=>{
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
                resolve('第二个接口返回')

            },2000)

        
    })

 }


//第二个函数
function waiting2() {
    return new Promise((resolve,reject)=>{
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
                reject('第二接口返回')

            },2000)

        
    })

 }


async function handleFn() {
   console.log(1)
   
   //串行执行，先等待第一个函数返回
    let res=await waiting()
    console.log('res:',res)
    
    //再等待第二个函数返回
    let res2=await waiting2(res)
    console.log(res2)
 }

并行：两个接口同时执行

function waiting() {
    return new Promise((resolve,reject)=>{
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
                resolve('第二个接口返回')

            },2000)
     
    })

 }


function waiting2() {
    return new Promise((resolve,reject)=>{
          //我这里只是用setTimeout来模拟axios,
             setTimeout(function() {
                reject('第二接口返回')

            },2000)
     
    })

 }

async function handleFn() {
   console.log(1)
    //并发执行，waiting(),waiting2()两个接口都成功返回才返回结果
    let res=await Promise.all([waiting(),waiting2()])
     console.log('res:',res)
     console.log('end')
 }

 handleFn().catch(res=>{

     console.log('error:',res)
 })

await字面意思就是等待，await后面要跟一个promise对象，返回结果就是它后面Promise执行的结果，可能是返回成功或者是返回失败的值，给人的感觉就像里面的操作是同步一样，但其本质async还是异步操作。