vue中Promise的使用方法详情

 更新时间:2022年03月04日 11:37:02   作者:kuokay  
这篇文章主要介绍了vue中Promise的使用方法详情,Promise可以说是异步编程的一种解决方法,主要是为了解决代码乱的情景而出现的,下文介绍其具体用法,需要的小伙伴可以参考一下

简介:

promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promise主要是为了解决这种情景而出现的。

一、使用

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

  • 由于ajax异步方式请求数据时,我们不能知道数据具体回来的事件,所以过去只能将一个callback函数传递给ajax封装的方法,当ajax异步请求完成时,执行callback函数。
  • promise对象接受resolve和reject两个参数,当一个异步动作发生时,promise对象会通过resolve完成对动作成功进行解析,reject会捕获这个动作的异常。一个promise对象,通过new Promise().then()执行下一步骤操作。
  • axios is a promise based HTTP client for the browser and node.js。也就是说,使用axios发出请求,难免涉及promise。

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

resolve和reject是两个回调函数,调用resolve会触发then,reject会触发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>  
  • 在一个promise链中,只要任何一个promise被reject,promise链就被破坏了,reject之后的promise都不会再执行,而是直接调用.catch方法。
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的使用方法详情的文章就介绍到这了,更多相关vue中Promise的用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue数据代理的原理和实现

    Vue数据代理的原理和实现

    数据代理是什么?通过一个对象代理,对另一个对象中属性的操作,简单就是说:可以通过 对象b 对 对象a 中的属性进行操作,这里我学到的数据代理是用Object.defineProperty这个方法进行操作
    2022-11-11
  • VUE中watch的详细使用教程(推荐!)

    VUE中watch的详细使用教程(推荐!)

    这篇文章主要给大家介绍了关于VUE中watch的详细使用教程,watch是vue实例的一个属性,主要用来监听数据的变化,并做出一些操作,需要的朋友可以参考下
    2023-08-08
  • Vue如何配置根目录@(引用路径)

    Vue如何配置根目录@(引用路径)

    这篇文章主要介绍了Vue如何配置根目录@(引用路径),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue的传参方式汇总和router使用技巧

    vue的传参方式汇总和router使用技巧

    这篇文章主要介绍了vue的传参方式和router使用技巧,本文给大家列举了好几种传参方式,需要的朋友可以参考下
    2018-05-05
  • vue-router跳转时打开新页面的两种方法

    vue-router跳转时打开新页面的两种方法

    这篇文章主要给大家介绍了关于vue-router跳转时打开新页面的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue-router具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • vue+element表格导出为Excel文件

    vue+element表格导出为Excel文件

    这篇文章主要为大家详细介绍了vue+element表格导出为Excel文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue select组件绑定的值为数字类型遇到的问题

    vue select组件绑定的值为数字类型遇到的问题

    这篇文章主要介绍了vue select组件绑定的值为数字类型遇到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue实现界面滑动效果

    vue实现界面滑动效果

    这篇文章主要为大家详细介绍了vue实现界面滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 关于element-ui 单选框默认值不选中的解决

    关于element-ui 单选框默认值不选中的解决

    这篇文章主要介绍了关于element-ui 单选框默认值不选中的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3 响应式 API 及 reactive 和 ref 的用法示例详解

    Vue3 响应式 API 及 reactive 和 ref&

    响应式是一种允许以声明式的方式去适应变化的编程范例,这篇文章主要介绍了关于Vue3响应式API及reactive和ref的用法,需要的朋友可以参考下
    2023-06-06

最新评论