async 与 await 与 promise的使用

最新推荐文章于 2024-09-10 20:06:46 发布

g_hy1994

最新推荐文章于 2024-09-10 20:06:46 发布

阅读量181

点赞数

分类专栏：通用干货文章标签： javascript es6 css3

本文链接：https://blog.csdn.net/g_hy1994/article/details/112009497

版权

通用干货专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细讲解了async和await关键字在处理Promise时的优势，展示了如何使用它们简化异步操作，并通过例子对比了常规Promise链与async/await的传参方式。同时介绍了定时器模拟异步的情况和两种方法的实践应用。

摘要由CSDN通过智能技术生成

async 与 await 与 promise的使用

async 关键字声明的函数自动变为 promise对象。 return的结果就是promise.resolve()的结果！
await 关键字必须在async中使用！阻塞目前代码（因阻塞代码务必在async中使用！）寓意为等待此函数结果取得结果方得顺畅
promise 常规then关键字链接，传递参数时一般只传递一个res 对象。传递多个参数时较为麻烦~
定时器模仿异步： 输出第一步第二步第三步分别用了多少秒

  function createTime(t) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(t + 1000);
        }, t);
      });
    } 
    function a(t) {
      return createTime(t);
    }
    function b(t) {
      console.log(`第一步用时${t}秒 `);
      return createTime(t);
    }
    function c(t, m) { 
      console.log(`第一步用时${t}秒,第二步用时${m}秒 `);
      return createTime(m);
    }

promise传参输出 （return 很重要必须return才能取得精确值）

const time = 1000;
    a(time)
      .then((res) => {
        return b(res).then((temp) => {
          return [res, temp];
        });
      })
      .then((res) => {
        return c(...res).then((result) => {
          return [...res, result];
        });
      })
      .then((res) =>
        console.log(
          `第一步用时${res[0]}秒,第二步用时${res[1]}秒,第三步用时${res[2]}秒 `
        )
      );

async await 传参输出

/* async await解决Promise传递参数复杂问题 */
async function test() {
      const time1 = await a(time);
      const time2 = await b(time1);
      const time3 = await c(time1, time2);
      const times = [time1, time2, time3];
      return times;
    }
    test().then((res) =>
      console.log(
         `第二步用时${res[0]}秒,第二步用时${res[1]}秒,第三步用时${res[2]}秒 `
      )
    );