学习一下
async、await和Promise
async函数
描述
async
关键字用于声明一个异步函数。当一个函数被声明为异步函数时,它会返回一个Promise对象。即使函数内部没有显式地返回一个Promise,它也会返回一个解析为undefined
的Promise。
async使用
在方法前添加即可,这表明整个方法是一个异步函数,该函数能够返回一个Promise的结果
async initData() {
// 其他业务
}
在调用API返回的数据前添加,getInfo方法本身不会返回Promise结果,而是仅仅在.then()内部处理
getInfo() {
infoApi(this.orgForm.id).then(async (res) => {
let list = res;
})
},
await关键字
描述
它只能在async
函数内部使用。使用await
关键字可以让异步操作看起来像是同步操作一样。
await
关键字用于等待Promise的结果。如果 Promise
被解决(fulfilled),await
表达式的结果就是 Promise
解决的值。如果 Promise
被拒绝(rejected),await
会抛出拒绝的原因,这可以通过在 async
函数中使用 try...catch
结构来捕获。
await使用
前端API自定义及导入
export function getProductFamilyListAPI(params) {
return request({
url: 'data/product/family/list',
method: 'GET',
params
})
}
import { getProductFamilyListAPI } from "@/api/dict/data";
async changeRuleFactor(e,index,item){
// 处理其他业务 todo
let list = await getProductFamilyListAPI();
}
Promise
描述
Promise
是 JavaScript 中用于异步编程的一个对象,它代表了一个最终可能完成(fulfilled)或失败(rejected)的异步操作及其结果值。使用 Promise
,你可以避免复杂的回调地狱(Callback Hell),通过链式调用 .then()
和 .catch()
方法来处理成功和失败的情况。
Promise使用
getSysListMethod() {
new Promise((resolve, reject) => {
getSysListApi().then((data) => {
this.getSysList = data;
resolve(data);// 成功时调用
});
});
},
getUserList() {
return new Promise((resolve, reject) => {
channelUserApi(this.userForm).then((res) => {
this.tableData = res.list
resolve();// 成功时调用
}).catch(() => {
reject();// 失败时调用
});
});
},
三者关系
Promise
是异步操作的基础,它提供了一种处理异步操作的机制。async
函数使得编写异步代码变得更加容易,因为它允许你像写同步代码一样写异步代码。await
用于在async
函数内部等待Promise
的结果,使得代码更加清晰和易于理解。