【九月打卡】第4天 前端工程师2022版 async/await处理继发和并发

课程名称：await 函数用法

课程章节：继发和并发

课程讲师： Alex

课程内容：

为什么要处理并发和继发

因为场景需求不同，所以需要采取不同的方式来处理数据，那么，就有继发和并发两种方式处理方式，其中继发一般是指需要拿到上一个网络请求返回的数据后，再根据返回的数据进行下一个网路请求，并发指的是同时发送多个网络请求。以前是使用Promise来处理这些问题，后来es的新语法中引入了async/await，所以更推荐使用async/await语法替代来实现这个效果，让代码书写起来更加简洁，易读。

1、继发

一个执行完再执行下一个。

案例参考广告显示、隐藏。

 // 1.使用 async/await 处理继发问题
      function wait(ms) {
        return new Promise(resolve => {
          setTimeout(resolve, ms);
        });
      }
      function getJSON(url) {
        return new Promise(resolve => {
          const xhr = new XMLHttpRequest();

          xhr.addEventListener(
            'load',
            async () => {
              if (
                (xhr.status >= 200 && xhr.status < 300) ||
                xhr.status === 304
              ) {
                // 模拟网络延迟
                await wait(1000);
                resolve(xhr.response);
              }
            },
            false
          );

          xhr.open('GET', url, true);

          xhr.responseType = 'json';

          xhr.send(null);
        });
      }
      
      //      (async () => {
      //  const url = 'https://www.imooc.com/api/http/search/suggest?words=';

      //  // const result = await getJSON(`${url}js`);
     //   // console.log(result);
      //  const { data } = await getJSON(`${url}js`);
      //  console.log(data);

      //  const result = await getJSON(`${url}${data[0].word}`);
     //   console.log(result);
    //  })();

2、并发

不需要等上一个只执行完，下一个才执行。可以同时执行。

处理异步操作时，如果不存在继发关系，最好让它们并发执行。

可以先执行异步操作，再 await 等待结果；

也可以通过 Promise.all 让异步操作并发执行；

// 2.使用 async/await 处理并发问题
      // 处理异步操作时，如果不存在继发关系，最好让它们并发执行
      // 可以先执行异步操作，再 await 等待结果
      // 也可以通过 Promise.all 让异步操作并发执行
      (async () => {
        const url = 'https://www.imooc.com/api/http/search/suggest?words=';

        // 继发
        // const { data } = await getJSON(`${url}js`);
        // console.log(data);
        // const result = await getJSON(`${url}json`);
        // console.log(result);

        // 并发
        // const jsPromise = getJSON(`${url}js`);
        // const jsonPromise = getJSON(`${url}json`);
        // const jsResult = await jsPromise;
        // const jsonResult = await jsonPromise;
        // console.log(jsResult, jsonResult);

        // Promise.all 并发
        // Promise.all([getJSON(`${url}js`), getJSON(`${url}json`)]).then(
        //   datas => {
        //     console.log(datas);
        //   }
        // );

        const datas = await Promise.all([
          getJSON(`${url}js`),
          getJSON(`${url}json`)
        ]);
        console.log(datas);
      })();

课程收获：

老师讲的非常细致，通俗易懂。这一节学的是 用async/await解决继发和并发问题，通过学习我了解了为什么要解决继发和并发的问题 ，但是并不是很理解，再复习复习，期待明天的学习 。