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 都会执行
  });
相关文章
|
2天前
|
前端开发
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
|
2天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
2天前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
2天前
|
前端开发 JavaScript
在JavaScript中,回调函数、Promise和async/await这三种异步处理机制的优缺点
JavaScript的异步处理包括回调函数、Promise和async/await。回调函数简单易懂,但可能导致回调地狱和错误处理困难。Promise通过链式调用改善了这一情况,但仍有回调函数需求和学习成本。async/await提供同步风格代码,增强可读性和错误处理,但需ES8支持,不适用于并发执行。根据项目需求选择合适机制。
|
2天前
|
前端开发 JavaScript Java
Promise, async, await实现异步编程,代码详解
Promise, async, await实现异步编程,代码详解
21 1
|
2天前
|
JavaScript 前端开发
[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca
[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca
42 0
|
2天前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
16 1
|
2天前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
26 4
|
2天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
2天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async