企业项目管理、ORK、研发管理与敏捷开发工具平台

网站首页 > 精选文章 正文

Vue中Promise的使用 vue prompt

wudianyun 2024-12-18 14:06:34 精选文章 67 ℃

在我们实际中最常用到的是异步操作时,对异步操作进行封装,Promise 是一个函数返回的对象,我们可以在它上面绑定回调函数。

promise的简单使用

let p = new Promise((resolve,reject)=>{
    //实现异步数据处理任务
    //当处理成功时调用resolve方法
    resolve("处理成功");
    //当处理失败时调用reject方法
    reject("处理失败");
});

p.then(result=>{
    //从resolve得到正常结果
  
},function(error=>{
    //从reject得到错误信息
            
});  

从代码中我们可以看出Promise可以接受两个方法函数分别对应异步操作的结果,一个是成功后的回调一个是失败后的回调。

Promise常用的API

实例方法
new Promise 来创建对象
p.then()得到异步任务的正确结果
p.catch()获取异常信息

使用方式1

let p = new Promise((resolve,reject)=>{
    //实现异步数据处理任务
    //当处理成功时调用resolve方法
    resolve("处理成功");
    //当处理失败时调用reject方法
    reject("处理失败");
});

p.then(result=> {
        console.log(result);
    })
    .catch(error=> {
        console.log(error);
    })

使用方式2

let p = new Promise((resolve,reject)=>{
    //实现异步数据处理任务
    //当处理成功时调用resolve方法
    resolve("处理成功");
    //当处理失败时调用reject方法
    reject("处理失败");
});
p.then(result=>{
        console.log(result);
    },
    error=> {
        console.log(error);
    })

在这里说明一点就是当我们new Promise的时候,其实里面的处理逻辑是没有执行的,只有当调用then函数的时候才是处理逻辑执行的时候。

多个异步任务处理

1、Promise.all()方法

当处理并发多个异步任务,所有任务都执行完成才表示通过

let p1 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p2 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p3 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

Promise.all([p1,p2,p3]).then((result)=>{
    console.log(result);
})

这个时候只有p1、p2、p3同时调用resolve方法数据处理成功的时候,Promise.all方法才会代表执行通过。

2、Promise.race()方法

当处理并发多个异步任务,只要其中有一个任务完成就表示执行通过

let p1 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p2 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

let p3 = new Promise((resolve,reject)=>{
    resolve("处理成功");
});

Promise.race([p1,p2,p3]).then((result)=>{
    console.log(result);
})

这个时候只要p1、p2、p3中至少有一个调用resolve方法数据处理成功的时候,Promise.race方法就代表执行通过。

Tags:

最近发表
标签列表