首页 > 其他分享 >Vue 中 Promise 的then方法异步使用及async/await 异步使用总结

Vue 中 Promise 的then方法异步使用及async/await 异步使用总结

时间:2023-02-21 11:06:20浏览次数:35  
标签:异步 Vue console 函数 await Promise async

转载请注明出处:

1.Promise 的 then 方法使用  

  then 方法是 Promise 中 处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他返回一个有效数据之后再进行下一步处理;

  想了解 Promise 的使用,可以看这篇文章: ​​ES6 中 Promise对象使用学习 ​​

  使用示例:

new Promise(function (resolve, reject) {
resolve(1);
}).then(console.log);

console.log(2);
// 2
// 1

  Promise 的回调函数属于异步任务,会在同步任务之后执行。上面代码会先输出2,再输出1。因为console.log(2)是同步任务,而then的回调函数属于异步任务,一定晚于同步任务执行。  

  但是,Promise 的回调函数不是正常的异步任务,而是微任务(microtask)。它们的区别在于,正常任务追加到下一轮事件循环,微任务追加到本轮事件循环。这意味着,微任务的执行时间一定早于正常任务。

setTimeout(function() {
console.log(1);
}, 0);

new Promise(function (resolve, reject) {
resolve(2);
}).then(console.log);

console.log(3);
// 3
// 2
// 1

上面代码的输出结果是​​321​​​。这说明​​then​​​的回调函数的执行时间,早于​​setTimeout(fn, 0)​​​。因为​​then​​​是本轮事件循环执行,​​setTimeout(fn, 0)​​在下一轮事件循环开始时执行。

所以在 使用Promise 的then方法时,一定要考虑 业务的处理逻辑,是否需要串行执行,如果需要串行执行,就要避免 后续的任务 早于 异步的任务执行结束

2. async await 使用

  使用 async 与 await 可以解决多个异步任务执行时的串行执行,也可以解决 Promise 使用 then 方法 异步执行的流程控制

  可以使用 async 和 await来得到我们的返回值

  • async关键词用于函数上(async函数的返回值是Promise实例对象)
  • await关键子用于async函数当中(await可以得到异步的结果)

Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的。此外,只要在函数前面加上async 关键字,也可以指明函数是异步的。

  async关键字实际是通过Promise实现,如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出错误,那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数(比如内部含有primise),该函数应用async修饰。

  await表示“等待”,修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。

//写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式    
async getUserList(){
const {data: res} = await this.$http.get('users', {
params: this.queryInfo
})
//console.log(res)
if (res.meta.status !== 200) return this.$message.error('获取用户列表失败! ')
this.userlist = res.data.users
this.total = res.data.total
}

3. async/await处理多个异步请求

  • 第一个异步请求的结果
  • 可以作为第二个异步请求内部的参数,进行判断等数据操作。
  • 形成链式关系

  示例:

function getSomething() {
return "something";
}

async function testAsync() {
return Promise.resolve("hello async");
}

async function test() {
const v1 = await getSomething();
const v2 = await testAsync();
console.log(v1, v2);
}

test();

  执行的结果如图所示:

Vue 中 Promise 的then方法异步使用及async/await 异步使用总结_Vue学习使用

 

   这种写法可以保证的执行顺序;

  

 



标签:异步,Vue,console,函数,await,Promise,async
From: https://blog.51cto.com/u_15535797/6076072

相关文章

  • VUEX 的使用学习二: state
    转载请注明出处:state提供唯一的数据资源,所有的共享的数据都要统一放到store中的state中进行存储;状态state用于存储所有组件的数据。管理数据//初始化vuex对象c......
  • vue 中安装并使用echart
    本文为博主原创,转载请注明出处:1.安装echart依赖:安装命令: npminstallecharts--save在vscode的终端窗口进行执行,如图所示: 执行完之后,查看项目中的echart......
  • Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<二>---后端架构完善与接口开发
    数据库准备:在上一次https://www.cnblogs.com/webor2006/p/17114996.html已经将SpringBoot相关的配置环境给搭建好了,接下来则需要为咱们的项目创建一个数据库。1、mysql的......
  • vue 性能优化
    1.图片压缩vue正常打包之后一些图片文件很大,使打包体积很大,使用image-webpack-loader压缩图片,画质有损,8M压缩为1.8M(1)先安装依赖:cnpminstallimage-webpack-loader--s......
  • 4 个 Vue 路由过渡动效
    Vue文件<router-viewv-slot="{Component}"><transitionname="fade"mode="out-in"><component:is="Component"/></transition></router-view......
  • Vue前端框架Element 的form表单项el-form-item的label中空格不起效和多个空格只显示一
    搜索了一下,大部分是说使用slot解决,但是使用&nbsp;&nbsp;只显示一个后又看到一篇文章Vue使用&nbsp空白占位符-钟小嘿-博客园(cnblogs.com)使用转义,但要用v-html,......
  • vue拖拽指令
    Vue.directive('drag',{//1.指令绑定到元素上回立刻执行bind函数,只执行一次//2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象//3.通过......
  • Vue3 - defineProps 设置默认值
    在TS中,仅类型声明的一个缺点defineProps是它无法为props提供默认值。为了解决这个问题,withDefaults还提供了一个编译器宏,同时给出JS默认值的写法<scriptsetuplang="ts......
  • vue3 门户网站搭建2-ngnix
    路由配好了,需要调试下build后是否可用,这时我们需要一个服务端来运行静态网页。官网直接下载一个windows版本的ngnix即可:http://nginx.org/en/download.html 下......
  • 读Java实战(第二版)笔记16_组合式异步编程
    1. 同步API1.1. 阻塞式调用1.2. 调用了某个方法,调用方在被调用方执行的过程中会等待,被调用方执行结束返回,调用方取得被调用方的返回值并继续运行2. 异步API2.1. ......