promise 和 async、await
promise 是同步的且自动执行的,但是可以用来解决异步执行顺序的,让异步执行有先后顺序的,来搞定异步执行后的操作的。
意思就是假如有个异步操作,我想在异步操作之后进行下一步操作,可是js的顺序永远是先同步后 异步而且同步顺序执行,异步并发执行,这是就可以用到promise来确保执行的先后顺序
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易
const thing = new Promise((resolve, reject) => {
let num = 10;
setTimeout(() => {
num++;
}, 1000);
console.log("this is promise");
resolve(num);
});
thing.then((num) => {
const number = num;
console.log("after promise success");
console.log(number);
});
.then()和.catch()是异步的(微任务),promise是同步的
console.log("同步1");
const thing = new Promise((resolve) => {
let num = 10;
setTimeout(() => {
console.log("这是promise1");
num++;
resolve(num);
}, 1000);
});
const a = new Promise((resolve) => {
console.log("这是promise2");
resolve();
});
//.then和catch是异步的,永远都是等promise执行完后,调用它,顺序在自己的promise后面
thing.then((num) => {
// const number =num
console.log("promise1 成功");
console.log("promise1 成功===>" + num);
});
a.then(() => {
console.log("promise2 成功");
});
let num = 100;
num++;
console.log("同步2" + num);
console.log("同步3");
setTimeout(() => {
console.log("异步1");
}, 0);
输出:
同步1
这是promise2
同步2101
同步3
promise2 成功
异步1
这是promise1
promise1 成功
promise1 成功===>11
promise的三种状态
- pending:等待状态,比如正在执行,还没得到最终数据
- fulfill : 满足状态,当我们主动调用resolve时(说明执行成功了),就是处于该状态了,并会回调.then()
- rejected:拒绝状态,当我们主动调用了reject时(没有执行成功),就处于这个状态,并且回调.catch()
这三个状态转换:只能pending
–>fulfill
、pending
–>rejected
不可以逆向转换,同时一旦转换后,状态就不能再更改了
promise 链式调用
**promise的 then 方法会继续返回一个 promise 对象 **
let promiseDemo = new Promise((resolve, reject) => {
// code
resolve("success");
// code
reject("failed");
});
promiseDemo
.then(
(result) => {
// console.log(result);
return result;
},
(result) => {
console.log(result);
return result;
}
)
.then((result) => {
console.log(result);
});
//还可以一直往下传
async await
他们也是用于解决异步执行问题的
- async :异步的意思,用来申明一个异步的函数,会返回一个promise
- await:用于等待一个异步操作的执行,它是一个表达式,async函数内才可以使用await ,await 之后的代码会被阻塞
var b = async function() {
console.log("async");
return "hello";
};
// 这三个相等,都会返回一个成功状态的promise
console.log(b());
console.log(Promise.resolve("hello"));
console.log(new Promise((resolve) => resolve("hello")));
await会阻塞同作用域及之下的代码执行,等异步完成之后,再执行它们
async function fun() {
console.log(111);
const res = await axios.get("http://localhost:3008/product");
console.log(res.data);
console.log(222);
}
fun();
console.log(333);
结果:
111
333
(4) [{…}, {…}, {…}, {…}]
222