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 都会执行
});