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()

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