javascript中的异步调用，promise对象，async/await用法

原生javascript中的的回调函数

即callback 就是通过回调函数来通知主程序
对于io 密集的非常好用：eg. file,DB读写,网络访问

异步：

javascript就是个单线程语言，

回调函数看上执行了支线程，但都在一个主线程中运行
不需要考虑线程同步，资源竞争的问题，线程切换，
多个异步操作，就会套娃，回调地狱

promise:

为了解决回调地狱，用fetch()获取服务器数据，动态更新页面内容，
优点是将多个异步操作 以链式结构串联起来

fetch("http://....")
.then((response) => { response.json() }) //response.json() 就是另外一个promise,将返回的数据转换称json格式
这个就是C# 的task
.then( (json) => { console.log(json)}) //json 是上一行返回的
.catch( (error) => {  }) //捕获异常，放在链式末尾，网络异常，和同步编程的try catch块很类似
.finally( () => {
	stopLoadingAnimation();//如果有加载动画，可以在finally中关闭它
})

async/await:

javascript ecma17中加入的两个关键字，
是promise 之上的语法糖，
首先用async 将function f() 标记为异步函数

 async function f(){
	const response = await fetch("https://....");  //不需要使用then， 而是使用await, response 已经是服务器返回的数据了，
	const json = await response.json();
	console.log(json); // 1
}
f() // 注意： 这个函数的返回值永远是promise 对象

//或者更简洁的方法：
( async () => {
	await someAsyncFunction();
})

1.虽然看上去会block 函数执行，但实际上页面还是可以操作的，例如一个toggle, 即在等待过程中js同样可以处理其他任务，比如更新界面，运行其他代码等
因为await 底层是基于promise 和事件循环机制实现的

async function f(){
	const promiseA = fetch("http://...");
	const promiseB = fetch("http://...");
	
	const [a,b] = await Promise.all([promiseA, promiseB]);
}

foreach() {
	await fetch(…); //不work
}
//await 组织在异步函数中才有效，
await someAsyncOperation(); //×

有了async/await 就不需要写promise 底层代码，

但某些旧版浏览器不支持 async 语法，我们可以使用转译器(transpiler, 也是babel) 将其兼容到ie

原视频参考：
https://m.biilbili.com/video/BV1WP4y187Tu?p=1