您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— Promise

《和小米一起学Vue.js》— Promise

[ 孤狼 | 2023-01-09 12:13:52 | Vue | 299°C | 0条评论 ]

一般我们的javascript都是同步运行的,但是这样在前端上就会出现请求空白期,在一般web开发中我们是使用ajax来解决异步的问题。但是如果我们需要的异步操作层级很多,ajax用起来就会比较繁琐。这时候我们就可以使用promise了。


promise运行特点

在本轮 事件循环 运行完成之前,回调函数是不会被调用的。
即使异步操作已经完成(成功或失败),在这之后通过 then() 添加的回调函数也会被调用。
通过多次调用 then() 可以添加多个回调函数,它们会按照插入顺序进行执行。


promise三个状态

promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)


promise三个方法

.then() 用来处理成功回调

.catch() 用来处理失败回调

.finally() 最后收尾处理无论成功与否都会被调用


小案例

先来看一个小案例

const p=new Promise((resolve, reject)=>{
//这里模拟进行异步执行
console.log("开始异步请求");
setTimeout(() => {
//如果异步任务执行成功了调用resolve,失败了调用reject
console.log("异步请求结束");
resolve("结果数据"); //设置为成功
}, 3000);
}).then(message=>{
console.log("调用成功:"+message);
}).catch(error=>{
console.log("调用失败:"+error);
});

分开写法

const p2=new Promise((resolve, reject)=>{
//这里模拟进行异步执行
console.log("开始异步请求");
setTimeout(() => {
//如果异步任务执行成功了调用resolve,失败了调用reject
console.log("异步请求结束");
resolve("结果数据"); //设置为成功
}, 3000);
});

p2.then(message=>{
console.log("调用成功:"+message);
}).catch(error=>{
console.log("调用失败:"+error);
});


在上面的案例中异步请求完成之后,如果成功则调用 resolve() 如果失败调用 reject() 。他们同时可以传输数据到相应的接收函数。其中, resolve() 调用的是 then() ,reject() 调用的是 catch() 。


promise链式调用

有时候我们需要异步请求之后,多次进行数据操作,可以使用 promise 的链式操作来达到目的。

    const p=new Promise((resolve, reject)=>{
console.log("开始异步请求1");
setTimeout(() => {
console.log("异步请求结束1");
resolve("结果数据"); //设置为成功
}, 3000);
}).then(message=>{
console.log("调用成功1:"+message);
message+='aaaa';
return message;
}).then(message2=>{
console.log("调用成功2:"+message2);
message2+='bbb';
return message2;
}).then(message3=>{
console.log("调用成功2:"+message3);
}).catch(error=>{
console.log("调用失败:"+error);
});

上面案例中,通过多个 then() 来链式调用。


TIP:在 then() 中,如果想继续保存数据链式调用,需要 return 数据到下一个then,否则数据会丢失。

有时候我们需要连续多次异步请求,比如拿到用户ID查手机号,拿到手机号去查运营商等等。这时候就要用到 promise 异步链式调用,这也是promise的一个特色。

    const p=new Promise((resolve, reject)=>{
console.log("开始异步请求1");
setTimeout(() => {
console.log("异步请求结束1");
resolve("结果数据"); //设置为成功
}, 1000);
}).then(message=>{
console.log('第一个then:'+message);
//上面请求成功拿到数据之后,再次异步请求
console.log("开始异步请求2");
return new Promise((resolve, reject)=>{
//第二次异步请求
setTimeout(() => {
//调用成功函数
console.log("异步请求结束2");
resolve('第一个then中的数据');
}, 1000);
})
}).then(message2=>{
console.log('第二个then:'+message2);
//上面请求成功拿到数据之后,再次异步请求
}).catch(error=>{
console.log("调用失败:"+error);
});


上面的代码中我们可以看到,前一个函数 return 到后面的是一个 promise对象,所以可以连续进行异步请求。


在链式异步请求调用中,如果中间有一个调用失败了,后续的异步请求都不会继续执行,而是直接进入 catch() 。

    const p=new Promise((resolve, reject)=>{
console.log("开始异步请求1");
setTimeout(() => {
console.log("异步请求结束1");
resolve("结果数据"); //设置为成功
}, 1000);
}).then(message=>{
console.log('第一个then:'+message);
//上面请求成功拿到数据之后,再次异步请求
console.log("开始异步请求2");
return new Promise((resolve, reject)=>{
//第二次异步请求
setTimeout(() => {
//调用成功函数
console.log("异步请求结束2");
reject('第一个then中的数据');
}, 1000);
})
}).then(message2=>{
console.log('第二个then:'+message2);
//上面请求成功拿到数据之后,再次异步请求
}).catch(error=>{
console.log("调用失败:"+error);
}).finally(()=>{
console.log("end");
});


TIP:如果不是链式异步请求无法调用 reject 可以直接调用 throw 来直接报错进入 catch()。


promise.all

如果我们有多个同时运行的异步请求,需要全部完成之后才处理。这时候可以用 promise.all 来处理

    Promise.all([
new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('OK1');
}, 1000);
}),
new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('OK2');
// reject('err2');
}, 2000);
}),
]).then(data=>{
console.log(data[0]);
console.log(data[1]);
}).catch(err=>{
console.log(err)
})

上面的代码中,2个 promise 对象都要完成异步请求之后,才会触发 then()。 如果其中任何一个触发失败,都会直接进入 catch()


代码下载

下载地址:  密码:sbwm


转载请注明出处:http://gl.paea.cn/n.php?n=208
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索