JavaScript 中 Promise 对象的基本用法

JavaScript 中 Promise 对象的基本用法

1const fun = function(num{
2    return new Promise((resolve, reject) => {
3        if (num >= 0return resolve("resolve "+num);
4        else return reject("reject "+num);
5    });
6};

上面构造了一个方法 fun, 方法会返回 Promise 实例,实例的动作是:当参数为非负数时返回 resolve 和数字本身,当参数为负数时返回 reject 和数字本身。

使用then的调用结果

1fun(2).then((info)=>{console.log("+++ "+info);}, (info)=>{console.log("--- "+info);});
2fun(-3).then((info)=>{console.log("+++ "+info);}, (info)=>{console.log("--- "+info);});
1+++ resolve 2
2--- reject -3

可以发现当 Promise 对象的状态为 resolved 时,通过 then 当中的第一个匿名函数输出了结果,加上了 +++ 前缀;当状态为 rejected 时,结果通过 then 的第二个匿名函数输出,加上了 — 前缀。

使用catch的调用结果

1fun(2).then((info)=>{console.log("+++ "+info);}})
2      .catch((info)=>{console.log("000 "+info);});
3fun(-3).then((info)=>{console.log("+++ "+info);})
4      .catch((info)=>{console.log("000 "+info);});
1+++ resolve 2
2000 reject -3

可以看出 rejected 状态被 catch 捕捉输出了。

而如果使用 catch 的同时使用 then 的第二个参数

1fun(-3).then((info)=>{console.log("+++ "+info);}, (info)=>{console.log("--- "+info);})
2      .catch((info)=>{console.log("000 "+info);});
1--- reject -3

会发现 catch 没有起作用,因为错误会先被 then 的第二个参数捕捉。

使用finally的调用结果

1fun(2).then((info)=>{console.log("+++ "+info);})
2      .catch((info)=>{console.log("000 "+info);})
3      .finally(()=>{console.log("FFF ");});
1+++ resolve 2
2FFF

不发生错误的情况会执行 finally 中的内容

1fun(-3).then((info)=>{console.log("+++ "+info);})
2      .catch((info)=>{console.log("000 "+info);})
3      .finally(()=>{console.log("FFF ");});
1000 reject -3
2FFF

发生错误的情况也会执行 finally 中的内容

async的基本用法

一个例子:假定需要完成这样一个目标,给定数字 num,要求对 num 先执行 num = num+num 再执行 num = num*num

先定义两个对应的方法:

 1function add(num{
2    return new Promise((resolve, reject) => {
3        resolve(num+num);
4    });
5}
6
7function multiply(num{
8    return new Promise((resolve, reject) => {
9        resolve(num*num);
10    });
11}

用 Promise 的方式:

1add(2).then(multiply).then((info)=>{console.log(info);});

用 async 和 await 的方式:

1async function run({
2    var result = await multiply(await add(2));
3    console.log(result);
4}
5
6run()

结果相同,都是 16

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注