首页 > 其他分享 >vue中Promise { pending }是什么?为何会出现这种状态,怎么解决这种问题?

vue中Promise { pending }是什么?为何会出现这种状态,怎么解决这种问题?

时间:2022-10-12 10:55:33浏览次数:75  
标签:vue console log res Promise table id pending

首先你需要知道 promise 要用then接收或者async await
例如:a() 是一个Promise封装的方法

 

// 定义一个变量直接a() 赋值给 b
let b = this.a()
console.log(b)  //这里就会返回 Promise {<pending>}

第一种方式 then 接收 ,也就是收把所需数据在then中得到,后续逻辑也只能在then中实现

let b = this.a()
.then(res =>{
	//.then是接收正确返回的信息
	console.log(res) // {...}
})
.catch(err =>{
	// .catch 返回报错信息
	console.log(err)
})

第二种方式 async await接收:

async c(){
	let b = await this.a()
	console.log(b)  // 现在就是正确返回了 {...}
	
}

这里要注意的是 async 和 await 必须是一起的


这里说下为什么会这样???

Promise是异步执行的, 什么叫异步呢, 就是你以为代码是一行执行完才执行下一行吗? 不是的, 你promise还没执行then的时候,就开始执行下一行了,导致获取的数据出现pending状态

比如以下用法是有问题的:

let table_id = getTableIdByColumnId(that,id).then(res => {
      return res.data.table_id
    });
goToTableDetail(that,table_id);

then还没有return时候,已经开始执行goToTableDetail(that,table_id);,导致table_id 为object 出现pending情况。

正确用法:

getTableIdByColumnId(that,id).then(res => {
      console.info(res);
      goToTableDetail(that,res.data.table_id);
    });

 

标签:vue,console,log,res,Promise,table,id,pending
From: https://www.cnblogs.com/wang3680/p/16783734.html

相关文章

  • Vue3中的单击双击事件
    <scriptsetup>import{ref}from'vue'lettimer=ref('')consthandleClick=()=>{if(timer.value){clearTimeout(timer.value)}......
  • Vue里面父组件嵌套子组件的生命周期
     最常见的4种状态1.Creation2.Mounting3.Updating4.Unmouting 通常create用来放API的如果是在Mount是挂载后操作DOM的   我们搞清楚他的生命周期顺序,父......
  • vue同时获取select的id和value
    <template><divclass="select1"><selectv-model="selectClassEnd"@change="selectClass($event)"><optionvalue="NONE">未选择</option><option......
  • vue中自己编写一个loader
    以一个解析pdf的loader为例首先在vue.config.js添加rule解析规则,1、test表示要解析的文件类型为pdf文件。2、use表示要使用的loader的位置,如果是通过npm安装的loader插......
  • 【精品】vue3中setup语法糖下通用的分页插件
    注意:本博客理论基础:https://blog.51cto.com/lianghecai/5743179效果自定义分页插件:PagePlugin.vue<scriptsetuplang="ts">//total:用来传递数据总条数//pageSize......
  • vue脚手架
    {path:"/user",name:"user",component:()=>import(xxx)}脚手架基于node的环境创建复杂vue项目的模板安装nodejs安装脚手架全局安装npmi-g@vue/cli检......
  • vue-router_学习笔记
    1.动态导入路由模块import{createRouter,createWebHashHistory,RouteRecordRaw}from"vue-router";//*导入所有routerconstmetaRouters=import.meta.glob(......
  • 前端面试总结15-vue高级特性
    1.自定义v-model:    2.$nextTick与refsVue是异步渲染,data改变后Dom不会立即渲染,$nextTick会在DOM渲染之后被触发,以获取最新的DOM节点refs用于获取dom节点 ......
  • 前端_vue3引入Element-plus
    element-plus官网:https://element-plus.gitee.io/zh-CN/component/button.html1、安装element-plusnpminstallelement-plus-D2、在index.js中导入element-plusim......
  • vue下载blob无法获取响应头里面的Content-Disposition来提取文件名 --导出完成代码
    exportClick(){//导出letpar={}downAxiosFile('/personnel/change/perUser/exportXls',par).then((res)=>{let{data}=res;......