Promise、async和await

简介: Promise、async和await

Promise、async和await

date: 2023-6-13 22:34:12

title: Promise、async和await

categories:

  • JavaScript
    tags:
  • 异步
  • js


Promise、async和await


async和await

function getName() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("John Doe");
    }, 2000);
  });
}
// 被async修饰的函数, 总是返回一个 promise, 其值被包装在一个Promise对象中返回
async function getAge() {
  return 25;
}

function getPwd() {
  return Promise.resolve(123456);
}

// await: 让 JavaScript 引擎等待直到 promise 完成(settle)并返回结果
// 比如获取异步函数(axios、ajax)中得到的值
async function test() {
  const name = getName();
  const name1 = await getName();  //  仅允许在异步函数和模块顶级使用 "await" 表达式。
  console.log(name); // Promise { 'John Doe' }
  console.log(name1); // John Doe

  const age = getAge();
  const age1 = await getAge();
  console.log(age);  // Promise { 25 }
  console.log(age1);  // 25
    
  const pwd = getPwd();
  const pwd1 = await getPwd();
  console.log(pwd); // Promise { 123456 }
  console.log(pwd1); // 123456
}

test();

Promise

/******************使用回调函数 操作异步函数中获取的值********************************************************** */

function getName(callback) {
  setTimeout(() => {
    callback("John Doe");
  }, 2000);
}
getName(name => {
  console.log(name);
});

/*******************使用 promise 操作异步函数中获取的值********************************************************* */

function getAge() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(18);
    }, 2000);
  });
}

getAge()
  .then(age => {
    // 使用 promise 操作异步函数中获取的值
    console.log(age, 1);
    return age; // 传递给下一个 then, promise链
  })
  .then(age => {
    console.log(age, 2);
    return age;
  });

/******************** 一个Promise对象可以做什么? ******************************************************** */

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("John Doe");
    reject("Error");
  }, 2000);
});

promise
  // 捕获 resolve 中的内容
  .then(name => {
    console.log(name);
  })
  // 捕获 reject 中的内容
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    // 无论 resolve 或 reject 都会执行
  });
相关文章
|
24天前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
25 1
|
11天前
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
28 5
|
24天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
26 1
|
2月前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
2月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
2月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
21 0
|
3月前
|
前端开发 JavaScript
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
该文章教授了如何使用Promise和async/await来解决异步编程问题,从而避免回调地狱,使代码更加清晰和易于管理。
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
|
7月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
67 1
|
7月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
103 4
|
7月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。

热门文章

最新文章