Promise是什么?
- 主要用于异步计算
- 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
- 可以在对象之间传递和操作promise,帮助我们处理队列
- 有三种状态:初始(pending),成功(fulfilled),失败(rejected)
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功 ==>状态pending =>fulfilled
(err) => {console.log(err)} // 失败 ==> 状态由pending =>rejected
)
什么是Async/Await?
- async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
- async/await是基于Promise实现的,它不能用于普通的回调函数。
- async/await与Promise一样,是非阻塞的。
- async/await使得异步代码看起来像同步代码,这正是它的魔力所在。
1、async声明的函数的返回本质是一个Promise。
什么意思呢?就是说你只要声明了这个函数是async,那么内部不管你怎么处理,它返回肯定是一个promise。
简洁版
async function demo () {
return '返回是Promise';
};
demo().then((result) => console.log(result)) //返回是Promise
const demo = async function () {
return Promise.resolve ('返回是Promise');
//等同于return '返回是Promise';
//等同于 return new Promise((resolve,reject) => { resolve('返回是Promise') })
}
demo.then(result =>{
console.log(result)
})
2、await的本质是提供等同于把异步变同步的语法糖。
async 函数返回的 Promise 对象,必须等到内部所有的 await 命令的 Promise 对象执行完,才会发生状态改变
const demo = timeout => new Promise(resolve => {
setTimeout(() => {
console.log(timeout);
resolve();
}, timeout)
});
saync function fun(){
console.log('开始');
await demo(1000);
await demo(500);
await demo(200);
console.log('结束');
return '执行Promise';
}
fun().then(res => console.log(res)); //等待1700ms后打印 ‘执行Promise’
正常情况下,await 命令后面跟着的是 Promise ,如果不是的话,也会被转换成一个 立即 resolve 的 Promise
async function fun() {
return await '结束'
};
fun().then((res) => console.log(res)); //结束
3、Async 函数的错误处理
const demo = Promise.reject('返回');
console.log(demo);
demo.then(res => {
console.log('success',res);
}).catch(err=> {
console.log('error', err)
})
4、Promise.all方法
Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。
当所有状态都是成功状态返回的是数组格式,但是只要其中一个的是reject,则返回reject的状态值。
const demo1 = Promise.resolve('111');
const demo2 = Promise.resolve('222');
const demo3 = Promise.resolve('333');
Promise.all([demo1,demo2,demo3]).then(result => {
console.log(res); // ['111','222','333']
})
const demo1 = Promise.resolve('111');
const demo2 = Promise.resolve('222');
const demo3 = Promise.reject('error');
Promise.all([demo1,demo2,demo3]).then(result => {
console.log(res);
}).catch(err =>{
console.log(err); //error
})
5、Promise.race方法
Promise.race方法同样是将多个Promise实例包装成一个新的Promise实例。
但是和all不同的是,race接受的对象中,哪个对象返回的快就返回哪个对象。
function demo(wait) {
return new Promise((res,rej) => {
setTimeout(() => {
res(wait);
},wait);
});
}
let p1 = demo(500);
let p0 = demo(2000);
Promise.race([p1,p0]).then(result => {
console.log(result);
});
let p2 = new Promise((resolve,reject) => {
setTimeout(()=>{
reject('error');
},1000);
});
Promise.race([p0,p2]).then(result => {
console.log(result);
}).catch(result => {
console.log(result);
});
//500
//error