async 和 await
特点
- 异步、非阻塞；
- 基于Promise实现的（强调：不能用于普通的回调函数）；
- 简洁明了，异步编程新方式。
注意
await外层一定要有async包裹，不可单独使用；
为何使用
- 代码简洁，不再使用
.then()来包裹了，类似写同步代码，逐行编写代码即可- 如果后台返回的
httpcode非两百的同时你又想处理里面的数据，必须在.catch()中处理JSON.parse的错误，但是如果使用try/catch加async/await处理起来就异常便捷
// 示例
const fetchData = async () => {
try {
const data = await getList();
console.log(data);
} catch (err) {
console.log(err);
}
};
如何代替
<script>
export default {
methods: {
// 可能以前你会这么调用
fetchData () {
getUserInfo().then((data) => {
const data = data
if (data.id) {
getList(data.id).then((res) => {
if (res.length > 0) {
getOtherList().then((response) => {
this.list = response.list
})
}
})
}
})
},
// 现在可以这么调用
async fetchData () {
const { id } = await getUserInfo();
if (id) {
const res = await getList();
if (res.length > 0) {
const { list } = await getOtherList();
this.list = list
}
}
}
}
}
</script>
配合 try/catch 用法
// promise写法
checkDataIsSaved({cancelButtonText} = {cancelButtonText: "暂不保存"}) {
return new Promise(async (resolve, reject) => {
if (!equalsObj(this.oldTableData, this.tableData)) {
this.$confirm(
"检测到未保存的内容，是否在离开页面前保存修改？",
"确认信息",
{
distinguishCancelAndClose: true,
confirmButtonText: "保存",
cancelButtonText: cancelButtonText,
type: "warning",
},
)
.then(() => {
this.ClickFn()
resolve();
})
.catch((action) => {
if (action === "cancel") {
resolve();
}
if (action === "close") {
throw new Error("取消成功！");
}
});
} else {
resolve();
}
});
}
// 现在写法
async checkDataIsSaved({cancelButtonText} = {cancelButtonText: "暂不保存"}) {
if (!equalsObj(this.oldTableData, this.tableData)) {
try {
await this.$confirm(
"检测到未保存的内容，是否在离开页面前保存修改？",
"确认信息",
{
distinguishCancelAndClose: true,
confirmButtonText: "保存",
cancelButtonText: cancelButtonText,
type: "warning",
},
);
}
catch (err) {
if (err === "close") {
throw new Error("取消成功！");
}
}
if (data === "confirm") {
await this.ClickFn();
}
}
}
其他的替代使用
- 如果代码中有使用到
.finally()方法，try/catch同样也有try { } catch { } finally { }2.如果需要使用
Promise.all()，无须担心，在调用方法前全部加上await平铺开了写
