async函数其实它就是 Generator 函数的语法糖,至于它跟Generator 有什么区别、优势在哪里、基本用法、语义等直接去看文档会更加容易理解。这篇文章主要讲的是，如果首页中发生多个请求我们怎么使用async函数处理

如果我们需要有一下请求接口列表

[
  "getRequest/getItem/1",
  "getRequest/getItem/2",
  "getRequest/getItem/3",
  "getRequest/getItem/4",
  "getRequest/getItem/5",
  "getRequest/getItem/6",
]

串行

await axios.get("getRequest/getItem/1")
await axios.get("getRequest/getItem/2")

然后我们再来看一下并行。针对上面串行的例子，我们换一种写法便可以实现并行。

const res1 = axios.get("getRequest/getItem/1")
const res2 = axios.get("getRequest/getItem/2")
const r1 = await res1;
const r2 = await res2;

现在看起来似乎实现了我们想要的简单并行发送请求，但是这里需要注意的点是，如果请求有错误的时候的处理。

await axios.get("getRequest/getItem/1") // 出错了
await axios.get("getRequest/getItem/2") // 不执行
await axios.get("getRequest/getItem/3") // 不执行
await axios.get("getRequest/getItem/4") // 不执行
await axios.get("getRequest/getItem/5") // 不执行
await axios.get("getRequest/getItem/6") // 不执行

那么需要用trycatch包裹处理异常

try
{
    await axios.get("getRequest/getItem/1") // 出错了
    await axios.get("getRequest/getItem/2") // 执行
    await axios.get("getRequest/getItem/3") // 执行
    await axios.get("getRequest/getItem/4") // 执行
    await axios.get("getRequest/getItem/5") // 执行
    await axios.get("getRequest/getItem/6") // 执行
}
catch (err)
{
    console.log(err)
}

使用async函数实现多个请求并发

思考上面的6个请求都是异步请求相互不依赖的，但是上面这样写就继发请求了要等上一个await请求结束才开始下一个请求，这样比较耗时。

解决方案

通过Promise.all实现并发请求，它们同时触发缩短程序的执行时间。

代码如下（示例）：

注意：await必须放在async函数里面

const p1 = axios.get("getRequest/getItem/1")
    const p2 = axios.get("getRequest/getItem/2")
    const p3 = axios.get("getRequest/getItem/3")
    const p4 = axios.get("getRequest/getItem/4")
    const p5 = axios.get("getRequest/getItem/5")
    const p6 = axios.get("getRequest/getItem/6")

    // 写法一
    let [cache1, cache2, cache2, cache3, cache4, cache5, cache6] =
    await Promise.all(p1, p2, p3, p4, p5, p6)

    // 写法二

    const r1 = await p1
    const r2 = await p2
    const r3 = await p3
    const r4 = await p4
    const r5 = await p5
    const r6 = await p6