vue中then后的返回值解析

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啦

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读