Promise 基础
Promise
是JavaScript中用于处理异步操作的一个关键概念。它代表了一个尚未完成但预期在将来完成的操作。使用Promise,可以避免所谓的“回调地狱”,即多层嵌套的回调函数,从而使代码更加清晰和易于维护。
代码示例:创建一个基本的Promise
let promise = new Promise(function(resolve, reject) {// 异步操作代码setTimeout(() => {resolve("操作成功");}, 1000);
});promise.then((value) => {console.log(value); // 输出:操作成功
});
Promise 的状态
一个Promise有三种可能的状态:
- pending(待定) :初始状态,既不是成功,也不是失败。
- fulfilled(已实现) :意味着操作成功完成。
- rejected(已拒绝) :意味着操作失败。
代码示例:展示不同状态的Promises
let fulfilledPromise = Promise.resolve('成功');
let rejectedPromise = Promise.reject('失败');fulfilledPromise.then(value => console.log(value)); // 输出:成功
rejectedPromise.catch(error => console.log(error)); // 输出:失败
链式调用和错误处理
Promise
的另一个优点是可以通过链式调用.then()
和.catch()
方法来处理复杂的异步流程。
代码示例:展示链式调用和错误处理
new Promise((resolve, reject) => {setTimeout(() => resolve(1), 1000);
})
.then(result => {console.log(result); // 输出 1return result * 2;
})
.then(result => {console.log(result); // 输出 2return result * 3;
})
.then(result => {console.log(result); // 输出 6return result * 4;
})
.catch(error => {console.log('捕获到错误:', error);
});
Async 函数
通过在函数声明前加上async
关键字,可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()
和.catch()
来处理它们的结果。
代码示例:创建一个async函数
async function asyncFunction() {return "异步操作完成";
}asyncFunction().then(value => console.log(value)); // 输出:异步操作完成
Await 关键字
await
关键字只能在async
函数内部使用。它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。
代码示例:在async函数中使用await
async function asyncFunction() {let promise = new Promise((resolve, reject) => {setTimeout(() => resolve("完成"), 1000)});let result = await promise; // 等待,直到promise解决 (resolve)console.log(result); // "完成"
}asyncFunction();
错误处理
在async/await
中,错误处理可以通过传统的try...catch
语句实现,这使得异步代码的错误处理更加直观。
代码示例:使用try...catch处理错误
async function asyncFunction() {try {let response = await fetch('http://example.com');let data = await response.json();// 处理数据} catch (error) {console.log('捕获到错误:', error);}
}asyncFunction();