js异步async/await与Promise的理解整理

Promise是什么？

1. 主要用于异步计算
2. 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3. 可以在对象之间传递和操作promise，帮助我们处理队列
4. 有三种状态：初始（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?

1. async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
2. async/await是基于Promise实现的，它不能用于普通的回调函数。
3. async/await与Promise一样，是非阻塞的。
4. 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