vue3项目使用async/await搭配promise使用过程
更新时间：2026年06月30日 10:04:20 作者：浅浅一笑^*^
这段文章详细解释了Async/await在JavaScript中的应用,强调了async/await简化异步编程的重要性,并通过实例展示了如何在Vue 3项目中应用这些特性以提升代码效率和可性性
vue3使用async/await搭配promise使用
项目中通过
Async
[async_function声明用于定义一个返回AsyncFunction对象的异步函数。
异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的Promise返回其结果。
async/await
async/await是基于Promise的，是进一步的一种优化。不过再写代码的时候，Promise本身的API出现得很少，很接近同步代码的写法。
async只是表明里面可能有异步过程，里面可以有await关键字,如果没有async函数本身会马上返回，不会阻塞当前线程。它的函数的返回值是一个Promise对象。
- 当return new Promise();则直接处理promise对象
- 当return data;则相当于Promise.resolve(data);还是一个Promise对象
两者都需要用用.then(data => { })函数处理。
await的是resolve(data)消息，并把数据data返回。比如，下面代码中，当Promise对象由Pending变为Resolved的时候，变量a就等于data；
然后再顺序执行下面的语句`console.log(a);
const a = await new Promise((resolve, reject) => {
// async process ...
return resolve(data);
});
console.log(a);
async/await
async作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行。
async函数返回一个Promise对象（如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成Promise对象），所以在没有await的情况下执行async函数，它会立即执行，并且绝不会阻塞后面的语句，这和普通返回Promise对象的函数并无二致。
vue3在实际项目中使用案例如下:
//引入api
import { commonMethods } from "@/api/customer/new";
//_f封装方法 调用api接口
const _f=()=>{
return new Promise(resolve=>{
commonMethods().then(res=>{
const code = res.code
const data = res.lists
if(code === 200){
resolve(data)
}
})
})
};
const actionPage = async () => {
let data=await _f();
console.log(data,'拿到同步的数据做操作')
};
actionPage();//初始加载
记录一下!!!
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
打包压缩成zip的东西,再解压,很麻烦,本文主要介绍了vue中预览zip的实现示例,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了vue实现数字+英文字母组合键盘功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
这篇文章主要介绍了Vue实现Tab标签路由效果，并用Animate.css做转场动画效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最近做项目遇到一个需求，需要制作一个定制化的日历组件，本文主要介绍了从零写vue日历组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了实用的 vue tags 创建缓存导航的过程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
在不久之前,看到一个比较有意思的小程序,就是静神木鱼,可以实现在线敲木鱼,自动敲木鱼,手盘佛珠,静心颂钵的，下面就来揭秘如何实现这个小程序中敲木鱼的累加向上漂浮动画，需要的可以参考一下2022-11-11
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件，BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。本文基于better-scroll 实现歌词联动功能，感兴趣的朋友跟随小编一起看看吧2020-05-05
vue2响应式原理之Object.defineProperty()方法的使用
这篇文章主要介绍了vue2响应式原理之Object.defineProperty()方法的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue项目动态路由刷新界面白屏undefined问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-07-07
这篇文章主要介绍了浅谈vue 单文件探索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论