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的完成。

async function execute() {
    try {
        console.log("异步方法");
    } catch (error) {
        console.error('Error:', error.message);
    }
}

　　　　2.2、await 关键字　　

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

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

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

二、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的结合使用更能满足业务需要，也更加方便。