Promise 原始用法
1.创建Promise对象
const p1 = new Promise(function(resolve,reject){
1.1 放异步任务或代码
1.2返回结果
resolve(data) //异步任务完成的时候，调用resolve返回结果
reject(err) //异步任务失败的时候，调用resolve返回结果
})
promise的三种状态
Promise 有三种状态 ，分别是 pending 、 resolved 、rejected
// pending
const p1 = new Promise((resolve, reject)=>{
})
console.log('p1',p1)
// resolved
const p2 = new Promise((resolve, reject)=>{
resolve()
})
console.log('p2',p2)
//rejected
const p3 = new Promise((resolve, reject)=>{
reject()
})
console.log('p3',p3)
不同状态的表现
pending 状态下 的 promise ，不会触发 .then 和 .catch 方法。
const p1 = new Promise((resolve, reject)=>{
})
console.log('p1',p1)
p1
.then(()=>{
console.log('p1 then')
})
.catch(()=>{
console.log('p1 catch')
})
可以看到 pending 状态下没有打印任何结果。
resolved 状态下的 promise 只会触发 .then 方法。
const p2 = Promise.resolve()
console.log('p2',p2)
p2
.then(()=>{
console.log('p2 then')
})
.catch(()=>{
console.log('p2 catch')
})
举一反三，这个和上面的类似 ， rejected 状态 下的 promise 只会触发 .catch 方法。
const p3 = Promise.reject()
console.log('p3',p3)
p3
.then(()=>{
console.log('p3 then')
})
.catch(()=>{
console.log('p3 catch')
})
总结：
1.Promise 有三种状态 ，分别是 pending 、 resolved 、rejected ，pending可以转换成另外两种状态。
2.resolved 状态下的 promise 只会触发 .then 方法，， rejected 状态 下的 promise 只会触发 .catch 方法。
3.无论 then 还是 catch ，如果没有抛出异常
.then 和 .catch 返回的都是一个 resolved 状态的 Promise
如果抛出异常 返回的都是一个 rejected 状态的 Promise
一：什么是Promise
Promise是抽象异步处理对象以及对其进行各种操作的组件。
二：不管是 then 还是 catch 方法调用，都返回了一个新的promise对象
var aPromise = new Promise(function (resolve) {
resolve(100);
});
var thenPromise = aPromise.then(function (value) {
console.log(value);
});
var catchPromise = thenPromise.catch(function (error) {
console.error(error);
});
console.log(aPromise !== thenPromise); // => true
console.log(thenPromise !== catchPromise);// => true
以下例子：
第1种写法：
中并没有使用promise的方法链方式，这在Promise中是应该极力避免的写法。这种写法中的 then 调用几乎是在同时开始执行的，而且传给每个 then 方法的 value 值都是 100 。
第2中写法：
则采用了方法链的方式将多个 then 方法调用串连在了一起，各函数也会严格按照 resolve → then → then → then 的顺序执行，并且传给每个 then 方法的 value 的值都是前一个promise对象通过 return 返回的值。
// 1: 对同一个promise对象同时调用 `then` 方法
var aPromise = new Promise(function (resolve) {
resolve(100);
});
aPromise.then(function (value) {
return value * 2;
});
aPromise.then(function (value) {
return value * 2;
});
aPromise.then(function (value) {
console.log("1: " + value); // => 100
})
// vs
// 2: 对 `then` 进行 promise chain 方式进行调用
var bPromise = new Promise(function (resolve) {
resolve(100);
});
bPromise.then(function (value) {
return value * 2;
}).then(function (value) {
return value * 2;
}).then(function (value) {
console.log("2: " + value); // => 100 * 2 * 2
});
三：Promise.all()
Promise.all 接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 .then 方法。
1：创建一个新的Promise对象：Promise.all() 方法会创建一个新的 Promise 对象，这个新的 Promise 对象的状态将取决于传入的所有Promise 对象的状态。
2：处理每个Promise 对象：Promise.all() 方法会遍历传入的可迭代对象中的 每个Promise 对象，并以此对他们进行处理。
3：完成或失败：如果所有的Promise 对象都完成（fulfilled），则新的Promise对象也会完成，并将所有完成的Promise 对象的结果作为一个数组返回。如果其中任何一个Promise 对象失败（rejected），则新的Promise 对象也会失败，并将第一个失败的Promise 对象的原因作为失败原因返回。
4：传递结果或失败原因：当所有的Promise 对象都完成或失败后，Promise.all() 方法会根据新的 Promise 对象的状态来执行相应的回调函数，如果新的Promise 对象完成，会调用成功回调函数并传递所有完成的Promise 对象的结果作为参数；如果新的Promise 对象失败，会调用失败回调函数并传递一个失败的Promise 对象的原因作为参数。
const promises =[Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)];
Promise.all(promises).then(values=>{
console.log(values)
// 输出[1,2,3]
}).catch(reason=>{
console.error(reason);
// 输出“失败原因”
})
四：Promise.race()
Promise.race()意为赛跑的意思，也就是数组中的任务哪个获取的块，就返回哪个，不管结果本身是成功还是失败。
let p1=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success');
}, 10000);
});
let p2=new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('faild');
}, 500);
});
Promise.race([p1,p2]).then(res=>{
console.log(res); // 返回的是faild
}).catch(err=>{
console.log(err);
})
代码理解，resolve(),reject(),then(),catch()的执行顺序。
function test() {
return new Promise((resolve, reject) => {
const a = 0;
if (a) {
console.log('1');
resolve("Success");
} else {
console.log('2');
reject("nihao");
console.log('3');
}
console.log('4');
});
}
test().then((res) => {
console.log('5');
console.log(res);
}).catch(() => {
console.log('6');
});
以上代码：
当const a = 0时，输出2,3,4,6。
1、resolve()和reject()的执行不影响程序的后续执行。
2、执行完reject(）后，会被.catch()捕捉。
当const a = 1时，输出1,4,5,Success。
1、resolve()和reject()的执行不影响程序的后续执行。
2、执行完resolve(）后，会进入.then()，并把值传递给then()。
function test() {
return new Promise((resolve, reject) => {
const a = 0;
if (a) {
console.log('1');
resolve("Success");
} else {
console.log('2');
return reject("nihao");
console.log('3');
}
console.log('4');
});
}
test().then((res) => {
console.log('5');
console.log(res);
}).catch((err) => {
console.log('6');
console.log(err);
});
以上代码：
加了return之后，执行完输出2,6，nihao。
1、执行完reject()，会把值传入catch()。
2、加入return后，执行完return，不会继续执行test()方法的后续代码。
function test() {
new Promise((resolve, reject) => {
const a = 0;
if (a) {
console.log('1');
resolve("Success");
} else {
console.log('2');
reject("nihao");
console.log('3');
}
console.log('4');
}).catch((err) => {
console.log('5');
console.log(err);
console.log('6');
});
new Promise((resolve, reject) => {
const a = 0;
if (a) {
console.log('a');
resolve("e");
} else {
console.log('b');
reject("f");
console.log('c');
}
console.log('d');
}).catch((err) => {
console.log('g');
console.log(err);
console.log('h');
});
}
test();
以上代码：
两个Promise几乎是同时执行的，此时没有执行的先后顺序。
async function test() {
try {
await new Promise((resolve, reject) => {
const a = 0;
if (a) {
console.log('1');
resolve("Success");
} else {
console.log('2');
reject("nihao");
console.log('3');
}
console.log('4');
});
} catch (error) {
console.error("Caught an error in first promise:", error);
}
try {
await new Promise((resolve, reject) => {
const a = 0;
if (a) {
console.log('a');
resolve("e");
} else {
console.log('b');
reject("f");
console.log('c');
}
console.log('d');
});
} catch (error) {
console.error("Caught an error in second promise:", error);
}
}
test();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
