网络请求 async 与 await---产品列表渲染

在 JavaScript 中曾学过用 fetch 请求数据，比如一个显示某公司信息的 API：

{
   
  "company": "M厂",
  "slogan": "XXXXXXXX"
}

用fetch 请求数据的代码如下：

fetch(
  'https://www.XXXXXXX'
)
  .then(function(response) {
   
    return response.json();
  })
  .then(function(myJson) {
   
    console.log(myJson);
  });

由于 fetch 返回的是一个 Promise 对象，所以我们在请求数据的时候用了 then 采用平铺式回调的方式，允许我们在数据返回之后再对数据进行 response.json() 处理。

这里就有一个问题，因为 Promise 对象的一个特点是无等待，所以想对返回的数据进行操作，就必须在 then 里处理。假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。那么 then 链就会很长

异步编程终级解决方案 —— async和await。

“异步” async

async 是“异步”的简写，用于申明一个异步 function，而这个 async 函数返回的是一个 Promise 对象。

async function asyncFn() {
  return {
    "company": "M厂",
    "slogan": "XXXXXX"
  };
}

co