写给 Java 程序员的前端 Promise 教程
原创写给 Java 程序员的前端 Promise 教程
原创
1. 为什么需要 Promise
假设我现在有这样一个需求，用户先去登录，登录成功之后，再去服务端获取用户信息，获取到用户信息之后再去服务端获取前端的动态菜单。一般我们的 Ajax 请求都是异步形式，为了确保上一步操作成功再执行下一个请求，所以最终发出的请求伪代码类似下面这样：
$.ajax({
url:'/login',
data:loginForm,
success: function (data) {
//登录成功
$.ajax({
url:'/getInfo',
success: function (userInfo) {
//获取用户信息成功
$.ajax({
url: '/getMenus',
success: function (menus) {
//获取菜单成功
}
})
}
})
}
})
复制代码为了确保一个异步任务执行完成后，再执行下一个异步任务，我们不得不在回调函数中不停的写下去，上面我举的例子是三个请求嵌套，实际上可能会更多。。。这就是前端所谓的回调地狱。而 Promise 就是来解决回调地狱的。
2. Promise
Promise 从字面上理解，就是承诺，承诺将来在某一个时间会做某一件事。通过 Promise 我们可以将异步任务执行的代码和处理的代码完全分离开。 还是第一小节这个例子，如果我们用 Promise 写，那么方式如下：
function login(resolve, reject) {
setTimeout(() => {
let number = Math.random();
if (number > 0.5) {
resolve("login success")
} else {
reject("login failed")
}
}, 2000);
}
function getInfo(resolve, reject) {
setTimeout(() => {
let number = Math.random();
if (number > 0.5) {
resolve("getInfo success")
} else {
reject("getInfo failed")
}
}, 2000);
}
function getMenus(resolve, reject) {
setTimeout(() => {
let number = Math.random();
if (number > 0.5) {
resolve("getMenus success")
} else {
reject("getMenus failed")
}
}, 2000);
}
new Promise(login).then(data => {
console.log("login:", data);
return new Promise(getInfo);
}).then(data => {
console.log("getInfo:", data);
return new Promise(getMenus);
}).then(data => {
console.log("getMenus", data);
}).catch(err => {
console.log("err:", err);
})
复制代码我们在 Promise 中写异步任务执行的代码，在上面的案例中，松哥通过 setTImeout 方法模拟了一个耗时操作，异步任务执行完毕后，我们调用 resolve 方法返回调用的结果（会进入到下一步的 then 中），也可以调用 reject 方法表示调用失败（会进入到 catch 中）。
3. then
then 中的返回值可以分为三种情况。
3.1 正常 return
then 中方法的参数，是上一个 Promise 对象 resolve 的值，一个 Promise 对象可以有多个 then，例如上面案例的登录功能，我们可以一直 then 下去：
function login(resolve, reject) {
setTimeout(() => {
let number = Math.random();
if (number > 0.5) {
resolve("login success")
} else {
reject("login failed")
}
}, 2000);
}
new Promise(login).then(data => {
console.log("then1:", data);
return data;
}).then(data => {
console.log("then2:", data);
return data;
}).then(data => {
console.log("then3:", data);
}).catch(err => {
console.log("err:", err);
})
复制代码
这样可以一直返回，这有点像我们 Java 中的流式编程。
3.2 抛出异常
在 then 中，我们可以对返回结果进行判断，不满足条件也可以直接抛出异常，这样就会进入到最近的 catch 代码块中。如下案例：
function login(resolve, reject) {
setTimeout(() => {
let number = Math.random();
if (number > 0.5) {
resolve("login success")
} else {
reject("login failed")
}
}, 2000);
}
new Promise(login).then(data => {
console.log("then1:", data);
throw new Error("出错啦");
}).then(data => {
console.log("then2:", data);
return data;
}).then(data => {
console.log("then3:", data);
}).catch(err => {
console.log("err:", err);
})
复制代码像上面这段代码，如果进入到第一个 then 中，第一个 then 直接抛出异常，这样直接就进入到 catch 中了，后面的 then 就都不会执行了。
3.3 返回 Promise
第三种情况就是 then 中也可以返回一个 Promise 对象，这个就如同我们第二小节的案例，我这里就不再赘述了。 就说一句，如果 then 中返回的是一个 Promise 对象，那么接下来的 then 其实是这个 Promise 对象的 then，而不是一开始的 Promise 的 then 了。例如如下伪代码：
A.then((data)=>{return B}).then(xxx)
复制代码假设 A 和 B 都是 Promise 对象，那么第二个 then 方法是 B 的 then。 好啦，这就是 then 中的三种返回值情况。
4. catch
catch 主要是用来处理异常的情况，两种情况下会进入到 catch 中：
Promise 执行的时候通过 reject 返回数据。 then 中抛出 Error
出了问题，就由最近的 catch 来处理。
5. finally
最后还有一个 finally 用来兜底，这一套下来感觉有点像我们 Java 中的 try-catch-finally，也就是前面无论如何，最终 finally 中的代码都会执行。不过不同于 Java 中的 finally，Promise 中的 finally 在最终执行完毕后，还可以继续 then。。。前端的蜜汁操作。
6. 其他方法
最后，我们再来看看 Promise 中的其他静态方法。
6.1 Promise.all()
Promise.all() 方法可以接收多个 Promise 对象，并且只返回一个 Promise 实例，这个方法会等所有输入的 Promise 对象的 resolve 方法都返回的时候，或者所有输入的 Promise 对象中有一个 reject 的时候，这个 all 就会执行结束，来看如下一个案例：
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
}).catch(err=>{
console.log("err", err);
})
复制代码当 promise1、promise2 以及 promise3 都执行了 resolve 的时候，就会进入到 then 中，这三个中有任意一个执行了 reject 就会进入到 catch 中。
6.2 Promise.race()
Promise.race() 方法可以接收多个 Promise 对象，一旦迭代器中的某个 Promise resolve 或 reject，返回的 Promise 就会 resolve 或 reject。 和 all 方法的区别在于，race 方法是谁执行的快，就用谁的结果。我们来看如下一段代码：
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 600, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
复制代码promise1 执行时间短，promise2 执行时间长，所以最终结果就是 promise1 的结果。
6.3 Promise.reject()
Promise.reject() 方法返回一个带有 reject 原因的 Promise 对象。来看如下一段代码：
function resolved(result) {
console.log('Resolved');
}
function rejected(result) {
console.error(result);
}
Promise.reject("error").then(resolved).catch(rejected);
复制代码这个执行的时候就会进入到 catch 中。
6.4 Promise.resolve()
Promise.resolve(value) 方法返回一个以给定值解析后的 Promise 对象。
const promise1 = Promise.resolve(3);
promise1.then(data=>{
console.log("data", data);
},err=>{
console.log("err", err);
})
复制代码这个用法比较简单，还有一些其他方法我就不一一列举了。
源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 提取码: yu27 百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～
开源地址
码云地址： https://gitee.com/ZhongBangKeJi/crmeb_java
Github 地址： https://gitee.com/ZhongBangKeJi/crmeb_java
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
