vue中then后的返回值解析

目录
  • then后的返回值
  • 获取.then()中的返回值
    • 解决方法如下
    • 调用此方法

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啦

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue中this.$emit()的返回值是什么

    vue中的三大属性:属性 .事件.插槽,---事件 在事件中有 普通事件:@click/@input/@change/@xxx...事件: 修饰符事件:@input.trim,@click.stop,@submit.prevent...一般用于原生html元素: 答:在vue中this.$emit(); 返回值是this; 代码示例: 在子组件中:Event.vue:接收通过父组件传递过来的props:{name:String} 属性: 在input 标签中: value=name; 绑定nam

  • 详解Vue返回值动态生成表单及提交数据的办法

    目录 主要解决的问题 一.后端返回的数据,提交到后端的数据格式如下: 二.vue前端代码如下: 总结 主要解决的问题 1.vue在循环的时候需要动态绑定不同的v-model:vue动态的表单,数据怎么绑定呢? 2.动态表单上所有name属性对应的键值对的形式提交到后端 一.后端返回的数据,提交到后端的数据格式如下: // 后端返回的数据,根据返回类型用对应的组件 [ { "componentType": "input", "componentName&qu

  • vue fetch中的.then()的正确使用方法

    先看一段代码: fetch('http://localhost:3000/books?id=123456',{ method:'get' }) .then(function(value1){ console.log(value1); return 'hello'; }) .then(function(value2){ console.log(value2); return 'HelloWorld'; }) /* .then(function(data){ console.log(data); r

  • Vue的export default和带返回值的data()及@符号的用法说明

    Vue的export default和带返回值的data()及@符号的用法说明

    目录 export default和带返回值data()及@符号用法 export和export default的使用 export的使用 export default的使用 export default和带返回值data()及@符号用法 一直以来很费解为什么vue组件有的写成export default,有什么用? 声明一个vue,相当于 new Vue({}) 达到可复用的目的,也就是说,export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件中的方法和变

  • vue中then后的返回值解析

    目录 then后的返回值 获取.then()中的返回值 解决方法如下 调用此方法 then后的返回值 Promise 中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他返回一个有效数据之后再进行下一步处理 可以使用 async 和 await来得到我们的返回值 在vue 中的函数加上async async del(id){       var that=this              var params={               sensor

  • 解决nodejs中使用http请求返回值为html时乱码的问题

    今天用nodejs进行http请求时返回的数据是一个html文件,然后我还是按照以前解析json数据的方法.果不其然报错了:SyntaxError: Unexpected token  in JSON at position 0 没办法,只好换一种方法,将接受到的Buffer对象toString,然后打印出来发现是乱码. 第一感觉是编码问题,google一下然后看官方文档,总结三种方法: 1.toString 加编码格式作为参数. 2.使用iconv-lite 改变编码. 3.使用cheerio

  • 详解C语言函数返回值解析

    详解C语言函数返回值解析 程序一: int main() { int *p; int i; int*fun(void); p=fun(); for(i=0;i<3;i++) { printf("%d\n",*p); p++; } return 0; }; int* fun(void) { static int str[]={1,2,3,4,5}; int*q=str; return q; } //不能正确返回 虽然str是在动态变量区,而该动态变量是局部的,函数结束时不保留的.

  • 浅谈Java中的this作为返回值时返回的是什么

    浅谈Java中的this作为返回值时返回的是什么

    有时会遇到this作为返回值的情况,那么此时返回的到底是什么呢? 返回的是调用this所处方法的那个对象的引用,读起来有点绕口哈,有没有想起小学语文分析句子成份的试题,哈哈. 一点点分析的话,主干是"返回的是引用": 什么引用呢?"那个对象的引用": 哪个对象呢?"调用方法的那个对象": 调用的哪个方法呢?"调用的是this所位于的方法":这样就清楚了. 再总结一下就是,this作为返回值时,返回的是调用某方法的对象的引用,这

  • Python 中的参数传递、返回值、浅拷贝、深拷贝

    1. Python 的参数传递 Python的参数传递,无法控制引用传递还是值传递.对于不可变对象(数字.字符.元组等)的参数,更类似值传递:对于可变对象(列表.字典等),更类似引用传递. def fun1(n): print(n) # n在没修改前,指向的地址和main函数中n指向的地址相同 n = 20 # n在修改后,指向的地址发生改变,相当于新建了一个值为20的参数n def fun2(l): print(l) # l在没修改前,指向的地址和main函数中l指向的地址相同 l = [5,

  • 在vue中实现简单页面逆传值的方法

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和

  • Vue中如何使用Map键值对传参详析

    目录 Vue里使用Map键值对传参 补充:vue遍历Map,Map在vue中的使用方法 总结 Vue里使用Map键值对传参 问题描述:在参数传递时时候Map键值对key:value的形式进行传参. 1.date数据区定义声明map变量和中间数据变量temp: data(){ return{ //其他代码 map:'', temp:[] } }, 2.methods方法区接口传值:声明map为Map变量,接收接口传过来的key数据生成表单项数据项: this.map=new Map() 即: //

  • 老生常谈javascript中逻辑运算符&&和||的返回值问题

    今天在做逻辑运算符的时候遇到一个小问题一直转不过弯来,var a=(undefined&&123)||(3||5)的返回值是什么? 首先是||的返回值问题: ||的返回值会返回最早遇到非以下类型的值: NaN null undefined 0 false; 所以3||5返回的是3: 如果||左右两边都是以上类型的值时,会返回最后一个 如 var a=0||null||undefined则a返回的值是undefined; 其次是&&的返回值问题: &&的返回值

  • 关于JS中match() 和 exec() 返回值和属性的测试

    关于JS中match() 和 exec() 返回值和属性的测试

    语法: exec() : RegExpObject.exec(string) match() : stringObject.match(string) stringObject.match(regexp) 知识点: exec() 是RegExp对象的方法,而 match() 是String对象的方法. 都会返回包含第一个匹配项信息的数组:或者在没有匹配项的情况下返回null. 返回的数组虽然是Array 的实例,但包含两个额外的属性:index 和 input.其中,index 表示匹配项在字符

随机推荐