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 都会执行
  });
相关文章
|
3月前
|
前端开发 JavaScript 开发者
前端开发中的异步编程:Promise 和 Async/Await 的比较与应用
在现代前端开发中,异步编程是不可或缺的技术。本文将深入探讨Promise和Async/Await这两种主流的异步编程方式,分析它们的优劣势及在实际项目中的应用场景。通过比较它们的语法、可读性和错误处理机制,帮助开发者更好地选择和理解如何在项目中高效地利用这些技术。
|
2月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
65 1
|
1月前
|
前端开发 JavaScript 开发者
探索前端开发中的异步编程:Promise与Async/Await
在现代前端开发中,处理异步操作是至关重要的。本文将深入探讨异步编程的核心概念,重点比较JavaScript中的Promise与Async/Await两种异步编程方式。通过实例和比较,读者将能够理解这两种方法的优缺点,如何在实际开发中选择适合的异步编程模式,从而编写更简洁、可维护的代码。
|
2月前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
2月前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
36 1
|
2月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
38 1
|
2月前
|
前端开发 小程序 API
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
44 0
|
4月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
50 1
|
4月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
74 4
|
4月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。