返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中then后的返回值解析
  • 124
分享到

vue中then后的返回值解析

2024-04-02 19:04:59 124人浏览 独家记忆
摘要

目录then后的返回值获取.then()中的返回值解决方法如下调用此方法then后的返回值 Promise 中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结

then后的返回值

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

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

Vue 中的函数加上async 

async del(id){
      var that=this
   
         var params={
              sensorCommonId:id
            }
           return  DelSensorCommonInfo(params).then(function(res) {
              return Promise.resolve(res.data.Data);     
            });
            
    },

在我们调用所在的函数中也加上 async 在调用del函数时  

async  more(){
 
     var index= await that.del(array[i].SensorCommonId)
 
        console.log(index)
 
}
    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();

获取.then()中的返回值

以上传文件到阿里云为例:

export function uploadObj({ file }, type) {
  let name = `路径名/${Date.parse(new Date()) + file.uid}`; //定义唯一的文件名
  const fileName = type == 'excel' ? name + ".xlsx" : name;
  const ContentType = type == 'excel' ? "text/xml" : "image/jpeg";
  new OSS(conf).put(fileName, file, {
    ContentType: ContentType
  }).then(({ res, url }) => {
    if (res && res.status == 200) {
      this.$message.success("上传成功");
      return url
    }
  }).catch(() => {
    this.$message.error("上传失败");
  });
}

以上代码能实现上传图片/excel到阿里云服务器,上传成功后,阿里云服务会返回一个URL。此时如果直接return url,那么收到的url是undefined。

解决方法如下

export function uploadObj({ file }, type, callback) {
  let name = `路径名/${Date.parse(new Date()) + file.uid}`; //定义唯一的文件名
  const fileName = type == 'excel' ? name + ".xlsx" : name;
  const ContentType = type == 'excel' ? "text/xml" : "image/jpeg";
  new OSS(conf).put(fileName, file, {
    ContentType: ContentType
  }).then(({ res, url }) => {
    if (res && res.status == 200) {
      this.$message.success("上传成功");
      callback(url)
    }
  }).catch(() => {
    this.$message.error("上传失败");
  });
}

调用此方法

this.uploadObj({ file }, "excel", url => this.importData(url));   

传入的第三个参数是回调函数,这样在importData方法中,就可以直接获取到url啦

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue中then后的返回值解析

本文链接: https://lsjlt.com/news/145085.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中then后的返回值解析
    目录then后的返回值获取.then()中的返回值解决方法如下调用此方法then后的返回值 Promise 中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结...
    99+
    2024-04-02
  • vue中then后的返回值实例分析
    这篇文章主要介绍了vue中then后的返回值实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中then后的返回值实例分析文章都会有所收获,下面我们一起来看看吧。then后的返回值Promise 中处...
    99+
    2023-06-29
  • vue parseHTML 函数拿到返回值后的处理源码解析
    目录引言parseStartTag函数返回值handleStartTag源码tagName 及unarySlash调用parser钩子函数引言 继上篇文章: parseHTML 函数...
    99+
    2024-04-02
  • C++中stack的pop()函数返回值解析
    目录stack的pop()函数返回值全部demo分析C++的返回值优化从函数返回值RVOstack的pop()函数返回值 int temp = s.pop(); co...
    99+
    2024-04-02
  • javascript中返回值的示例分析
    小编给大家分享一下javascript中返回值的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!带返回值的函数好吧,我们把alert(sum)一行改成下面的代码:return sum...
    99+
    2024-04-02
  • linux命令返回值的含义解析
    linux命令执行后无论成功与否都有一个返回值: 如果为 0,则表示命令执行成功,其它值则表示错误, 具体的错误码含义如下: "OS error code 1: Operation not permitted" ...
    99+
    2022-06-04
    linux 命令返回值 linux命令的返回值
  • vue parseHTML函数拿到返回值后怎么处理
    今天小编给大家分享一下vue parseHTML函数拿到返回值后怎么处理的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-07-02
  • 在AOP中使用@Around后无返回值如何解决
    这篇文章给大家介绍在AOP中使用@Around后无返回值如何解决,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。改成如下即可:@Around("point_update()")public ...
    99+
    2023-06-06
  • C语言中返回值的示例分析
    这篇文章给大家分享的是有关C语言中返回值的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 函数返回值定义的结构在<cstdlib>,其中有两个成员。为 di...
    99+
    2024-04-02
  • 解析springboot包装controller返回值问题
    1、springboot项目统一包装返回值,通常返回结果包含code、message、data,结构如下 import lombok.AllArgsConstructor; im...
    99+
    2024-04-02
  • 如何解析linux命令返回值的含义
    如何解析linux命令返回值的含义?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。linux命令执行后无论成功与否都有一个返回值:如果为 0,则表示命令执行成功,...
    99+
    2023-06-09
  • C#中ExecuteNonQuery()返回值注意点分析
    在C#中,ExecuteNonQuery()是用于执行不返回结果集的SQL语句(如INSERT、UPDATE、DELETE语句)的方...
    99+
    2023-08-15
    C#
  • C++ 函数的返回值:类型、含义全解析
    c++++函数的返回值类型定义了函数调用的结果,可以是基本类型(如int)或用户定义类型(如类)。返回值的含义取决于函数的目的,可以表示成功/失败、操作结果或其他信息。 C++ 函数的...
    99+
    2024-04-30
    c++ 函数返回值
  • C++中Covariant返回值类型详解
    目录前言什么是协变返回值类型(Covariant)协变返回值类型(Covariant)的作用前言 C++中当子类覆写(override)父类虚函数时,子类函数的返回值类型可以和父类函...
    99+
    2024-04-02
  • vue后台返回base64图片无法显示的解决
    目录vue后台返回base64图片无法显示解决方法如下vue中base64转图片格式vue后台返回base64图片无法显示 关于后台接口返回的图片base64格式页面无法显示的问题,...
    99+
    2024-04-02
  • thinkphp中m方法返回值实例分析
    这篇文章主要介绍了thinkphp中m方法返回值实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇thinkphp中m方法返回值实例分析文章都会有所收获,下面我们一起来看看吧。在thinkphp中,m方法的...
    99+
    2023-06-30
  • Shell中处理方法返回值的示例分析
    这篇文章主要介绍了Shell中处理方法返回值的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。测试程序我们一般通过$来获取上一个语句的输出。看一下下面得测试语句:新建t...
    99+
    2023-06-09
  • PHP返回一个键值翻转后的数组
    这篇文章将为大家详细讲解有关PHP返回一个键值翻转后的数组,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。PHP 键值翻转数组 键值翻转是一种对数组进行的操作,它将数组中的键和值进行交换,生成一个新的数组,...
    99+
    2024-04-02
  • Javathread.isInterrupted()返回值不确定结果分析解决
    目录一、代码二、分析结果三、解决方案一、代码 先上代码(以下这段代码会有多种执行结果) @Test public void test_interrupted_thread() thr...
    99+
    2022-12-14
    Java thread.isInterrupted() Java thread.isInterrupted() 返回值
  • C++中cin的返回值问题
    目录cin的返回值cin流输入的返回值问题cin的返回值 今天在用STL时用到while(cin>>s1>>a>>s2>>b)这样的语...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作