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