1、定义
- ES6中重要和好用的特性
- 是异步编程的一种解决方案
- resolve , reject 是函数
- 链式编程
2、什么时候使用
- 一般在有异步操作时，使用Promise对异步操作的封装
- new ----->构造函数（1、保存一些状态信息 2、执行传入的函数）
- 在执行传入的回调函数时，会传入两个参数。resolve 、reject 本身又是函数
可以嵌套：（简单嵌套）
image.png
3、Promise的三种状态
- pending：等待状态，比如正在进行网络请求，或者定时器没有到时间；
- fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
- reject：拒绝状态，当我们主动调用reject时，就处于该状态，并且会回调.catch()
//也可以将 resolve reject 调用的放在一起
//如下 可以都放在了then里面 用逗号隔开
new Promise((resolve, reject) => {
resolve("成功");
// reject("失败");
}).then(
(data) => {
console.log(data);
},
(error) => {
console.log(error);
}
);
},
4、链式调用
4.1考虑的是每层都是正确的情况
除了前面2、的简单嵌套
还可以对 对前面数据的处理 再进行下一步
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("111");
}, 1000);
})
.then((res) => {
//1、第一次自己处理代码
console.log(res, "第一层的处理代码"); //输出结果111
// 2、第一次对结果处理
return new Promise((resolve) => {
resolve(res + 222);
});
})
.then((res) => {
//1、第二次自己处理代码
console.log(res, "第二层的处理代码"); //输出结果111222
//2、第二次对结果处理
return new Promise((resolve) => {
resolve(res + 333);
});
})
.then((res) => {
//1、第三次自己处理代码
console.log(res, "第三层的处理代码"); //输出结果111222333
//2、第三次对结果进行处理
return new Promise((resolve) => {
resolve(res + 444);
});
})
.then((res) => {
console.log(res, "第四层的处理代码"); //输出结果111222333444
});
上面的代码可以简写，如下：
//简写 new Promise(resolve => resolve(结果))
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("111");
}, 1000);
})
.then((res) => {
//1、第一次自己处理代码
console.log(res, "第一层的处理代码");
// 2、第一次对结果处理
// return new Promise((resolve) => {
// resolve(res + 222);
// });
return Promise.resolve(res + 222);
})
.then((res) => {
//1、第二次自己处理代码
console.log(res, "第二层的处理代码");
//2、第二次对结果处理
// return new Promise((resolve) => {
// resolve(res + 333);
// });
return Promise.resolve(res + 333);
})
.then((res) => {
//1、第三次自己处理代码
console.log(res, "第三层的处理代码");
//2、第三次对结果进行处理
// return new Promise((resolve) => {
// resolve(res + 444);
// });
return Promise.resolve(res + 444);
})
.then((res) => {
console.log(res, "第四层的处理代码");
});
上面的代码还可以简写，如下：
//还可以更简洁 省略掉Promise.resolve
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("111");
}, 1000);
})
.then((res) => {
//1、第一次自己处理代码
console.log(res, "第一层的处理代码");
// 2、第一次对结果处理
return res + 222;
})
.then((res) => {
//1、第二次自己处理代码
console.log(res, "第二层的处理代码");
//2、第二次对结果处理
return res + 333;
})
.then((res) => {
//1、第三次自己处理代码
console.log(res, "第三层的处理代码");
//2、第三次对结果进行处理
return res + 444;
})
.then((res) => {
console.log(res, "第四层的处理代码");
});
4.2 有一层出现错误（reject）的写法
// 前面考虑的是 每一层都是成功的情况 如果中间有一层是执行失败呢？
// 输出第一次自己处理代码的饿结果和reject的结果
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("111");
}, 1000);
})
.then((res) => {
//1、第一次自己处理代码
console.log(res, "第一层的处理代码"); //输出结果111
// 2、第一次对结果处理
return new Promise((resolve, reject) => {
// resolve(res + 222);
reject("err,对结果第一次处理 出现错误"); //错误结果
});
})
.then((res) => {
//1、第二次自己处理代码
console.log(res, "第二层的处理代码");
//第二次对结果处理
return new Promise((resolve) => {
resolve(res + 333);
});
})
.then((res) => {
//1、第三次自己处理代码
console.log(res, "第三层的处理代码");
//2、第三次对结果进行处理
return new Promise((resolve) => {
resolve(res + 444);
});
})
.then((res) => {
console.log(res, "第四层的处理代码");
})
.catch((err) => {
console.log(err);
});
前面代码的简写:
//前面中间有错误的处理方法一样有简写
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("111");
}, 1000);
})
.then((res) => {
//1、第一次自己处理代码
console.log(res, "第一层的处理代码"); //输出结果111
// 2、第一次对结果处理
// return Promise.reject("err message"); //reject简写
throw "error message"; //这种写法也是一样的
})
.then((res) => {
//1、第二次自己处理代码
console.log(res, "第二层的处理代码");
//第二次对结果处理
return promise.resolve(res + 333);
})
.then((res) => {
//1、第三次自己处理代码
console.log(res, "第三层的处理代码");
//2、第三次对结果进行处理
return Promise.resolve(res + 444);
})
.then((res) => {
console.log(res, "第四层的处理代码");
})
.catch((err) => {
console.log(err);
});
5、promise.all 的使用
//在两个Promise请求全部得到结果后 才then
//返回的results是数组，数组[0]是第一个promise返回的数据；数组[1]是第二个Promise返回的数据
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: "第一个请求返回的数据！",
message: "返回的时间是两秒后",
});
}, 2000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: "第二个请求返回的数据",
message: "返回的时间是一秒后",
});
}, 1000);
}),
]).then((results) => {
console.log(results);
});
返回的结果：
image.png
let p1 = new Promise((resolve, reject) => {
let math1 = Math.ceil(Math.random() * 10);
if (math1 > 5) {
resolve(math1);
} else {
reject(math1);
}
});
let p2 = new Promise((resolve, reject) => {
let math2 = Math.ceil(Math.random() * 10);
resolve(math2);
});
let p3 = new Promise((resolve, reject) => {
let math3 = Math.floor(Math.random() * 10 + 1);
resolve(math3);
});
const p = Promise.all([p1, p2, p3]);
p.then((data) => {
console.log("promise.all resolve 返回的结果", data);
// （1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
}).catch((error) => {
console.log("promise.all reject 结果", error);
// （2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
});
// 返回的可能结果：
// promise.all resolve 返回的结果 (3) [8, 3, 9]
// promise.all reject 结果 3
1. async/await
image.png
