假如你正在开发中处理异步任务，好比网络哀求、文件操作，大概用户交互的处理，那么你肯定接触过 Promise 和 Async/Await。它们是当代 JavaScript 异步编程的基石。本文将带你一步步深入了解，帮助你弄清它们的配景、解决的问题以及实际应用。盼望这篇内容不但能帮你理清思绪，还能让你在开发时更得心应手。
一、从回调函数说起
回调函数是异步编程最底子的方式。我们通过把一个函数传递给另一个函数，让它在原函数的任务完成后调用：
- setTimeout(() => {
- console.log("第一步完成");
- setTimeout(() => {
- console.log("第二步完成");
- setTimeout(() => {
- console.log("第三步完成");
- }, 1000);
- }, 1000);
- }, 1000);
二、Promise：解救回调地狱
Promise 是什么？
Promise 是一种异步操作的“管理器”。它将任务的实行过程抽象成一个对象，包含两个核心部分：
- 状态：表示任务当前的进展（pending、fulfilled、rejected）。
- 结果：任务成功后会返回一个获取的数据（通过实行 resolve() 之后返回），失败时则返回一个缘故起因（通过实行 reject() 之后返回）。
这听起来有点抽象，我们用一个简单的例子来说明：
- const fetchData = (url) => {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- if (url) {
- resolve(`数据来自：${url}`); // 成功时返回数据
- } else {
- reject("请求失败：URL 不能为空"); // 失败时返回错误原因
- }
- }, 1000);
- });
- };
- // 使用 Promise
- fetchData("https://api.example.com")
- .then((data) => {
- console.log("成功：", data);
- return fetchData(""); // 模拟错误
- })
- .then((data) => {
- console.log("第二次成功：", data);
- })
- .catch((error) => {
- console.error("失败：", error);
- });
- resolve(value)： 任务成功时调用，value 就是返回的结果。
- reject(reason)： 任务失败时调用，reason 是失败的缘故起因。
- .then() 用来处理成功的结果，而 .catch() 专门用来处理错误。
then() 还支持链式调用，上一个处理返回的成功的结果可以传递给下一个 then()，可以在回调函数的参数位置获取
三、Async/Await：更优雅的异步处理
Promise 虽然解决了回调嵌套的问题，但链式调用依然大概让代码变得不够直观。为了让异步代码看起来像同步代码一样易读，JavaScript 引入了 Async/Await 语法。
Async/Await 是什么？
async 是用来界说一个异步函数的关键字，而 await 则用于暂停代码的实行，等候一个 Promise 解决后继承运行。
- await 关键字的作用：
- await 用于等候一个 Promise 的剖析（fulfilled 状态）或拒绝（rejected 状态）。
- 假如 Promise 成功剖析，await 会返回这个 Promise 的剖析值（成功状态的数据）。
- 假如 Promise 被拒绝，await 会抛出一个异常，必要通过 try...catch 捕获。
- 异步函数的返回值：
- 异步函数（通过 async 界说的函数）本质上会返回一个 Promise。
- 假如异步函数内的全部操作都成功，则返回一个 fulfilled 状态的 Promise，并将 return 的值作为剖析值。
- 假如异步函数中抛出了错误（好比 await 遇到 rejected 的 Promise 或手动抛出异常），则返回一个 rejected 状态的 Promise，其被拒绝的缘故起因是抛出的错误。
举个例子：
- const fetchDataAsync = async (url) => {
- try {
- const data = await fetchData(url); // 等待 Promise 完成
- console.log("成功：", data);
- } catch (error) {
- console.error("失败：", error); // 捕获错误
- }
- };
- fetchDataAsync("https://api.example.com");
- 代码更加直观，异步流程看起来像同步代码。
- 错误处理统一：try...catch 能捕获全部的异常。
在异步函数中通过 await 实行一个能返回 promise对象 的函数之后，假如成功获取了内容，则此异步函数返回成功状态的数据；假如失败，则被 catch 捕获到，整个异步函数将返回一个失败的缘故起因
四、为什么要用 Axios？
在实际开发中，网络哀求是异步任务的典型场景。虽然浏览器原生提供了 fetch API，但它过于简化，好比不支持自动剖析 JSON、全局错误处理等。Axios 是一个基于 Promise 的 HTTP 库，它让网络哀求变得更加优雅。
Axios 的特点：
- 支持自动转换 JSON 数据。
- 更加灵活的哀求设置。
- 支持全局错误处理和哀求/响应拦截。
- Axios 返回一个 promise对象
Axios 的使用：
- const axios = require('axios');
- // 发送 GET 请求
- const fetchDataWithAxios = async () => {
- try {
- const response = await axios.get("https://api.example.com/data");
- console.log("获取的数据：", response.data);
- } catch (error) {
- console.error("网络请求失败：", error.message);
- }
- };
- fetchDataWithAxios();
- axios.interceptors.request.use(
- (config) => {
- console.log("请求发送：", config.url);
- return config;
- },
- (error) => Promise.reject(error)
- );
- axios.interceptors.response.use(
- (response) => response,
- (error) => {
- console.error("全局错误处理：", error.message);
- return Promise.reject(error);
- }
- );
五、怎样选择？Promise、Async/Await 和 Axios 的最佳实践
在实际开发中，发起你灵活搭配使用它们：
- 使用 Promise：适用于简单的异步操作，好比加载一组图片。
- 使用 Async/Await：处理复杂的异步逻辑，保证代码易读性。
- 使用 Axios：替代原生 fetch，轻松管理网络哀求。
好比下面的例子，我们用 Async/Await 搭配 Axios，完成一个串行任务：
- const fetchUserAndOrders = async () => {
- try {
- const user = await axios.get("https://api.example.com/user");
- console.log("用户信息：", user.data);
- const orders = await axios.get(
- `https://api.example.com/orders/${user.data.id}`
- );
- console.log("订单信息：", orders.data);
- } catch (error) {
- console.error("请求失败：", error.message);
- }
- };
- fetchUserAndOrders();
六、总结
- Promise 解决了回调嵌套问题，通过 .then() 和 .catch() 提供链式调用和统一错误处理。
- Async/Await 让异步代码更易读，特别是任务间存在依靠时，配合 try...catch，可大大简化错误处理逻辑。
- Axios 是功能强盛的网络哀求库，特别适合在项目中处理复杂的 API 调用。
盼望这篇内容能帮你重新梳理异步编程的知识！假如你有其他想讨论的编程问题，也接待随时交流！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
