目录
前言:我们在js编程时,很容易遇到异步队列和同步队列的问题,虽说是单线程,但是请求需要花时间,返回值还没有接受的情况下,会有bug问题,我把几个解决方案做一个笔记分享出来
先看看这个顺序执行进化版
最开始的
new Promise((resolve, reject) => {
resolve(new Promise((resolve, reject) => {
resolve('你好世界')
}))
}).then((value) => {
console.log(value);
})
出现promise.resolve()等快捷方法
Promise.resolve(new Promise((resolve, reject) => {
resolve('你好未来')
})).then((value) => {
console.log(value);
})
promise的语法糖async
async function ceshi() {
return '你好成功'
}
console.log(ceshi());
ceshi().then((value) => {
console.log(value);
})
什么是promise?
JavaScript
中存在很多异步操作,Promise
将异步操作队列化,按照期望的顺序执行,返回符合预期的结果。可以通过链式调用多个 Promise
达到我们的目的。
promise 是一个拥有
then
方法的对象或函数
promise就像一个承诺,允许我们在then以后去执行我们的代码,从而避免回调地狱
异步的状态:
状态说明:
Promise 包含pending
、fulfilled
、rejected
三种状态
pending
指初始等待状态,初始化promise
时的状态resolve
指已经解决,将promise
状态设置为fulfilled
reject
指拒绝处理,将promise
状态设置为rejected
promise
是生产者,通过resolve
与reject
函数告之结果promise
非常适合需要一定执行时间的异步任务- 状态一旦改变将不可更改
promise 是队列状态,就像体育中的接力赛,或多米诺骨牌游戏,状态一直向后传递,当然其中的任何一个 promise 也可以改变状态。
promise 没有使用 resolve
或 reject
更改状态时,状态为 pending
console.log(
new Promise((resolve, reject) => {
});
); //Promise {<pending>}
当更改状态后
console.log(
new Promise((resolve, reject) => {
resolve("fulfilled");
})
); //Promise {<resolved>: "fulfilled"}
console.log(
new Promise((resolve, reject) => {
reject("rejected");
})
); //Promise {<rejected>: "rejected"}
状态被改变后就不能再修改了,下面先通过resolve
改变为成功状态,表示promise
状态已经完成,就不能使用 reject
更改状态了
new Promise((resolve, reject) => {
resolve("操作成功");
已经成功处理返回了,不会更改状态
reject(new Error("请求失败"));
}).then(
msg => {
console.log(msg);
},
error => {
console.log(error);
}
);
执行顺序:
promise
创建时即立即执行即同步任务,(意思是promise里面的除了状态代码,其他的按照同步执行顺序放在宏观任务上执行)
then
会放在异步微任务中执行,需要等同步任务执行后才执行。
then意思是在宏观任务中,他是最后执行
let promise = new Promise((resolve, reject) => {
resolve("fulfilled");
console.log("yy");
});
promise.then(msg => {
console.log(帅哥);
});
console.log("是");
首先输出 yy
是
帅哥
promise
操作都是在其他代码后执行,下面会先输出 houdunren.com
再弹出 success
promise
的 then、catch、finally 的方法都是异步任务- 程序需要将主任务执行完成才会执行异步队列任务
const promise = new Promise(resolve => resolve("success"));
promise.then(alert);
alert("houdunren.com");
promise.then(() => {
alert("后盾人");
});
then得等待promise的状态返回后执行
下例在三秒后将 Promise
状态设置为 fulfilled
,然后执行 then
方法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("fulfilled");
}, 3000);
}).then(
msg => {
console.log(msg);
},
error => {
console.log(error);
}
);
动态改变执行顺序:
意味着我们可以在程序里面,可以按照我们想的顺序执行代码。也可以减少异步代码操作带来的bug(接口还没请求玩执行前端页面操作)
下例中 p2 返回了 p1 所以此时 p2 的状态已经无意义了,后面的 then 是对 p1 状态的处理。
const p1 = new Promise((resolve, reject) => {
// resolve("fulfilled");
reject("拒绝");
});
const p2 = new Promise(resolve => {
// 返回的是p1的拒绝处理
resolve(p1);
}).then(
res => {
console.log(1, res);
},
rej => {
console.log(2, rej); //2 '拒绝'
}
);
如果
resolve
参数是一个promise
,将会改变promise
状态。这里是重点,我们可以自己写promise,然后将接口返回的结果放在我们自己写的promise里面的状态resolve里面,在调用then,去执行页面操作,这样的话就是异步队列,同步执行
下例中 p1
的状态将被改变为 p2
的状态