promise是为了解决回调的嵌套,回调的交叉调用问题。
promise有3个状态:pending 初始化、resolve 成功、reject 失败。
例子1:简单使用promise。
//resolve,reject 这2个参数也是函数 let promise = new Promise((resolve,reject) => { console.log("1111"); //这里发送ajax请求后台数据,使用setTimeout模拟。2秒后数据返回。 setTimeout(() => { let data = {username:"zhangsan",age:34};//模拟后台返回的数据 //resolve(data);//成功,调用resolve方法。 reject(data);//失败,调用reject方法。 },2000) }); console.log("2222"); promise.then((data) => {//成功执行的函数 console.log(`成功了${data.username}`); },(data) => { //失败执行的函数 console.log(`失败了${data.age}`); })
上面的代码需要注意几个问题:
- 程序先执行new Promise()里面的代码,所以先打印"1111"然后打印“2222”。也就是new Promise()里传递的那个匿名函数不是异步执行的。
- 使用setTimeout模拟从后台异步请求回来数据。
- 当调用resolve()方法时,表示成功。将执行promise.then()方法第1个回调函数。
- 当调用reject()方法时,表示失败。将执行promise.then()方法第2个回调函数。
上面就是promise的作用。把成功、失败的回调逻辑。拿出来放在then()方法中。
例子2:Promise的链式调用。
function getMovie(url){ let promise = new Promise((resolve,reject) => { setTimeout(() => { let data = {username:"zhangsan",age:34};//模拟后台返回的数据 resolve(data);//成功,调用resolve方法。 //reject(data);//失败,调用reject方法。 },2000) }); return promise; } function getComment(url) { let promise = new Promise((resolve,reject) => { setTimeout(() => { let data = {username:"zhangsan",age:34};//模拟后台返回的数据 resolve(data);//成功,调用resolve方法。 //reject(data);//失败,调用reject方法。 },2000) }); return promise; } getMovie("https://localhost:8080/movies/31") .then((date) => { //成功的处理逻辑,成功之后,获取电影的评论 return getComment("https://localhost:8080/31/comment") },(date) => { //失败逻辑 }) .then((date) => { //成功的处理逻辑 },(date) => { //失败逻辑 })
注意上面,获取电影、电影评论的时候返回promise。然后在调用getMovie的成功回调中。返回了promise。这样就可以一直then()方法链式回调下去