文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中返回结果是promise的处理方式是什么

2023-06-29 20:50

关注

本文小编为大家详细介绍“vue中返回结果是promise的处理方式是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue中返回结果是promise的处理方式是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

返回结果是promise的处理

调用element-ui中提供的方法是,经常返回结果类型对象是promise,

如果某个函数调用的结果打印后返回的是promise,就马上用saync和await进行优化,async放到方法名称的前面,await放到方法里面

对promise的一些理解

1.promise是一种异步解决方案

Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的。Promise中的函数的第一个参数是回调函数,resolve用来触发then里面的代码,第二个参数是回调函数,reject用来触发catch中的代码,throw new Error();也可以触发catch,

<script>new Promise((resolve, reject) =>{    setTimeout(() =>{        //成功的时候调用resolve        resolve('成功data')        //失败的时候调用reject        reject('error message')    }, 1000)}).then((data) =>{    //处理成功后的逻辑    console.log(data);//这个data 是接收的resolve参数--}).catch((err) =>{    console.log(err);})</script>  
p1().then(p2).then(p3)  .then(function(data) {    console.log('data: ' + data);  })  .catch(function(error) {    console.log('error: ' + error);  });  function p1() {  return new Promise(function(resolve, reject) {    console.log('p1 resolved');    resolve(123);  });}  function p2() {  return new Promise(function(resolve, reject) {    console.log('p2 rejected');    reject(456);  });}  function p3() {  return new Promise(function(resolve, reject) {    console.log('p3 resolved');    resolve(789);  });}// 执行结果p1 resolvedp2 rejectederror: 456

2.async await

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

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

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

function doubleAfter2seconds(num) {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve(2 * num)        }, 2000);    } )}//写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用async function testResult() {    let result = await doubleAfter2seconds(30);    console.log(result);}

await 等待后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回。显然await可以修饰axios请求,等待得到结果再往下进行,如: 

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        }

读到这里,这篇“vue中返回结果是promise的处理方式是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯