async/await 和 Promise的用法

一、async、await、Promise 介绍  

  1、Promise 的使用和介绍  

    1.1、Promise 的介绍

      Promise 是一种用于处理异步操作的对象。它代表了一个在未来可能完成的操作及其结果。基本的 Promise 状态有:   

        Pending(进行中): 初始状态,操作尚未完成。

        Fulfilled(已成功): 操作完成,结果成功。

        Rejected(已失败): 操作完成,结果失败。

    1.2、Promise 的使用    

      一个 Promise 对象由一个函数初始化,该函数接受两个参数:resolve 和 reject。可以使用 then 和 catch 方法来处理 Promise 的结果或异常处理。

const promise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        const result = true; //处理业务逻辑
        if (result) {
            resolve("返回值"); // 业务逻辑执行成功后,返回值
        } else {
            reject(new Error('失败错误信息')); // 失败,返回错误
        }
    }, 3000);
});

promise.then(result => {
        console.log('Result:', result); // 这里result就是 resolve返回的值
    })
    .catch(error => {
        console.error('Error:', error.message);
    });

    1.3、Promise.all 和 Promise.race 是两个有用的方法。    

      Promise.all: 接受一个 Promise 数组,当所有 Promise 都完成时,它返回一个新的 Promise,其结果是所有 Promise 的结果组成的数组。如果任何一个 Promise 失败,则返回的 Promise 也会失败。

      Promise.race: 接受一个 Promise 数组,返回一个新的 Promise,该 Promise 会在第一个 Promise 完成或失败时完成,谁先完成就返回谁。

async function ClickMe() {
     const [exec1, exec2, exec3] = await Promise.all([
         execute1(),
         execute2(),
         execute3()
     ]);
 }
 async function ClickMe() {
     await Promise.all([execute1, execute2, execute3])
         .then(results => {
             console.log(results);//输出所有执行的结果
         })
         .catch(error => {
             console.error('Error:', error);
         });
 }
 async function ClickMe() {
     await Promise.race([execute1, execute2, execute3])
         .then(result => {
             console.log(result); // 输出先执行完毕的结果
         })
         .catch(error => {
             console.error('Error:', error);
         });
 }
 async function execute1() {
     return 1;
 }
 async function execute2() {
     return 2;
 }
 async function execute3() {
     return 3;
 }

  2、async 和 await的介绍和使用    

    async 和 await 是处理 Promise 的语法糖,使得异步代码看起来像是同步的。async/await 的线性结构更符合人类的阅读习惯 —— 被广泛使用。

    2.1、async 函数 

     async 关键字用于定义一个异步函数,异步函数总是返回一个 Promise对象。即使你在 async 函数中返回一个普通值,它也会被包装成一个 Promise。在async函数内部,可以使用await关键字等待Promise的完成。

1 async function execute() {
2     try {
3         console.log("异步方法");
4     } catch (error) {
5         console.error('Error:', error.message);
6     }
7 }

    2.2、await 关键字  

      await 关键字只能在 async 定义的异步函数中使用。它会暂停 async 函数的执行,直到 Promise 被解决或拒绝。await表达式的值就是Promise resolve的结果。

      使用try/catch 语句来捕获 async 函数中的错误

1 async function execute() {
2     try {
3         const result = await executeOrder();//处理业务逻辑
4         console.log("异步方法");
5     } catch (error) {
6         console.error('Error:', error.message);
7     }
8 }

二、async、await、Promise 使用场景

 

async function startUpload() {
    var validFiles = [];
    const uploadPromises = validFiles.map(file => { return this.uploadFile(file); });
    const results = await Promise.all(uploadPromises);
}
// 单个文件上传
async function uploadFile(fileItem) {
    // 实际项目中应使用真实上传接口
    var body = await getBase64(fileItem);
    var result = uploadData(fileItem, body);
}
async function getBase64(file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsDataURL(file.file);
        reader.onload = function (res) {
            if (res.target.result) {
                var result = res.target.result.substring(res.target.result.indexOf('base64,') + 7);
                resolve(result); // 成功完成时返回结果
            }
        }
    });
}

 

三、总结

   通常我们在开发过程中,async/await 和 Promise的结合使用更能满足业务需要,也更加方便。

posted @ 2025-08-13 17:15  Dynamics365峰  阅读(19)  评论(0)    收藏  举报