ES6-记录下关于fetch和async的优化

需求是按顺序完成异步请求

• 优化前

async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}

• 优化后

async function logInOrder(urls) {
  // 并发读取远程URL
  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  // 按次序输出
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}

• 先以简单例子说下fetch方法

fetch('https://api.example.com/data')
  .then(response => {
    return response.json(); // 返回 Promise
  })
  .then(data => {
    // 在数据准备好后执行操作
    console.log(data);
  });

第一次then只是说明得到响应, 响应体(流)可能还在传输中, 第二次then说明响应体传输和解析完毕

• async和await的含义不再赘述了, 优化前必须等待当请求完全获取响应体才发下一个, 优化后只要得到响应就继续发