js中promise用法介绍|vue代码笔记|vue基础教程

首页 > vue代码 > promise用法介绍

js中promise用法介绍

时间：2023-12-25

promise是一种异步解决方案。试想一下场景：拿到一批订单数据，然后拿到其中某些已支付的订单再调用接口获取这些订单的商品信息，这样就存在一个调用链，需要再接口一执行完只是再执行接口二，即同步进行。

值得注意的是，promise是ES6的新特性，主流浏览器基本上都支持这一用法。

一、用法介绍

promise 的参数是一个函数，此函数是异步进行的，返回值一个promise对象。这个promise对象有2个方法为 then 和 catch，分别接收resolve和reject的参数，则是同步进行的，即等到参数函数内部执行完才会执行then或catch。

一个例子完整介绍promise用法：

//方式一：返回对象

let myPromise = new Promise((resolve, reject) =>{
setTimeout(() =>{

resolve('成功data')

reject('error message')
}, 1000)
});

//方式二：直接执行then 和 catch

new Promise((resolve, reject) =>{
setTimeout(() =>{

//成功的时候调用resolve ，当然这里是一个执行逻辑，比如拿到订单数据，使用状态来判断某些订单执行resolove，某些订单执行reject

resolve({"订单ID":123})

//失败的时候调用reject
reject({"订单ID":12345})
}, 1000)

}).then((data) =>{

//处理成功后的逻辑

console.log(data);//这个data 是接收的resolve参数

//TODO：执行其他逻辑

}).catch((err) =>{
console.log(err);//这个error是接收的reject参数

//TODO：执行其他逻辑
})
</script>　

二、调用链

当一条调用链其中一条被rejected，后面的promise也不会再执行，而是直接跳到catch方法

f1().then(f2).then(f3)
.then(function(data) {
console.log('data: ' + data);
})
.catch(function(error) {
console.log('error: ' + error);
});

function f1() {
return new Promise(function(resolve, reject) {
console.log('p1 resolved');
resolve(123);
});
}

function f2() {
return new Promise(function(resolve, reject) {
console.log('p2 rejected');
reject(456);
});
}

//不会被执行
function f3() {
return new Promise(function(resolve, reject) {
console.log('p3 resolved');
resolve(789);
});
}

简单写法,用于快速构建Promise对象：

async function testAsync () {

return Promise.resolve("hello async")

}

//等价于

new Promise(resolve => resolve("hello async"))

站长微信

微信公众号

站点声明：

1、本站所有内容都为原创

2、文章转载时请附带本站原文链接，谢谢。