简单易懂的赘述promise与async/await的结合使用

发布于:2025-06-06 ⋅ 阅读:(25) ⋅ 点赞:(0)

1.Promise和async/await的作用

  • Promise:是一种处理异步操作的对象,它表示一个尚未完成但预期会完成的操作。Promise 有三种状态:

    • Pending(进行中):初始状态,既不是成功,也不是失败。

    • Fulfilled(已成功):操作成功完成。

    • Rejected(已失败):操作失败。

  • async/await:是基于 Promise 的语法糖,让异步代码看起来像同步代码,更易于理解和维护。

2.promise基础用法:

 const promise = new Promise(function(resolve, reject) {
   // ... some code
 ​
   if (/* 异步操作成功 */){
     resolve(value);
   } else {
     reject(error);
   }
 });

3.Promise与async/await结合使用

示例

 // 创建一个 Promise
 function fetchData() {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
             const data = "这是异步获取的数据";
             resolve(data); // 成功时调用 resolve
         }, 2000);
     });
 }
 ​
 // 使用 async/await 调用 Promise
 async function getData() {
     try {
         console.log("开始获取数据...");
         const result = await fetchData(); // 使用 await 等待 Promise 完成
         console.log("获取到的数据:", result);
     } catch (error) {
         console.error("获取数据失败:", error);
     }
 }
 ​
 // 调用 async 函数
 getData();

输出结果

 开始获取数据...  
(2秒后)  
获取到的数据: 这是异步获取的数据

总结:

  • promise函数的两个参数resolve和reject是两个函数。

  • resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 fulfilled),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

  • reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

  • async 关键字用于声明一个函数是异步的,函数内部可以使用 await

  • await 只能在 async 函数中使用,如果在非 async 函数中使用 await,会报语法错误

  • async 声明的函数会返回一个 Promise 对象。

  • await 用于等待 Promise 完成,它会暂停当前函数的执行,直到 Promise 的状态变为 FulfilledRejected,但不会阻塞主线程。主线程可以继续执行其他任务。

  • 如果 Promise 成功,await 会将 Promise 的结果赋值给变量(这里是 result)。

  • 如果 Promise 失败,await 会抛出错误,可以通过 try...catch 捕获

  • 使用 async/await 时,需要将函数声明为 async,然后用 await 等待 Promise 完成。

  • 使用 async/await 时,一定要用 try...catch 捕获错误,否则如果 Promise 失败,可能会导致程序崩溃。

4.再举一个使用到reject的例子

function fetchUserData(userId) {
     return new Promise((resolve, reject) => {
         // 模拟异步操作,比如网络请求
         setTimeout(() => {
             // 假设服务器返回的结果
             const serverResponse = {
                 success: userId > 0, // 假设 userId > 0 时请求成功,否则失败
                 data: {
                     name: "Alice",
                     age: 25
                 }
             };
 ​
             if (serverResponse.success) {
                 // 如果成功,调用 resolve
                 resolve(serverResponse.data);
             } else {
                 // 如果失败,调用 reject
                 reject("用户ID无效,无法获取数据");
             }
         }, 2000);
     });
 }
 ​
 async function getUserData(userId) {
     try {
         console.log("开始获取用户数据...");
         const userData = await fetchUserData(userId); // 使用 await 等待 Promise 完成
         console.log("获取到的用户数据:", userData);
     } catch (error) {
         // 如果 Promise 被 reject,错误会在这里被捕获
         console.error("获取用户数据失败:", error);
     }
 }
 ​
 // 测试成功的情况
 getUserData(1);
 ​
 // 测试失败的情况
 getUserData(-1);

输出结果:

  1. 成功

 开始获取用户数据...  
(2秒后)  
获取到的用户数据: { name: 'Alice', age: 25 }
  1. 失败

     开始获取用户数据...  
    (2秒后)  
    获取用户数据失败: 用户ID无效,无法获取数据
    

网站公告

今日签到

点亮在社区的每一天
去签到