async与await是什么？

简而言之， async用于申明一个function是异步的；而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的。

一、async和await的基础使用

async/awiat的使用规则:

• async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
• async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
• await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

async 函数会返回一个promise对象

async function test() {}
console.log(test())   // 打出 Promise { undefined }

使用async和await：

async function test() {
  let result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('success')
    })
  })
  console.log(result)
}
test()

二、async/await的一个使用场景

在前端开发的过程里，偶尔会遇到多个请求，而后一个请求依赖之前请求的需求，如果要用promise的链式调用的话那么有几个请求就需要写几个then，我们简单模拟下：

let request = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let random = Math.random()
            if (random >= 0.1) {
                resolve(time)
            } else {
                throw new Error('出错了')
            }
        }, time)
    })
}

request(200).then((response) => {         //注意这种链式调用的错误处理机制
    console.log('第一次请求成功了', response)
    return request(response + 200)
}).then((result) => {
    console.log('第二次请求成功了', result)
    return request(result + 200)
}).then(result => {
    console.log('第三次请求成功了', result) 
})

上面的其实图显麻烦，而如何我们用async-await的话就会简洁一些：

let request = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let random = Math.random()
            if (random >= 0.1) {
                resolve(time)
            } else {
                throw new Error('出错了')
            }
        }, time)
    })
}

async function test() {
    let result01 = await request(200)
    let result02 = await request(result01 + 200)
    let result03 = await request(result02 + 200)
    console.log(result03)
}

test()

记住， await后面一定要跟 promise对象

这样看起来就简洁了很多，可读性也增强了很多。但是因为await方法其实阻塞了代码，如果不是这种后面的请求依赖前面的请求的话，最好不要这样做。

上面的例子还可以继续扩展，如果遇到了需要继续处理result03的情况，还可以将result03 return一下，因为async函数返回的还是一个promise对象，所以可以用then方法接收。
如下：

async function test() {
    let result01 = await request(200)
    let result02 = await request(result01 + 200)
    let result03 = await request(result02 + 200)
    return result03
}

test().then(result => {
  console.log(result)
})

三、async-await的错误处理机制

从上面的例子来看，async和await可以非常好的取代promise的then方法，尤其是在特定的多次请求的处理上，但是其中也存在着一个很明显的问题：错误处理不够清晰。上面的代码中，并没有看到针对错误进行的代码，而因为async函数本身会返回一个promise，这样就可以使用catch来捕捉async函数的错误了。

具体代码如下：

async function test() {
    let result01 = await request(200)
    let result02 = await request(result01 + 200)
    let result03 = await request(result02 + 200)
    return result03
}

test().then(result => {
  console.log(result)
}).catch((error) => {
  console.log(error)
})

四、在async函数中使用await和for循环

let request = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let random = Math.random()
            if (random >= 0.5) {
                resolve(time) 
            } else {
                reject('failed')
            }
        }, time)
    })
}

let times = [1000, 2000, 3000]
let results = []
async function test() {
    for (let time of times) {
        let temp = await request(time)
        results.push(temp)
    }
    console.log(results)
}
test().then(result => {
    console.log(result)
}).catch(error => {
    console.log(error)
})
console.log(111)

后半部分也可以借助Promise.all写成下面这样：

let times = [1000, 2000, 3000]
let results = []
async function test() {
    let a = await Promise.all(times.map( async time => {
        return await request(time)
    }))
    console.log(a)
    return 'success'
}
test().then(result => {
    console.log(result)
}).catch(error => {
    console.log(error)
})

注意这里的Promise.all是极其必要的，如果去掉会有很大的不同。要注意一下。具体可以看这里https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop

需要特别注意的是：虽然async函数依然是异步的，但是里面await的Promise是同步的，这样就有可能造成代码阻塞。如果不是有需要完成不必这样做。

五、一个小测试

async function test() {
    console.log(1)
    let result = await Promise.resolve('success')
    console.log(2)
    return result
}
test().then(result => {
    console.log(3)
}).catch(error => {
    console.log(3)
})
console.log(4)

上面代码执行后打出来的数字的顺序是？

答案：1 4 2 3