async/await使用

async/await 解决了Promise的链式调用（.then）造成的回调地狱，使异步回调变得像同步一样美观！

使用的方式如下：

// 异步函数1
let postFun1 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('postFun1') }, 2000)
    })
}
// 异步函数2
let postFun2 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('postFun2') }, 1000)
    })
}

// async/await
async function syncFun() {
    let s1 = await postFun1()
    console.log(s1)
    let s2 = await postFun2()
    console.log(s2)
    console.log('s1、s2都获取到了，我才会执行')
}

syncFun()

可以看出，在syncFun函数中，我们获取异步信息，书写方式就跟同步一样，不用.then套.then，很美观！

不捕获错误会怎样

// 异步函数1
let postFun1 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { resolve('postFun1') }, 2000)
    })
}
// 异步函数2
let postFun2 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject('err') }, 1000)
    })
}

async function asyncFun() {
    let s1 = await postFun1();
    let s2 = await postFun2();
    console.log('s1、s2都获取到了，我才会执行')
}
asyncFun();

控制台：

可以看出，控制台没有我们想要打印的信息console.log('s1、s2都获取到了，我才会执行')

try/catch捕获错误

我们日常开发中，都是使用try/catch捕获错误，方式如下：

let postFun1 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject('err1') }, 2000)
    })
}
let postFun2 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject('err2') }, 1000)
    })
}

async function asyncFun() {
    try{
        let s1 = await postFun1();
        let s2 = await postFun2();
    }catch(e){
        console.log(e)
    }
    console.log('s1、s2都获取到了，我才会执行')
}
asyncFun();

控制台：

可以看出，我们抛出两个reject,但是只捕获到了一个错误！

那么捕获多个错误，我们就需要多个try/catch如此，代码便像现在这样：

let postFun1 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject('err1') }, 2000)
    })
}
let postFun2 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject('err2') }, 1000)
    })
}

async function asyncFun() {
    try{
        let s1 = await postFun1();
    }catch(e){
        console.log(e)
    }
    try{
        let s2 = await postFun2();
    }catch(e){
        console.log(e)
    }
    console.log('s1、s2都获取到了，我才会执行')
}
asyncFun();

控制台：

仅仅是两个try/catch已经看起来很难受了，那么10个呢？

await-to-js

/**
 * @param promise 传进去的请求函数
 * @param errorExt 拓展错误信息
 * @return 返回一个Promise
 */
function to(promise, errorExt) {
    return promise
        .then(res => [null, res])
        .catch(err => {
            if (errorExt) {
                const parsedError = Object.assign({}, err, errorExt)
                return [parsedError, undefined]
            }
            return [err, undefined]
        })
}

await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值

这里封装了一个to函数，接收promise和扩展的错误信息为参数，返回promise。[err,res]分别代表错误信息和成功结果，.then()成功时，[null,res]代表错误信息为null；.catch()失败时，[err,undefined]代表，成功结果为undefined。我们获取捕获的结果直接从返回的数组中取就行，第一个是失败信息，第二个是成功结果！

完整代码加使用

function to(promise, errorExt) {
    return promise
        .then(res => [null, res])
        .catch(err => {
            if (errorExt) {
                const parsedError = Object.assign({}, err, errorExt)
                return [parsedError, undefined]
            }
            return [err, undefined]
        })
}

let postFun1 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject({err:'err1'}) }, 2000)
    })
}
let postFun2 = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => { reject({err:'err2'}) }, 1000)
    })
}

async function asyncFun() {
    let [err1,res1] = await to(postFun1(), {msg:'抱歉1'});
    let [err2,res2]  = await to(postFun2(), {msg:'抱歉2'});
    console.log(err1,err2)
    console.log('s1、s2都获取到了，我才会执行')
}

asyncFun()

把这个学会，在面试官面前装一波，面试官定会直呼优雅！！！